uat

.github/workflows/uat.yml

@@ -0,0 +1,36 @@
+name: Continuous Deployment on PR
+# 1
+on:
+	pull_request:
+    branches:
+      - master
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.x]
+    env: #2
+      SOURCE_DIR: './build/'
+      AWS_REGION: ${{ secrets.AWS_REGION }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+      PATHS: '/*'
+      AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
+    steps:
+      - uses: actions/checkout@v1 #1
+      - name: Get branch name #2
+        id: vars
+        run: echo "##[set-output name=branch;]$(echo ${GITHUB_REF#refs/heads/})"
+      - name: Install dependencies #33
+        run: yarn
+      - name: Build # 4
+        run: yarn build:uat
+      - name: AWS Deploy #5
+        uses: jakejarvis/[email protected]
+        with:
+          args: --acl public-read --follow-symlinks
+        env:
+          DEST_DIR: ${{steps.vars.outputs.branch}}

app/containers/App/index.js

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { Switch, Route } from 'react-router-dom';
+import { Switch, Route , useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router';
 import map from 'lodash/map';
@@ -21,16 +21,25 @@ import { colors } from '@themes';
 import Header from '@components/Header';
 import For from '@components/For';
 
+
 const theme = {
   fg: colors.primary,
   bg: colors.secondary
 };
 
-export function App({ location }) {
+export function App({ history, location }) {
   return (
     <ThemeProvider theme={theme}>
       <Header />
       <Layout.Content>
+        <button
+          style={{ margin: '20px' }}
+          onClick={() => {
+            history.push(routeConfig.newHomePath.route);
+          }}
+        >
+          Go to the new route
+        </button>
         <For
           ParentComponent={props => <Switch {...props} />}
           of={map(Object.keys(routeConfig))}

app/routeConfig.js

@@ -6,6 +6,10 @@ export const routeConfig = {
     component: HomeContainer,
     ...routeConstants.repos
   },
+  newHomePath: {
+    component: () => <h1>New Home path</h1>,
+    ...routeConstants.newHomePath
+  },
   notFoundPage: {
     component: NotFound,
     route: '/'

app/utils/history.js

@@ -1,4 +1,21 @@
 import { createBrowserHistory } from 'history';
-const baseUrl = process.env.NODE_ENV === 'production' ? '/react-template' : '/';
+import routeConstants from '@utils/routeConstants';
+const routes = Object.keys(routeConstants);
+const pathname = window.location.pathname;
+console.log({ pathname });
+let baseUrl = '';
+if (process.env.ENVIRONMENT_NAME === 'uat') {
+  routes.forEach(routeKey => {
+    const route = routeConstants[routeKey].route;
+    if (pathname.includes(route)) {
+      if (pathname.substring(pathname.length - route.length, pathname.length) === route) {
+        baseUrl = pathname.substring(0, pathname.length - route.length);
+      } else if (pathname.substring(pathname.length - route.length, pathname.length - 1) === `${route}/`) {
+        baseUrl = pathname.substring(0, pathname.length - route.length - 1);
+      }
+    }
+  });
+}
+console.log({ baseUrl });
 const history = createBrowserHistory({ basename: baseUrl });
 export default history;

app/utils/routeConstants.js

@@ -6,5 +6,9 @@ export default {
       padding: 20
     },
     exact: true
+  },
+  newHomePath: {
+    route: '/new-home-path',
+    exact: true
   }
 };

internals/utils.js

@@ -0,0 +1,8 @@
+function isUAT() {
+  return process.env.ENVIRONMENT_NAME === 'uat';
+}
+function getBasePublicPath() {
+  return isUAT() ? './' : '/';
+}
+
+module.exports = { getBasePublicPath, isUAT };

internals/webpack/webpack.config.base.js

@@ -5,6 +5,8 @@ const path = require('path');
 const webpack = require('webpack');
 const dotenv = require('dotenv');
 const colors = require('../../app/themes/colors');
+const { getBasePublicPath } = require('../utils');
+const publicPath = getBasePublicPath();
 
 const dotEnvFile = process.env.NODE_ENV === 'production' ? `.env` : `.env.${process.env.NODE_ENV}`;
 const env = dotenv.config({ path: dotEnvFile }).parsed;
@@ -24,10 +26,8 @@ module.exports = options => ({
   entry: options.entry,
   output: Object.assign(
     {
-      // Compile into js/build.js
       path: path.resolve(process.cwd(), 'build'),
-      // to run prod build locally, set public path to '/' instead of '/react-template/'
-      publicPath: '/'
+      publicPath
     },
     options.output
   ), // Merge with env dependent settings

internals/webpack/webpack.config.prod.js

@@ -5,7 +5,8 @@ const WebpackPwaManifest = require('webpack-pwa-manifest');
 const OfflinePlugin = require('@lcdp/offline-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
-
+const { getBasePublicPath, isUAT } = require('../utils');
+const publicPath = getBasePublicPath();
 module.exports = require('./webpack.config.base')({
   mode: 'production',
   // In production, we skip all hot-reloading stuff
@@ -78,8 +79,8 @@ module.exports = require('./webpack.config.base')({
     // Put it in the end to capture all the HtmlWebpackPlugin's
     // assets manipulations and do leak its manipulations to HtmlWebpackPlugin
     new OfflinePlugin({
-      relativePaths: process.env.NODE_ENV === 'production',
-      publicPath: '/',
+      relativePaths: isUAT(),
+      publicPath,
       appShell: '/',
 
       // No need to cache .htaccess. See http://mxs.is/googmp,