topcoder-platform / micro-frontends-earn-app

1 stars 18 forks source link

micro-frontends-earn-app

Topcoder Earn App

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 approch, see this GitHub Issue for details.

Requirements

NPM Commands

Command Description
npm start Run server which serves production ready build from dist folder
npm run dev Run app in the development mode and dev config
npm run dev-https Run app in the development mode and dev config using HTTPS protocol
npm run prod Run app in the development mode and prod config
npm run build Build app for production and puts files to the dist folder, default to development mode and dev config
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

Local Deployment

Inside the project folder run:

Local Setup for adding a new MFE

  1. The setup is assuming you have setup the mfe-core and micro-frontends-nav-app. And this is also assuming your have a new MFE named another-app and your local url is http://localhost:8099/another-app/topcoder-micro-frontends-another-app.js

  2. You have launched existing micro-frontends-challenges-app and micro-frontends-gigs-app in your local envrionment.

  3. Modify the config/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',
  }
};
  1. In the src/containers/Menu/index.jsx, you can modify it to add your new another-app menu link, challenges-app and gigs-app menu links have already been setup as reference.

  2. In the set-public-path.js file, add the mapping to your another-app, challenges-app and gigs-app have already been setup as the reference.

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

  4. Edit your hosts file by mapping 127.0.0.1 local.topcoder-dev.com

  5. Now visit http://local.topcoder-dev.com:8080/earn/find/challenges to view the micro-frontends-challenges-app

Deployment to Production

Deploying to Heroku

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