Insights Hub React Application NOT displaying in MindSphere

I have a React 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 build folder, a file needed when you set the buildpack to staticfile. MindSphere requires you to have this file in your build. You will need to add this empty file directly under the build 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 React:

    "buildlin": "react-scripts build && touch build/Staticfile && cf push"

    "buildwin": "react-scripts build && type nul > build/Staticfile && cf push"

Based on your OS/Sandbox Environment

In Linux based systems:

react-scripts build: Will build your code in a folder called dist

touch build/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:

react-scripts build: Will build your code in a folder called dist

type nul > build/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 React 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": "mindspherereact",
	"version": "0.1.0",
	"private": true,
	"dependencies": {
		"@testing-library/jest-dom": "^4.2.4",
		"@testing-library/react": "^9.5.0",
		"@testing-library/user-event": "^7.2.1",
		"react": "^16.13.1",
		"react-dom": "^16.13.1",
		"react-scripts": "3.4.1"
	},
	"scripts": {
		"start": "react-scripts start",
		"build": "react-scripts build",
		"buildlin": "react-scripts build && touch build/Staticfile && cf push",
		"buildwin": "react-scripts build && type nul > build/Staticfile && cf push", 
		"test": "react-scripts test",
		"eject": "react-scripts eject"
	},
	"eslintConfig": {
		"extends": "react-app"
	},
	"browserslist": {
		"production": [ ">0.2%", "not dead", "not op_mini all" ],
		"development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ]
	}
}

(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