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-spa
approach, see this GitHub Issue for details.
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 |
npm i
- install dependenciesnpm build
- build code to dist/
folderdist/
folder using any static server. For example, you may run a simple Express
server by running npm start
.Make sure you have Heroku CLI installed and you have a Heroku account. And then inside the project folder run the next commands:
git init
git add .
git commit -m 'initial commit'
heroku apps:create
- create Heroku appgit push heroku master
- push changes to Heroku and trigger deployinghttps://<APP-NAME>.herokuapp.com/topcoder-micro-frontends-teams.js
to load this micro-app.TaaS Admin App is done using Single SPA micro-frontend architecture https://single-spa.js.org/. So to start it, we would also have to run Frame App and Navbar App. Here I would show the steps to run locally everything we need.
First of all, to authenticate locally we have to run a local authentication service.
taas-admin-app
.taas-admin-app/auth-local
run npm start
.Some config files are using domain local.topcoder-dev.com
. You can change it to localhost
in all the configs of each repo mentioned below. Or on your local machine, update file /etc/hosts
add the line 127.0.0.1 local.topcoder-dev.com
. This file has another path on Windows.
Run Frame App:
git clone https://github.com/topcoder-platform/mfe-core.git
cd mfe-core
# inside folder "mfe-core" run:
nvm use # or make sure to use Node 10
npm i # to install dependencies
# set environment variables:
export APPMODE="development"
export APPENV="local-multi"
npm run local-server
# this would start frame server on http://localhost:3000
open one more terminal window in the same folder and run:
# set environment variables:
export APPMODE="development"
export APPENV="local-multi"
npm run local-client
# this host frame client code on http://localhost:8080
Run Navbar micro-app:
git clone https://github.com/topcoder-platform/mfe-header.git
cd mfe-header
Update in file mfe-header/config/dev.js
values for ACCOUNTS_APP_CONNECTOR
and AUTH
to http://localhost:5000
so Navbar app which handles authentication uses our local Authentication service.
# inside folder "mfe-header" run:
nvm use # or make sure to use Node 10
npm i # to install dependencies
npm run dev
# this host navbar app as http://localhost:3001/navbar/topcoder-mfe-header.js
Run TaaS Admin micro-app:
# inside folder "taas-admin-app" run:
nvm use # or make sure to use Node 10
npm i # to install dependencies
npm run dev
# this hosts TaaS Admin App as http://localhost:8502/taas-admin-app/topcoder-micro-frontends-taas-admin-app.js
Now we have to update the mfe-core
app to show our local version of TaaS Admin App, instead of remote one. Update file mfe-core/config/micro-frontends-config-local.json
:
// replace line
"@topcoder/micro-frontends-taas-admin-app": "https://platform.topcoder-dev.com/taas-admin-app/topcoder-micro-frontends-taas-admin-app.js",
// with line:
"@topcoder/micro-frontends-taas-admin-app": "http://localhost:8502/taas-admin-app/topcoder-micro-frontends-taas-admin-app.js",
Congratulations, you successfully run the project. If you had some issue, please, try to go through README of https://github.com/topcoder-platform/mfe-core and https://github.com/topcoder-platform/mfe-header.