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:

• nvm use 10.22.1; - to use npm version: 10.22.1
• npm i - install dependencies
• npm run dev - run app indevelopment mode anddev config, currently it is using the config fromdefault.js
• As this app can be loaded only inside a frame single-spa, you have to run amfe-core frame app and configure it to use the URLhttp://localhost:8008/earn-app/topcoder-micro-frontends-earn-app.js.

1. The setup is assuming you have setup themfe-core andmicro-frontends-nav-app. And this is also assuming your have a new MFE namedanother-app and your local url ishttp://localhost:8099/another-app/topcoder-micro-frontends-another-app.js

2. You have launched existingmicro-frontends-challenges-app andmicro-frontends-gigs-app in your local envrionment.

3. Modify theconfig/dev.js by incorporating the module mapping, so it might be look like this if you setup all them in local environment:

module.exports = {  MFE_CONFIG: {    '@topcoder/micro-frontends-another-app': 'http://localhost:8099/another-app/topcoder-micro-frontends-another-app.js',    '@topcoder/micro-frontends-challenges-app': 'http://localhost:8009/challenges-app/topcoder-micro-frontends-challenges-app.js',    '@topcoder/micro-frontends-gigs-app': 'http://localhost:8010/gigs-app/topcoder-micro-frontends-gigs-app.js',  }};

4. In thesrc/containers/Menu/index.jsx, you can modify it to add your newanother-app menu link, challenges-app and gigs-app menu links have already been setup as reference.

5. In theset-public-path.js file, add the mapping to youranother-app, challenges-app and gigs-app have already been setup as the reference.

6. In thesrc/App.jsx file, add the application mount point inside the<Router> component, challenges-app and gigs-app have already been setup as the reference

7. Edit yourhosts file by mapping127.0.0.1 local.topcoder-dev.com

8. Now visithttp://local.topcoder-dev.com:8080/earn/find/challenges to view themicro-frontends-challenges-app

• npm i - install dependencies
• APPMODE=production APPENV=prod npm run 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.