Merge pull request #1 from topcoder-platform/earn-restructure

Earn restructure Dev Deployment

Author: LieutenantRoger

.circleci/config.yml

@@ -29,8 +29,16 @@ builddeploy_steps: &builddeploy_steps
   - run: *install_dependency
   - run: *install_deploysuite
   - restore_cache: *restore_cache_settings_for_build
-  - run: ./build.sh ${APPNAME}
-  - save_cache: *save_cache_settings
+  - run:
+      command: |
+        ./awsconfiguration.sh $DEPLOY_ENV
+        source awsenvconf
+        ./buildenv.sh -e $DEPLOY_ENV -b ${LOGICAL_ENV}-${APPNAME}-buildvar
+  - run:
+      command: |
+        source buildenvvar
+        ./build.sh ${APPNAME}
+  #- save_cache: *save_cache_settings
   - deploy:
       name: Running MasterScript.
       command: |

.eslintrc

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

.gitattributes

@@ -0,0 +1,197 @@
+## GITATTRIBUTES FOR WEB PROJECTS
+#
+# These settings are for any web project.
+#
+# Details per file setting:
+#   text    These files should be normalized (i.e. convert CRLF to LF).
+#   binary  These files are binary and should be left untouched.
+#
+# Note that binary is a macro for -text -diff.
+######################################################################
+
+*.css merge=ours
+*.css.map merge=ours
+
+## AUTO-DETECT
+##   Handle line endings automatically for files detected as
+##   text and leave all files detected as binary untouched.
+##   This will handle all files NOT defined below.
+* text=auto eol=lf
+
+## SOURCE CODE
+*.bat      text eol=crlf
+*.coffee   text eol=lf
+*.css      text eol=lf
+*.htm      text eol=lf
+*.html     text eol=lf
+*.inc      text
+*.ini      text
+*.js       text eol=lf
+*.json     text
+*.jsx      text
+*.less     text
+*.od       text
+*.onlydata text
+*.php      text
+*.pl       text
+*.py       text
+*.rb       text
+*.sass     text eol=lf
+*.scm      text
+*.scss     text eol=lf
+*.sh       text eol=lf
+*.sql      text
+*.styl     text
+*.tag      text
+*.ts       text
+*.tsx      text
+*.xml      text
+*.xhtml    text
+
+## DOCKER
+*.dockerignore text
+Dockerfile     text
+
+## DOCUMENTATION
+*.markdown   text
+*.md         text
+*.mdwn       text
+*.mdown      text
+*.mkd        text
+*.mkdn       text
+*.mdtxt      text
+*.mdtext     text
+*.txt        text
+AUTHORS      text
+CHANGELOG    text
+CHANGES      text
+CONTRIBUTING text
+COPYING      text
+copyright    text
+*COPYRIGHT*  text
+INSTALL      text
+license      text
+LICENSE      text
+NEWS         text
+readme       text
+*README*     text
+TODO         text
+
+## TEMPLATES
+*.dot        text
+*.ejs        text
+*.haml       text
+*.handlebars text
+*.hbs        text
+*.hbt        text
+*.jade       text
+*.latte      text
+*.mustache   text
+*.njk        text
+*.phtml      text
+*.tmpl       text
+*.tpl        text
+*.twig       text
+
+## LINTERS
+.babelrc      text
+.csslintrc    text
+.eslintrc     text
+.htmlhintrc   text
+.jscsrc       text
+.jshintrc     text
+.jshintignore text
+.prettierrc   text
+.stylelintrc  text
+
+## CONFIGS
+*.bowerrc       text
+*.cnf           text
+*.conf          text
+*.config        text
+.browserslistrc text
+.editorconfig   text
+.gitattributes  text
+.gitconfig      text
+.gitignore      text
+.htaccess       text
+*.npmignore     text
+*.yaml          text
+*.yml           text
+browserslist    text
+Makefile        text
+makefile        text
+
+## HEROKU
+Procfile    text
+.slugignore text
+
+## GRAPHICS
+*.ai   binary
+*.bmp  binary
+*.eps  binary
+*.gif  binary
+*.ico  binary
+*.jng  binary
+*.jp2  binary
+*.jpg  binary
+*.jpeg binary
+*.jpx  binary
+*.jxr  binary
+*.pdf  binary
+*.png  binary
+*.psb  binary
+*.psd  binary
+*.svg  text
+*.svgz binary
+*.tif  binary
+*.tiff binary
+*.wbmp binary
+*.webp binary
+
+## AUDIO
+*.kar  binary
+*.m4a  binary
+*.mid  binary
+*.midi binary
+*.mp3  binary
+*.ogg  binary
+*.ra   binary
+
+## VIDEO
+*.3gpp binary
+*.3gp  binary
+*.as   binary
+*.asf  binary
+*.asx  binary
+*.fla  binary
+*.flv  binary
+*.m4v  binary
+*.mng  binary
+*.mov  binary
+*.mp4  binary
+*.mpeg binary
+*.mpg  binary
+*.ogv  binary
+*.swc  binary
+*.swf  binary
+*.webm binary
+
+## ARCHIVES
+*.7z  binary
+*.gz  binary
+*.jar binary
+*.rar binary
+*.tar binary
+*.zip binary
+
+## FONTS
+*.ttf   binary
+*.eot   binary
+*.otf   binary
+*.woff  binary
+*.woff2 binary
+
+## EXECUTABLES
+*.exe binary
+*.pyc binary

.gitignore

@@ -41,6 +41,10 @@ build/Release
 node_modules/
 jspm_packages/
 
+# Mac files
+.DS_Store
+**/.DS_Store
+
 # TypeScript v1 declaration files
 typings/
 

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": false
+}

README.md

@@ -1,4 +1,6 @@
-# Topcoder React Microapp Example
+# micro-frontends-challenges-app
+
+# Topcoder Challenges App
 
 This is a [single-spa](https://single-spa.js.org/) example React microapp.
 
@@ -14,9 +16,11 @@ This is a [single-spa](https://single-spa.js.org/) example React microapp.
 | 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 dev`         | Run app in the `development` mode and `dev` config  |
+| `npm run dev-https`   | Run app in the `development` mode and `dev` config using HTTPS protocol |
+| `npm run local`       | Run app in the `development` mode and `dev` config   |
+| `npm run prod`        | Run app in the `development` mode and `prod` config  |
+| `npm run build`       | Build app for production and puts files to the `dist` folder, default to `development` mode and `dev` config |
 | `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                                        |
@@ -28,24 +32,29 @@ This is a [single-spa](https://single-spa.js.org/) example React microapp.
 
 Inside the project folder run:
 
+- `nvm use 10.22.1;` - to use npm version: 10.22.1
 - `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:8500/topcoder-micro-frontends-challenges-app.js`.
+- `npm run local` - run app in `development` mode and `dev` config
+- This app will be loaded as a normal MFE app, its url is `http://localhost:8009/challenges-app/topcoder-micro-frontends-challenges-app.js` and is configurated in the config file of Earn App
 
 ## Deployment to Production
 
 - `npm i` - install dependencies
-- `npm build` - build code to `dist/` folder
+- `APPMODE=production APPENV=prod npm run 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-challenges-app.js` to load this microapp.
+
+- Now you have to configure frame app to use the URL provided by Heroku like `https://<APP-NAME>.herokuapp.com/challenges-app/topcoder-micro-frontends-challenges-app.js` to load this microapp.

babel.config.js

@@ -0,0 +1,44 @@
+let cssLocalIdent;
+if (process.env.APPMODE === 'production') {
+  cssLocalIdent = '[hash:base64:6]';
+} else {
+  cssLocalIdent = 'challenges_[path][name]___[local]___[hash:base64:6]';
+}
+
+const config = {
+  presets: [
+    ['@babel/preset-env', { targets: { 'browsers': ['> 1%', 'not dead'] } }],
+    '@babel/preset-react'
+  ],
+  plugins: [
+    ['module-resolver', {
+      extensions: ['.js', '.jsx'],
+      root: [
+        './src',
+      ],
+    }],
+    [
+      'inline-react-svg',
+      {
+        ignorePattern: '[/\/]assets[/\/]images'
+      }
+    ],
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        useESModules: true,
+        regenerator: false,
+      },
+    ],
+    ['react-css-modules', {
+      filetypes: {
+        '.scss': {
+          syntax: 'postcss-scss',
+        },
+      },
+      generateScopedName: cssLocalIdent
+    }],
+  ]
+};
+
+module.exports = config;

babel.config.json

@@ -3,7 +3,9 @@ set -eo pipefail
 APP_NAME=$1
 UPDATE_CACHE=""
 
-docker build -f docker/Dockerfile -t $APP_NAME:latest .
+docker build -f docker/Dockerfile -t $APP_NAME:latest \
+--build-arg APPMODE=$APPMODE \
+--build-arg APPENV=$APPENV .
 
 docker create --name app $APP_NAME:latest
 

build.sh

@@ -0,0 +1,15 @@
+require("dotenv").config();
+
+module.exports = {
+  GUIKIT: {
+    DEBOUNCE_ON_CHANGE_TIME: 150,
+  },
+  API: {
+    V5: "https://api.topcoder-dev.com/v5",
+    V3: "https://api.topcoder-dev.com/v3",
+  },
+  URL: {
+    BASE: "https://www.topcoder-dev.com",
+    COMMUNITY_APP: "https://community-app.topcoder-dev.com",
+  },
+};

config/default.js

@@ -0,0 +1,2 @@
+module.exports = {
+};