Insights Hub Vue Application NOT displaying in MindSphere

I have a Vue application and runs correctly locally, however, when I register my application in MindSphere, I get a white screen when opening my application from the MindSphere Launchpad.

It's highly probable that you are missing a Staticfile in your dist folder, a file needed when you set the buildpack to staticfile. MindSphere requires you to have this file in your dist. You will need to add this empty file directly under the dist folder.

To automate this step every time you make modifications and build your application into MindSphere, we have included two sets of scripts you can add to your package.json file so you automate this process.

For Vue:

    "buildlin": "vue-cli-service build && touch dist/Staticfile && cf push"

    "buildwin": "vue-cli-service build && type nul > dist/Staticfile && cf push"

Based on your OS/Sandbox Environment

In Linux based systems:

vue-cli-service build: Will build your code in a folder called dist

touch dist/Staticfile: Will add an empty Staticfile in the folder

cf push: Will push your app into MindSphere (Your manifest should point to the build folder)

In Windows:

vue-cli-service build: Will build your code in a folder called dist

type nul > dist/Staticfile : Will add an empty Staticfile in the folder

cf push: Will push your app into MindSphere (Your manifest should point to the build folder)

Be sure to confirm that your build folder matches the path inside your manifest.yml file

The two scripts are for a Vue script to publish your app into MindSphere. If you include this in your package.json inside the script section as seen as an example below:

{
  "name": "mindspherestarter",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "buildlin": "vue-cli-service build && touch dist/Staticfile && cf push",
    "buildwin": "vue-cli-service build && type nul > dist/Staticfile && cf push", 
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

(This project.json file is subject to change over time. At the time of this writing, this was the up-to-date version with the scripts included)

Notes