README.md

MindSphere v3 Hello World example in Node.js

Introduction

This is a hello world example application for Siemens MindSphere v3 platform.
This repository is composed by three components:

• backendServer
  • Node.js server that exposes application APIs.
• frontendServer
  • Node.js server that serves the UI.
• ui
  • Vue.js project to build the user interface. This project will be built and served as static files by frontendServer component.

Only backendServer and frontendServer are going to be deployed to MindSphere.
MindSphere Developer Official Documentation

Requirements

• Siemens MindSphere developer partnership
• CloudFoundry CLI
• Node.js
• Express application generator (optional)
• Vue.js

Cheatsheet

backendServer

Create Express application

express backendServer

Download and install the needed npm packages

cd backendServer
npm install

Exlude node_modules folder during CloudFoundry deployment

echo "node_modules" > .cfignore

Add a test route in backendServer/routes/index.js

router.get('/appapi/test', function(req, res, next) {
  res.send("Hi, it's MindSphere");
});

Allow Cross Origin Access. Add the following in backendServer/app.js before any routing settings:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

frontendServer

Create Express application

express frontendServer

Download and install the needed npm packages

cd frontendServer
npm install

Exlude node_modules folder during CloudFoundry deployment

echo "node_modules" > .cfignore

Add a route to in frontendServer/routes/index.js
It will serve the Vue single page application for any requested url

router.get('*', function(req, res, next) {
  res.sendfile("public/index.html");
});

ui

Create Vue application. To be compliant with Content Security Policies, choose runtime only as Vue build when prompted during the application generation.

vue init webpack ui

Install axios

cd ui
npm install axios --save

In ui/src/App.vue replace the template with:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

In ui/src/components/HelloWorld.vue replace the template with:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

Import axios

import axios from 'axios'

Add created method

 created: function () {
    var url = '/appapi/test'
    if (process.env.NODE_ENV == 'development') {
      url = 'http://localhost:3000/appapi/test'
    }
    axios.get(url)
    .then(function (response) {
      this.msg = response.data
    }.bind(this))
    .catch(function (error) {
      console.log(error);
    });
  }
}

In ui/src/router/index.js replace the Router with:

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/app/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

In ui/package.json replace the build command with:

"build": "node build/build.js && rm -rf ../frontendServer/public/static/ && cp -r dist/ ../frontendServer/public/"

Deployment

Go to the Vue project root directory and build the project

npm run build

Perform the initial CF login (guide)

Edit manifest.yml, at least the following items should be modified.

• [yourCFComponent1] in the first applications/routes/route element
• [yourCFComponent2] in the second applications/routes/route element

Go to the root project directory and push the subsidiary projects to MindSphere

cd ..
cf push

The cf push command will read manifest.yml and push the related components.

After the command success, you're now ready to create a new application on MindSphere Developer Cockpit. Create an application from the MindSphere Launchpad > Developer Cockpit.
Create two components:

• backendserver
  • Cloud Foundry Direct URL: https://[yourCFComponent1].apps.eu1.mindsphere.io
  • Endpoints:
    • /appapi/**
    • /users/**
• frontendserver
  • Cloud Foundry Direct URL: https://[yourCFComponent2].apps.eu1.mindsphere.io
  • Endpoints:
    • /
    • /static/**

The rest of the deployment process can be found at this tutorial. Note that some screenshots are NOT up-to-date but you can guess what you do.