Baseline for the Navbar

Author: urwithat

.eslintrc

@@ -0,0 +1,4 @@
+{
+  "extends": ["react-important-stuff", "plugin:prettier/recommended"],
+  "parser": "babel-eslint"
+}

.gitignore

@@ -0,0 +1,104 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

.prettierignore

@@ -0,0 +1,9 @@
+.gitignore
+.prettierignore
+yarn.lock
+yarn-error.log
+package-lock.json
+dist
+*.svg
+.DS_Store
+coverage

README.md

@@ -1 +1,57 @@
-# micro-frontends-navbar-app
+# Topcoder Navbar Microapp
+
+This is a [single-spa](https://single-spa.js.org/) microapp which shows the main top bar for Topcoder websites and handles user authorization.
+
+> 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` approch, see this [GitHub Issue](https://github.com/single-spa/single-spa/issues/640) for details.
+
+## Requirements
+
+- node - v10.22.1
+- npm - v6.14.6
+
+## Config
+
+There are 2 config file for production and development environment in the `config` folder.
+Set environment variable `NODE_ENV=development` to use development config, or `NODE_ENV=production` to use production config.
+
+## 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                                |
+
+## Local Deployment
+
+Inside the project folder run:
+
+- `npm i` - install dependencies
+- `npm run dev` - run app in development mode
+- As this app can be loaded only inside a frame single-spa, you have to run a `micro-frontends-frame` frame app and configure it to use the URL `http://localhost:8080/topcoder-micro-frontends-navbar-app.js`.
+
+## 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 [Heroky 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 inited yet, create a repo and commit all the files:
+  - `git init`
+  - `git add .`
+  - `git commit -m'inital 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-navbar-app.js` to load this microapp.
+- NOTE: Authorization would not work because only predefined list of domain allowed by `accounts-app`.

babel.config.json

@@ -0,0 +1,24 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "useESModules": true,
+        "regenerator": false
+      }
+    ]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "targets": "current node"
+          }
+        ]
+      ]
+    }
+  }
+}

config/development.js

@@ -0,0 +1,10 @@
+module.exports = {
+  URL: {
+    ACCOUNTS_APP_CONNECTOR: "https://accounts.topcoder-dev.com/connector.html",
+    AUTH: "https://accounts.topcoder-dev.com",
+  },
+  API: {
+    V3: "https://api.topcoder-dev.com/v3",
+  },
+  REAUTH_TIME: 55,
+};

config/index.js

@@ -0,0 +1,12 @@
+/* global process */
+
+module.exports = (() => {
+  const env = process.env.NODE_ENV || "development";
+
+  // for security reason don't let to require any arbitrary file defined in process.env
+  if (["production", "development"].indexOf(env) < 0) {
+    return require("./development");
+  }
+
+  return require("./" + env);
+})();

config/production.js

@@ -0,0 +1,10 @@
+module.exports = {
+  URL: {
+    ACCOUNTS_APP_CONNECTOR: "https://accounts.topcoder.com/connector.html",
+    AUTH: "https://accounts.topcoder.com",
+  },
+  API: {
+    V3: "https://api.topcoder.com/v3",
+  },
+  REAUTH_TIME: 55,
+};

jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  rootDir: "src",
+  transform: {
+    "^.+\\.(j|t)sx?$": "babel-jest",
+  },
+  transformIgnorePatterns: ["node_modules/?!(tc-accounts)"],
+  moduleNameMapper: {
+    "\\.css$": "identity-obj-proxy",
+    "\\.svg$": "<rootDir>/__mocks__/fileMock.js",
+  },
+  setupFilesAfterEnv: [
+    "../node_modules/@testing-library/jest-dom/dist/index.js",
+  ],
+};