Topcoder Teams Micro-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 approach, see this GitHub Issue for details.

Requirements

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

Technology Stack

• 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.

Config

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.

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
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

Deployment to Production

• npm i - install dependencies
• npm build - build code to dist/ folder
• Now you can host dist/ folder using any static server. For example, you may run a simple Express server by running npm start.

Deploying to Heroku

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 init
  • git add .
  • git commit -m 'initial 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 like https://<APP-NAME>.herokuapp.com/topcoder-micro-frontends-teams.js to load this micro-app.

How to run Locally for Development

TaaS 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.

Local Authentication

First of all, to authenticate locally we have to run a local authentication service.

• Clone this repository into taas-app.
• Inside the folder taas-app/local/login-locally run npm run start.
• You would need npm 5+ for it. This would start a local sever on port 5000 which could be used for local Authentication.

Local Domain

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 Applications

1. 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

2. Run Navbar micro-app:

   git clone https://github.com/topcoder-platform/mfe-header.git
   cd mfe-header

   Update in file mfe-header/blob/dev/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

3. Run TaaS micro-app:

   # inside folder "taas-app" run:
   
   nvm use # or make sure to use Node 10
   npm i   # to install dependencies
   
   # set environment variables:
   
   export STRIPE_PUBLIC_KEY=""
   
   # get the below client id from Nylas app settings in Nylas account
   export NYLAS_CLIENT_ID=""
   
   npm run dev
   
   # this host TaaS App as http://localhost:8501/taas-app/topcoder-micro-frontends-teams.js

4. Now we have to update the mfe-core app to show our local version of TaaS App, instead of remote one. Update file mfe-core/config/micro-frontends-config-local.json:

   // replace line
   "@topcoder/micro-frontends-teams": "https://platform.topcoder-dev.com/taas-app/topcoder-micro-frontends-teams.js",
   
   // with line:
   "@topcoder/micro-frontends-teams": "http://localhost:8501/taas-app/topcoder-micro-frontends-teams.js",

• Now open in the browser http://localhost:8080/taas/myteams.
• If you are not logged-in yet, you should be redirected to the login page.
• If you cannot see the application and redirect doesn't happen, make sure that file "http://local.topcoder-dev.com:8501/taas-app/topcoder-micro-frontends-teams.js" is loaded successfully in the Network tab.

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.