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

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.