Repository files navigation

This is asingle-spa example React microapp.

NOTE. This application have been configured to be run as child app of a single-spa application. So while this app can be deployed and run independently, we would need some framesingle-spa which would load it. While technically we can achieve running this app as standalone app it's strongly not recommended by the author of thesingle-spa approch, see thisGitHub Issue for details.

• node - v10.22.1
• npm - v6.14.6

Inside the project folder run:

• export APPMODE="development"; export APPENV="local"; - to load APPMODE & APPENV
• nvm use 10.22.1; - to use npm version: 10.22.1
• npm i - install dependencies
• npm run dev - run app in development mode
• As this app can be loaded only inside a frame single-spa, you have to run amicro-frontends-frame frame app and configure it to use the URLhttp://localhost:8008/topcoder-micro-frontends-earn-app.js.

• npm i - install dependencies
• npm build - build code todist/ folder
• Now you can hostdist/ folder using any static server. For example, you may run a simpleExpress server by runningnpm start.

Make sure you haveHeroky CLI installed and you have a Heroku account. And then inside the project folder run the next commands:

• If there is not Git repository inited yet, create a repo and commit all the files:

  • git init
  • git add .
  • git commit -m'inital commit'

• heroku apps:create - create Heroku app

• git push heroku master - push changes to Heroku and trigger deploying

• Now you have to configure frame app to use the URL provided by Heroku likehttps://<APP-NAME>.herokuapp.com/earn-app/topcoder-micro-frontends-earn-app.js to load this microapp.