Baseline for the React App

Author: urwithat

.eslintrc

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

.prettierignore

@@ -0,0 +1,7 @@
+.gitignore
+.prettierignore
+yarn.lock
+yarn-error.log
+package-lock.json
+dist
+coverage

README.md

@@ -1 +1,51 @@
-# micro-app-react
+# Topcoder React Microapp Example
+
+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` approch, see this [GitHub Issue](https://github.com/single-spa/single-spa/issues/640) for details.
+
+## Requirements
+
+- Node.js 8+
+- Npm 6+
+
+## 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 `root-config` frame app and configure it to use the URL `http://localhost:8500/topcoder-micro-frontends-react-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-react-app.js` to load this microapp.

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"
+          }
+        ]
+      ]
+    }
+  }
+}

jest.config.js

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