This is a single-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 frame single-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 the
single-spaapproach, see this GitHub Issue for details.
- node - v10.22.1
- npm - v6.14.6
- React 16.12
- Router via Reach Router
- CSS Modules with SCSS via babel-plugin-react-css-modules
- React Inline SVG
- We use Redux Store for storing page data if we need to edit it. Otherwise we can use local state.
- react-redux-toastr for success/error popups in the bottom left corner.
For available variables config which depend on the running environment (APPENV=dev or APPENV=prod), please refer to config/dev.js and config/prod.js.
For application constants which don't depend on the running environment use src/constants/index.js.
| Command | Description |
|---|---|
npm start |
Run server which serves production ready build from dist folder |
npm run dev |
Run app in the development mode |
npm run dev-https |
Run app in the development mode using HTTPS protocol |
npm run build |
Build app for production and puts files to the dist folder |
npm run analyze |
Analyze dependencies sizes and opens report in the browser |
npm run lint |
Check code for lint errors |
npm run format |
Format code using prettier |
npm run test |
Run unit tests |
npm run watch-tests |
Watch for file changes and run unit tests on changes |
npm run coverage |
Generate test code coverage report |
Inside the project folder run:
npm i- install dependenciesnpm run dev- run app in development mode- As this app can be loaded only inside a frame single-spa, you have to run a
micro-frontends-frameframe app and configure it to use the URLhttp://localhost:8501/topcoder-micro-frontends-teams.js.
npm i- install dependenciesnpm build- build code todist/folder- Now you can host
dist/folder using any static server. For example, you may run a simpleExpressserver by runningnpm start.
Make sure you have Heroku CLI installed and you have a Heroku account. And then inside the project folder run the next commands:
- If there is not Git repository initiated yet, create a repo and commit all the files:
git initgit add .git commit -m 'initial commit'
heroku apps:create- create Heroku appgit push heroku master- push changes to Heroku and trigger deploying- Now you have to configure frame app to use the URL provided by Heroku like
https://<APP-NAME>.herokuapp.com/topcoder-micro-frontends-teams.jsto load this micro-app.
Please check verification-guide.md