You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -4,7 +4,39 @@ This is a [single-spa](https://single-spa.js.org/) React microapp that runs with
4
4
5
5
> **NOTE:** This application has 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` approch, see this [GitHub Issue](https://github.com/single-spa/single-spa/issues/640) for details.
6
6
7
-
>**NOTE:** To successfully run this application, you must also run the two following apps: `mfe-core` & `mfe-header`. Please see their corresponding README's for instructions on running each app.
7
+
>**NOTE:** To successfully run this application, you must also run the two following apps: `mfe-core` & `mfe-header`. Please see their corresponding README's for instructions on running each app.
8
+
9
+
## Content
10
+
11
+
Following are the list of sections in this document,
-[Deployment to production](#deployment-to-production)
29
+
-[Linting](#linting)
30
+
-[Rules](#rules)
31
+
-[Command line](#command-line)
32
+
-[View all lint errors](#view-all-lint-errors)
33
+
-[VS code](#vs-code)
34
+
-[Format on save](#format-on-save)
35
+
-[TSLint Plugin](#tslint-plugin)
36
+
-[Styling](#styling)
37
+
-[How to use icons](#icons)
38
+
-[Heroicons](#heroicons)
39
+
-[Custom SVGs](#custom-svgs)
8
40
9
41
## Local Environment Setup
10
42
@@ -20,11 +52,11 @@ Once nvm is installed, run:
20
52
$ nvm install <insert node version>
21
53
```
22
54
23
-
>**NOTE:** the node version required at the time of this writing is `10.22.1`
24
-
25
55
At the root of the project directory you'll notice a file called `.nvmrc` which specifies the node version used by the project. The command `nvm use` will use the version specified in the file if no version is supplied on the command line.
26
56
See [the nvm Github README](https://github.com/nvm-sh/nvm/blob/master/README.md#nvmrc) for more information on setting this up.
27
57
58
+
>**NOTE:** The minimum node version required is `10.22.1` and the current node version mentioned in the `.nvmrc` is `16.15.0`
59
+
28
60
You can verify the versions of `nvm`, `node`, and `npm` using the commands below.
29
61
| Command | Supported Version |
30
62
| ----------------- | -------- |
@@ -44,6 +76,86 @@ The MFE can run in a non-ssl environment, but auth0 will complain and throw erro
44
76
```
45
77
$ npm i -g local-ssl-proxy
46
78
```
79
+
### Set up mfe-core
80
+
81
+
You can find the mfe-core github repository [here](https://github.com/topcoder-platform/mfe-core). The MFE Core renders the landing page and the top navigation. Each app then runs within that core frame.
82
+
83
+
The Frame project consists of an API that manages environment configuration and a client that renders the index.html page. Both are required.
84
+
85
+
#### macOS
86
+
87
+
1. Run the Frame API
88
+
89
+
`npm run start-server`
90
+
91
+
2. Run the Frame Client
92
+
93
+
`npm run start-client`
94
+
95
+
#### Windows
96
+
97
+
1. Run the Frame API
98
+
99
+
```bashscript
100
+
export APPMODE="development"
101
+
export APPENV="local-multi"
102
+
nvm use
103
+
npm i
104
+
npm run local-server
105
+
```
106
+
107
+
2. Run the Frame Client
108
+
109
+
```bashscript
110
+
export APPMODE="development"
111
+
export APPENV="local-multi"
112
+
nvm use
113
+
npm run local-client
114
+
```
115
+
116
+
### Set up mfe-header
117
+
118
+
You can find the mfe-header github repository [here](https://github.com/topcoder-platform/mfe-header).
119
+
120
+
#### macOS
121
+
122
+
1. Run the Navbar app
123
+
124
+
`npm run start-local`
125
+
126
+
The site should now be available at [http://local.topcoder-dev.com:8080/](http://local.topcoder-dev.com:8080/)
127
+
128
+
2. Run the SSL Proxy to port 8080
129
+
130
+
`npm run start-local-proxy`
131
+
132
+
The site should now be available at [https://local.topcoder-dev.com/](https://local.topcoder-dev.com/)
133
+
134
+
#### Windows
135
+
136
+
1. Render the Navbar app
137
+
138
+
```bashscript
139
+
export APPMODE="development"
140
+
export APPENV="local"
141
+
nvm use
142
+
npm i
143
+
npm run dev
144
+
```
145
+
146
+
The site should now be available at [http://local.topcoder-dev.com:8080](http://local.topcoder-dev.com:8080).
The site should now be available at [https://local.topcoder-dev.com](https://local.topcoder-dev.com).
156
+
157
+
***NOTE:*** you may have to run the local-ssl-proxy line w/elevated permissions (i.e. sudo) in order to listen to the SSL port (i.e. 443)
158
+
47
159
48
160
### Terminal Configuration
49
161
@@ -57,41 +169,27 @@ When developing one of the micro front-end applications you will therefore have
57
169
-`local-ssl-proxy` server
58
170
- the MFE app you're developing
59
171
60
-
Given this complexity, it is recommended that you use a tool like [iTerm2](https://iterm2.com) (on Mac) or an equivalent terminal shell on Windows to make terminal management simpler. iTerm2 allows you to setup a pre-defined window layout of terminal sessions, including the directory in which the session starts. This setup, along with simple shell scripts in each project that configure and start the environment, will allow you to get your development environment up and running quickly and easily.
172
+
Given this complexity, it is recommended that you use a tool like [iTerm2](https://iterm2.com) (on Mac) or an equivalent terminal shell on Windows to make terminal management simpler. iTerm2 allows you to set up a pre-defined window layout of terminal sessions, including the directory in which the session starts. This setup, along with simple shell scripts in each project that configure and start the environment, will allow you to get your development environment up and running quickly and easily.
61
173
62
174
## Git
175
+
63
176
### Branching
64
177
When working on Jira tickets, we link associated Git PRs and branches to the tickets. Use the following naming convention for branches:
65
178
66
179
`[TICKET #]_short-description`
67
180
68
181
e.g.: `PROD-1516_work-issue`
69
182
183
+
#### Branching strategy
184
+
TBD
185
+
70
186
### Commits
71
187
We use [Smart Commits](https://bigbrassband.com/git-integration-for-jira/documentation/smart-commits.html#bbb-nav-basic-examples) to link comments and time tracking to tickets. You would enter the following as your commit message:
|`npm start`| Run server which serves production ready build from `dist` folder |
82
-
|`npm start-local`| Run app locally in the `development` mode and `dev` config (calls on `npm run dev`) |
83
-
|`npm run dev`| Run app in the `development` mode and `dev` config |
84
-
|`npm run dev-https`| Run app in the `development` mode and `dev` config using HTTPS protocol |
85
-
|`npm run prod`| Run app in the `development` mode and `prod` config |
86
-
|`npm run build`| Build app for production and puts files to the `dist` folder, default to `development` mode and `dev` config |
87
-
|`npm run analyze`| Analyze dependencies sizes and opens report in the browser |
88
-
|`npm run lint`| Check code for lint errors |
89
-
|`npm run format`| Format code using prettier |
90
-
|`npm run test`| Run unit tests |
91
-
|`npm run watch-tests`| Watch for file changes and run unit tests on changes |
92
-
|`npm run coverage`| Generate test code coverage report |
93
-
|`npm run mock-api`| Start the mock api which mocks Recruit api |
94
-
95
193
## Local Deployment
96
194
97
195
To run the app locally, run the following command from the project root `./mfe-customer-work`:
@@ -116,41 +214,23 @@ The Self-Service app should now be available at https://local.topcoder-dev.com/s
116
214
-`npm build` - build code to `dist/` folder
117
215
- Now you can host `dist/` folder using any static server. For example, you may run a simple `Express` server by running `npm start`.
118
216
119
-
### Deploying to Heroku
120
-
121
-
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:
122
-
123
-
- If there is not Git repository inited yet, create a repo and commit all the files:
124
-
125
-
-`git init`
126
-
-`git add .`
127
-
-`git commit -m'inital commit'`
128
-
129
-
-`heroku apps:create` - create Heroku app
130
-
131
-
-`git push heroku master` - push changes to Heroku and trigger deploying
132
-
133
-
- Now you have to configure frame app to use the URL provided by Heroku like `https://<APP-NAME>.herokuapp.com/gigs-app/topcoder-mfe-customer-work.js` to load this microapp.
134
-
135
-
### Aggregator API
136
-
137
-
Please refer to [Swagger Doc](./src/api/docs/swagger.yaml) for Aggregator API endpoints
138
-
139
-
#### Aggregator API Configuration
140
-
141
-
In the `mfe-customer-work` root directory create `.env` file with the next environment variables.
142
-
143
-
```bash
144
-
# Auth0 config
145
-
AUTH_SECRET=
146
-
AUTH0_URL=
147
-
AUTH0_AUDIENCE=
148
-
AUTH0_CLIENT_ID=
149
-
AUTH0_CLIENT_SECRET=
150
-
VALID_ISSUERS=
151
-
```
217
+
## NPM Commands
152
218
153
-
Once the self service app is started, the aggregator api will work as well
|`npm start`| Run server which serves production ready build from `dist` folder |
222
+
|`npm start-local`| Run app locally in the `development` mode and `dev` config (calls on `npm run dev`) |
223
+
|`npm run dev`| Run app in the `development` mode and `dev` config |
224
+
|`npm run dev-https`| Run app in the `development` mode and `dev` config using HTTPS protocol |
225
+
|`npm run prod`| Run app in the `development` mode and `prod` config |
226
+
|`npm run build`| Build app for production and puts files to the `dist` folder, default to `development` mode and `dev` config |
227
+
|`npm run analyze`| Analyze dependencies sizes and opens report in the browser |
228
+
|`npm run lint`| Check code for lint errors |
229
+
|`npm run format`| Format code using prettier |
230
+
|`npm run test`| Run unit tests |
231
+
|`npm run watch-tests`| Watch for file changes and run unit tests on changes |
232
+
|`npm run coverage`| Generate test code coverage report |
233
+
|`npm run mock-api`| Start the mock api which mocks Recruit api |
154
234
155
235
## Linting
156
236
@@ -212,6 +292,10 @@ Created by Microsoft, this plugin will allow you to see lint errors in the Probl
212
292
213
293
**WARNING:** Other lint plugins can interfere with TSLint, so it is recommended that you uninstall/disable all other lint plugins (e.g. ESLint, Prettier, etc).
214
294
295
+
## Migration
296
+
297
+
The self service project is currently migrated from javascript to typescript. That's why in the root of the repository there are two source folders(`src` and `src-ts`). During the build process all the typescript is transpiled to javascript and entire apps is converted to single javascript file by `single-spa`.
298
+
215
299
## Styling
216
300
217
301
We use [Sass](https://sass-lang.com/) for styling, which is a preprocessor scripting language that compiles to CSS and allows for the use of variables, nested rules, mixins, functions, etc.
0 commit comments