Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

feat: basic code with Work Periods #2

Merged
merged 1 commit into from
May 30, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
src/decls
4 changes: 4 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"extends": ["react-important-stuff", "plugin:prettier/recommended"],
"parser": "babel-eslint"
}
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -102,3 +102,6 @@ dist

# TernJS port file
.tern-port

# macOS cache files
.DS_Store
1 change: 1 addition & 0 deletions .nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
10.22.1
7 changes: 7 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.gitignore
.prettierignore
yarn.lock
yarn-error.log
package-lock.json
dist
coverage
3 changes: 3 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"singleQuote": false
}
160 changes: 158 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,158 @@
# taas-admin-app
taas-admin-app for managing taas administrative activities
# Topcoder TaaS Admin Micro-app

This is a [single-spa](https://single-spa.js.org/) 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](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.

## Requirements

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

## Technology Stack

- React 16.12
- Router via [Reach Router](https://reach.tech/router/)
- CSS Modules with SCSS
- [React Inline SVG](https://github.com/airbnb/babel-plugin-inline-react-svg)
- We use **Redux Store** for storing page data if we need to edit it. Otherwise we can use local state.
- [react-redux-toastr](https://www.npmjs.com/package/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/development.js` and `config/production.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](https://devcenter.heroku.com/articles/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-admin-app`.
- Inside the folder `taas-admin-app/local/auth-local` run `npm 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:

```sh
git clone https://github.com/topcoder-platform/micro-frontends-frame.git
cd micro-frontends-frame
# inside folder "micro-frontends-frame" 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:

```sh
# 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:

```sh
git clone https://github.com/topcoder-platform/micro-frontends-navbar-app.git
cd micro-frontends-navbar-app
```

Update in file `micro-frontends-navbar-app/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.

```sh
# inside folder "micro-frontends-navbar-app" 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-micro-frontends-navbar-app.js
```

3. Run **TaaS** micro-app:

```sh
# inside folder "taas-app" run:

nvm use # or make sure to use Node 10
npm i # to install dependencies

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 `micro-frontends-frame` app to show our local version of TaaS App, instead of remote one. Update file `micro-frontends-frame/config/micro-frontends-config-local.json`:

```js
// 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/micro-frontends-frame and https://github.com/topcoder-platform/micro-frontends-navbar-app.
11 changes: 11 additions & 0 deletions auth-local/README
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
1. Run any static files server inside this directory, for example:
- `npx http-server . -p 5000`
- `php -S localhost:5000`
2. Run your application on http://localhost:3000.
3. Now you can open http://localhost:5000 in browser and click login (wait it a little bit, it may take time to redirect you). After you login, you should be redirected back to http://localhost:3000

PS. You may also download latest version of `setupAuth0WithRedirect.js` file from here - https://github.com/topcoder-platform/tc-auth-lib/blob/dev/web-assets/js/setupAuth0WithRedirect.js




18 changes: 18 additions & 0 deletions auth-local/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>

<head>
<title>Auth0</title>
<meta charset="utf-8" />
<script language="javascript" type="text/javascript" src="./setupAuth0WithRedirect.js"></script>
</head>

<body>
Loaded...redirecting to auth0.(see browser console log)
<script>
window.onload = authSetup;
</script>
<a href="?retUrl=http://localhost:3000" >Login</a>
</body>

</html>
11 changes: 11 additions & 0 deletions auth-local/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"name": "login-locally",
"version": "1.0.0",
"description": "Run any static files server inside this directory.",
"scripts": {
"start": "npx http-server . -p 5000"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Loading