Release 1.7.2

packages/react-scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fs/react-scripts",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "upstreamVersion": "2.1.8",
   "description": "Configuration and scripts for Create React App.",
   "repository": "fs-webdev/create-react-app",

packages/react-scripts/scripts/utils/frontierInit.js

@@ -72,6 +72,9 @@ function installFrontierDependencies(appPath, appName, answers, ownPath) {
       'i18next-scanner@2.10.0',
       '@alienfast/i18next-loader@1.0.18',
       'react-styleguidist@9.0.4',
+      '@fs/styleguidist-overrides@1.3.0',
+      '@fs/configurations@1.3.4',
+      'dotenv@7.0.0',
       'webpack@4.28.3',
       'jest-dom@3.1.3',
     ]

packages/react-scripts/template/src/components/home/HomeHeader.js

@@ -2,14 +2,11 @@ import React from 'react'
 import { css } from '@emotion/core'
 
 const styles = css`
-  background-color: #282c34;
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
 `
 
 const HomeHeader = ({ children }) => <header css={styles}>{children}</header>

packages/react-scripts/template/src/components/home/Logo.js

@@ -5,7 +5,8 @@ import logo from './Logo.svg'
 
 const styles = css`
   animation: spin infinite 20s linear;
-  height: 40vmin;
+  height: 30vmin;
+  margin: 10px;
 
   @keyframes spin {
     from {

packages/react-scripts/template/src/index.js

@@ -3,18 +3,24 @@ import ReactDOM from 'react-dom'
 import { UserProvider } from '@fs/zion-user'
 import RootErrorBoundary from '@fs/zion-error-boundary'
 import { I18nProvider, addTranslations } from '@fs/zion-locale'
+import { Router, NotFound } from '@fs/zion-router'
 import App from './components/App'
 import * as serviceWorker from './serviceWorker'
 import translations from './locales'
 
 addTranslations(translations)
 
+const base = window.FS ? new URL(window.FS.appPath).pathname : ''
+
 const FrontierRoot = () => (
   <RootErrorBoundary>
     <Suspense fallback="Loading ...">
       <I18nProvider>
         <UserProvider>
-          <App />
+          <Router>
+            <App path={`${base}/*`} />
+            <NotFound default />
+          </Router>
         </UserProvider>
       </I18nProvider>
     </Suspense>

packages/react-scripts/template/styleguide.config.js

@@ -1,3 +1,28 @@
+require('dotenv')
+const styles = require('@fs/styleguidist-overrides/dist/styles.js')
+const webpackConfig = require('@fs/configurations/webpack.dev.js')
+
 module.exports = {
-  webpackConfig: require('@fs/react-scripts/config/webpack.config'),
+  webpackConfig,
+  serverPort: 5009,
+  pagePerSection: true,
+  theme: {
+    color: {
+      sidebarBackground: '#333331',
+    },
+    sidebarWidth: 250,
+    maxWidth: 1200,
+  },
+  styles,
+  styleguideComponents: {
+    Wrapper: require.resolve('@fs/styleguidist-overrides/dist/Wrapper.js'),
+    StyleGuideRenderer: require.resolve('@fs/styleguidist-overrides/dist/StyleGuideRenderer.js'),
+  },
+  usageMode: 'expand',
+  configureServer: app => {
+    // This endpoint returns the current dev environment. Used by the client when in local development.
+    app.get('/dev-env', (req, res) => {
+      res.status(200).send({ environment: process.env.REMOTE_ENV || 'beta' })
+    })
+  },
 }