overture-stack · anncatton · Mar 19, 2021 · Mar 1, 2021 · Mar 5, 2021 · Mar 5, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,5 @@
 {
   "editor.formatOnSave": true,
-  "editor.tabSize": 2
+  "editor.tabSize": 2,
+  "files.insertFinalNewline": true
 }
diff --git a/Dockerfile b/Dockerfile
@@ -1,25 +1,10 @@
-#######################
-#     Builder
-#######################
-FROM node:11.15.0 as builder
+FROM node:14.16.0-alpine
 
 WORKDIR /usr/src/app
 
 COPY . .
 
-ENV REACT_APP_API=REACT_APP_API_PLACEHOLDER
-ENV REACT_APP_EGO_CLIENT_ID=REACT_APP_EGO_CLIENT_ID_PLACEHOLDER
-
-RUN yarn install && yarn build
-
-#######################
-#     Server
-#######################
-FROM nginx:1.17.8-alpine
-
-COPY --from=builder /usr/src/app/build /usr/share/nginx/html
-COPY nginx/default.conf.template /etc/nginx/conf.d/default.conf.template
-COPY nginx/nginx.conf /etc/nginx/nginx.conf
+RUN yarn install
 
 ENV EGO_UI_USER=egoui
 ENV EGO_UI_UID=9999
@@ -30,14 +15,16 @@ ENV PORT=8080
 
 RUN addgroup -S -g $EGO_UI_GID $EGO_UI_USER \
     && adduser -S -u $EGO_UI_UID -G $EGO_UI_USER $EGO_UI_USER \
-    && chown -R $EGO_UI_UID:$EGO_UI_GID /etc/nginx/conf.d \
-    && chown -R $EGO_UI_UID:$EGO_UI_GID /var/cache \
-    && chown -R $EGO_UI_UID:$EGO_UI_GID /var/log/nginx \
-    && chown -R $EGO_UI_UID:$EGO_UI_GID /run
+    && chown -R $EGO_UI_UID:$EGO_UI_GID /usr/src/app
 
-# default client_id is set to ego
+# defaults
 ENV REACT_APP_EGO_CLIENT_ID=ego
+ENV REACT_APP_API=http://localhost:8081/
+# public_url for compiling assets
+ENV PUBLIC_URL="/"
+# for the Router component basename
+ENV REACT_APP_PUBLIC_PATH="/"
 
 USER $EGO_UI_UID
 
-CMD uri=\$uri envsubst < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf && exec nginx -g 'daemon off;'
+CMD ["yarn", "run", "serve", "-l", "8080"]
diff --git a/nginx/default.conf.template b/nginx/default.conf.template
diff --git a/nginx/nginx.conf b/nginx/nginx.conf
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "auth-ui",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "private": true,
   "dependencies": {
     "axios": "^0.21.1",
@@ -28,11 +28,16 @@
     "recompose": "^0.26.0",
     "semantic-ui-css": "2.2.12",
     "semantic-ui-react": "^0.81.1",
+    "serve": "^11.3.2",
     "url-join": "^2.0.2",
     "vanilla-ripplejs": "^1.0.3"
   },
+  "bin": {
+    "serve": "./node_modules/.bin/serve"
+  },
   "scripts": {
     "start": "react-scripts-ts start",
+    "serve": "npm run build && NODE_ENV=production serve -s build",
     "build": "react-scripts-ts build",
     "test": "react-scripts-ts test --env=jsdom",
     "eject": "react-scripts-ts eject",

diff --git a/public/index.html b/public/index.html
@@ -1,17 +1,16 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta name="theme-color" content="#000000">
-  <!--
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-  <!--
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -20,16 +19,21 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
-  <title>Admin Portal</title>
-</head>
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
+      integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
+      crossorigin="anonymous"
+    />
+    <title>Admin Portal</title>
+  </head>
 
-<body>
-  <noscript>
-    You need to enable JavaScript to run this app.
-  </noscript>
-  <div id="root"></div>
-  <!--
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,6 +43,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
+  </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -12,6 +12,7 @@ import ResourceRoute from 'components/ResourceRoute';
 import RESOURCE_MAP from 'common/RESOURCE_MAP';
 import Nav from 'components/Nav';
 import NoAccess from 'components/NoAccess';
+import { PUBLIC_PATH } from 'common/injectGlobals';
 
 const enhance = compose(provideLoggedInUser);
 
@@ -22,7 +23,7 @@ const ProtectedRoute = injectState(({ component, state, ...rest }) => (
 class App extends React.Component<any, any> {
   render() {
     return (
-      <Router>
+      <Router basename={PUBLIC_PATH}>
         <div style={{ height: '100%', display: 'flex' }}>
           <Switch>
             <Route path="/" exact component={Login} />

diff --git a/src/common/injectGlobals.ts b/src/common/injectGlobals.ts
@@ -11,6 +11,8 @@ export const API_ROOT = process.env.REACT_APP_API;
 export const EGO_CLIENT_ID = process.env.REACT_APP_EGO_CLIENT_ID;
 export const USE_DUMMY_DATA = process.env.REACT_APP_DUMMY;
 
+export const PUBLIC_PATH = process.env.REACT_APP_PUBLIC_PATH;
+
 export const STATUSES = ['DISABLED', 'APPROVED', 'PENDING', 'REJECTED'];
 export const DATE_KEYS = ['createdAt', 'lastLogin'];
 export const DATE_FORMAT = 'YYYY-MM-DD hh:mm A';

diff --git a/src/common/typedefs/User.d.ts b/src/common/typedefs/User.d.ts
@@ -1,6 +1,6 @@
 enum EgoProviderType {
   GOOGLE = 'GOOGLE',
-  FACEBOOK = 'FACEBOOK',
+  // FACEBOOK = 'FACEBOOK',
   GITHUB = 'GITHUB',
   LINKEDIN = 'LINKEDIN',
   ORCID = 'ORCID',

diff --git a/src/components/Login.tsx b/src/components/Login.tsx
@@ -52,15 +52,15 @@ const enhance = compose(injectState);
 
 enum LoginProvider {
   Google = 'Google',
-  Facebook = 'Facebook',
+  // Facebook = 'Facebook',
   Github = 'GitHub',
   Linkedin = 'LinkedIn',
   Orcid = 'ORCiD',
 }
 
 enum ProviderLoginPaths {
   google = 'google',
-  facebook = 'facebook',
+  // facebook = 'facebook',
   github = 'github',
   linkedin = 'linkedin',
   orcid = 'orcid',
@@ -78,7 +78,7 @@ const providers: ProviderType[] = [
   { name: LoginProvider.Google, path: ProviderLoginPaths.google, Icon: Google },
   { name: LoginProvider.Orcid, path: ProviderLoginPaths.orcid, Icon: Orcid },
   { name: LoginProvider.Github, path: ProviderLoginPaths.github, Icon: GitHub },
-  { name: LoginProvider.Facebook, path: ProviderLoginPaths.facebook, Icon: Facebook },
+  // { name: LoginProvider.Facebook, path: ProviderLoginPaths.facebook, Icon: Facebook },
   { name: LoginProvider.Linkedin, path: ProviderLoginPaths.linkedin, Icon: LinkedIn },
 ];