Skip to content

Commit c22708e

Browse files
youtionyoution
committed
init
0 parents  commit c22708e

40 files changed

+18878
-0
lines changed

‎.circleci/config.yml

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
version: 2
2+
defaults: &defaults
3+
docker:
4+
- image: circleci/python:2.7-stretch-browsers
5+
install_dependency: &install_dependency
6+
name: Installation of build and deployment dependencies.
7+
command: |
8+
sudo apt install jq
9+
sudo pip install awscli --upgrade
10+
sudo pip install docker-compose
11+
install_deploysuite: &install_deploysuite
12+
name: Installation of install_deploysuite.
13+
command: |
14+
git clone --branch v1.4.2 https://github.com/topcoder-platform/tc-deploy-scripts ../buildscript
15+
cp ./../buildscript/master_deploy.sh .
16+
cp ./../buildscript/buildenv.sh .
17+
cp ./../buildscript/awsconfiguration.sh .
18+
restore_cache_settings_for_build: &restore_cache_settings_for_build
19+
key: docker-node-modules-{{ checksum "package-lock.json" }}
20+
21+
save_cache_settings: &save_cache_settings
22+
key: docker-node-modules-{{ checksum "package-lock.json" }}
23+
paths:
24+
- node_modules
25+
26+
builddeploy_steps: &builddeploy_steps
27+
- checkout
28+
- setup_remote_docker
29+
- run: *install_dependency
30+
- run: *install_deploysuite
31+
#- restore_cache: *restore_cache_settings_for_build
32+
- run:
33+
command: |
34+
./awsconfiguration.sh $DEPLOY_ENV
35+
source awsenvconf
36+
./buildenv.sh -e $DEPLOY_ENV -b ${LOGICAL_ENV}-${APPNAME}-buildvar
37+
- run:
38+
name: Running build-var.
39+
command: |
40+
source buildenvvar
41+
./build.sh ${APPNAME}
42+
#- save_cache: *save_cache_settings
43+
- deploy:
44+
name: Running MasterScript.
45+
command: |
46+
./awsconfiguration.sh $DEPLOY_ENV
47+
source awsenvconf
48+
./buildenv.sh -e $DEPLOY_ENV -b ${LOGICAL_ENV}-${APPNAME}-deployvar
49+
source buildenvvar
50+
./master_deploy.sh -d ECS -e $DEPLOY_ENV -t latest -s ${LOGICAL_ENV}-global-appvar,${LOGICAL_ENV}-${APPNAME}-appvar -i ${APPNAME}
51+
52+
jobs:
53+
# Build & Deploy against development backend
54+
"build-dev":
55+
<<: *defaults
56+
environment:
57+
DEPLOY_ENV: "DEV"
58+
LOGICAL_ENV: "dev"
59+
APPNAME: "micro-frontends-taas-admin-app"
60+
steps: *builddeploy_steps
61+
62+
"build-prod":
63+
<<: *defaults
64+
environment:
65+
DEPLOY_ENV: "PROD"
66+
LOGICAL_ENV: "prod"
67+
APPNAME: "micro-frontends-taas-admin-app"
68+
steps: *builddeploy_steps
69+
70+
workflows:
71+
version: 2
72+
build:
73+
jobs:
74+
# Development builds are executed on "develop" branch only.
75+
- "build-dev":
76+
context: org-global
77+
filters:
78+
branches:
79+
only:
80+
- dev
81+
82+
# Production builds are exectuted only on tagged commits to the
83+
# master branch.
84+
- "build-prod":
85+
context: org-global
86+
filters:
87+
branches:
88+
only: master

‎.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
src/decls

‎.eslintrc

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"extends": [
3+
"eslint:recommended",
4+
"plugin:react/recommended",
5+
"react-important-stuff",
6+
"plugin:prettier/recommended"
7+
],
8+
"parser": "babel-eslint",
9+
"rules": {
10+
"no-unused-vars": "warn"
11+
}
12+
}

‎.gitignore

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
9+
# Diagnostic reports (https://nodejs.org/api/report.html)
10+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11+
12+
# Runtime data
13+
pids
14+
*.pid
15+
*.seed
16+
*.pid.lock
17+
18+
# Directory for instrumented libs generated by jscoverage/JSCover
19+
lib-cov
20+
21+
# Coverage directory used by tools like istanbul
22+
coverage
23+
*.lcov
24+
25+
# nyc test coverage
26+
.nyc_output
27+
28+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29+
.grunt
30+
31+
# Bower dependency directory (https://bower.io/)
32+
bower_components
33+
34+
# node-waf configuration
35+
.lock-wscript
36+
37+
# Compiled binary addons (https://nodejs.org/api/addons.html)
38+
build/Release
39+
40+
# Dependency directories
41+
node_modules/
42+
jspm_packages/
43+
44+
# TypeScript v1 declaration files
45+
typings/
46+
47+
# TypeScript cache
48+
*.tsbuildinfo
49+
50+
# Optional npm cache directory
51+
.npm
52+
53+
# Optional eslint cache
54+
.eslintcache
55+
56+
# Microbundle cache
57+
.rpt2_cache/
58+
.rts2_cache_cjs/
59+
.rts2_cache_es/
60+
.rts2_cache_umd/
61+
62+
# Optional REPL history
63+
.node_repl_history
64+
65+
# Output of 'npm pack'
66+
*.tgz
67+
68+
# Yarn Integrity file
69+
.yarn-integrity
70+
71+
# dotenv environment variables file
72+
.env
73+
.env.test
74+
75+
# parcel-bundler cache (https://parceljs.org/)
76+
.cache
77+
78+
# Next.js build output
79+
.next
80+
81+
# Nuxt.js build / generate output
82+
.nuxt
83+
dist
84+
85+
# Gatsby files
86+
.cache/
87+
# Comment in the public line in if your project uses Gatsby and *not* Next.js
88+
# https://nextjs.org/blog/next-9-1#public-directory-support
89+
# public
90+
91+
# vuepress build output
92+
.vuepress/dist
93+
94+
# Serverless directories
95+
.serverless/
96+
97+
# FuseBox cache
98+
.fusebox/
99+
100+
# DynamoDB Local files
101+
.dynamodb/
102+
103+
# TernJS port file
104+
.tern-port
105+
106+
# macOS cache files
107+
.DS_Store

‎.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
10.22.1

‎.prettierignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.gitignore
2+
.prettierignore
3+
yarn.lock
4+
yarn-error.log
5+
package-lock.json
6+
dist
7+
coverage

‎.prettierrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"singleQuote": false
3+
}

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 Topcoder Platform
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
# Topcoder Forums Micro-app
2+
3+
This is a [single-spa](https://single-spa.js.org/) example React microapp.
4+
5+
> 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](https://single-spa.js.org/) 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](https://github.com/single-spa/single-spa/issues/640) for details.
6+
7+
## Requirements
8+
9+
- node - v10.22.1
10+
- npm - v6.14.6
11+
12+
## Technology Stack
13+
14+
- React 16.12
15+
- Router via [Reach Router](https://reach.tech/router/)
16+
- CSS Modules with SCSS
17+
- [React Inline SVG](https://github.com/airbnb/babel-plugin-inline-react-svg)
18+
- We use **Redux Store** for storing page data if we need to edit it. Otherwise we can use local state.
19+
- [react-redux-toastr](https://www.npmjs.com/package/react-redux-toastr) for success/error popups in the bottom left corner.
20+
21+
## Config
22+
23+
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`.
24+
25+
For application constants which don't depend on the running environment use `src/constants/index.js`.
26+
27+
## NPM Commands
28+
29+
| Command | Description |
30+
| --------------------- | ----------------------------------------------------------------- |
31+
| `npm start` | Run server which serves production ready build from `dist` folder |
32+
| `npm run dev` | Run app in the development mode |
33+
| `npm run dev-https` | Run app in the development mode using HTTPS protocol |
34+
| `npm run build` | Build app for production and puts files to the `dist` folder |
35+
| `npm run analyze` | Analyze dependencies sizes and opens report in the browser |
36+
| `npm run lint` | Check code for lint errors |
37+
| `npm run format` | Format code using prettier |
38+
| `npm run test` | Run unit tests |
39+
| `npm run watch-tests` | Watch for file changes and run unit tests on changes |
40+
| `npm run coverage` | Generate test code coverage report |
41+
42+
## Deployment to Production
43+
44+
- `npm i` - install dependencies
45+
- `npm build` - build code to `dist/` folder
46+
- Now you can host `dist/` folder using any static server. For example, you may run a simple `Express` server by running `npm start`.
47+
48+
### Deploying to Heroku
49+
50+
Make sure you have [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli) installed and you have a Heroku account. And then inside the project folder run the next commands:
51+
52+
- If there is not Git repository initiated yet, create a repo and commit all the files:
53+
- `git init`
54+
- `git add .`
55+
- `git commit -m 'initial commit'`
56+
- `heroku apps:create` - create Heroku app
57+
- `git push heroku master` - push changes to Heroku and trigger deploying
58+
- 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.
59+
60+
## How to run Locally for Development
61+
62+
Forums 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.
63+
64+
### Local Domain
65+
66+
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.
67+
68+
### Run Applications
69+
70+
1. Run **Frame** App:
71+
72+
```sh
73+
git clone https://github.com/topcoder-platform/micro-frontends-frame.git
74+
cd micro-frontends-frame
75+
# inside folder "micro-frontends-frame" run:
76+
77+
nvm use # or make sure to use Node 10
78+
npm i # to install dependencies
79+
80+
# set environment variables:
81+
82+
export APPMODE="development"
83+
export APPENV="local-multi"
84+
85+
npm run local-server
86+
87+
# this would start frame server on http://localhost:3000
88+
```
89+
90+
open one more terminal window in the same folder and run:
91+
92+
```sh
93+
# set environment variables:
94+
95+
export APPMODE="development"
96+
export APPENV="local-multi"
97+
98+
npm run local-client
99+
100+
# this host frame client code on http://localhost:8080
101+
```
102+
103+
2. Run **Navbar** micro-app:
104+
105+
```sh
106+
git clone https://github.com/topcoder-platform/micro-frontends-navbar-app.git
107+
cd micro-frontends-navbar-app
108+
```
109+
110+
Update in file `micro-frontends-navbar-app/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.
111+
112+
```sh
113+
# inside folder "micro-frontends-navbar-app" run:
114+
115+
nvm use # or make sure to use Node 10
116+
npm i # to install dependencies
117+
118+
npm run dev
119+
120+
# this host navbar app as http://localhost:3001/navbar/topcoder-micro-frontends-navbar-app.js
121+
```
122+
123+
3. Run **Forums** micro-app:
124+
125+
```sh
126+
# inside folder "forums-app" run:
127+
128+
nvm use # or make sure to use Node 10
129+
npm i # to install dependencies
130+
131+
npm run dev
132+
133+
# this hosts Forums App as http://localhost:8602/forums-app/topcoder-micro-frontends-forums-app.js
134+
```
135+
136+
4. Now we have to update the `micro-frontends-frame` app to show our local version of Forums App, instead of remote one. Update file `micro-frontends-frame/config/micro-frontends-config-local.json`:
137+
138+
```js
139+
// replace line
140+
"@topcoder/micro-frontends-forums-app": "https://platform.topcoder-dev.com/forums-app/topcoder-micro-frontends-forums-app.js",
141+
142+
// with line:
143+
"@topcoder/micro-frontends-forums-app": "http://localhost:8602/forums-app/topcoder-micro-frontends-forums-app.js",
144+
```
145+
146+
- Now open in the browser http://localhost:8080/forums.
147+
- If you are not logged-in yet, you should be redirected to the login page.
148+
- If you cannot see the application and redirect doesn't happen, make sure that file "http://local.topcoder-dev.com:8602/forums-app/topcoder-micro-frontends--app.js" is loaded successfully in the Network tab.
149+
150+
Congratulations, you successfully run the project. If you had some issue, please, try to go through README of https://github.com/topcoder-platform/micro-frontends-frame and https://github.com/topcoder-platform/micro-frontends-navbar-app.

0 commit comments

Comments
 (0)