move to hash router, update homepage config on deployment

Author: hpratt

.env.github

@@ -0,0 +1 @@
+PUBLIC_URL=https://weng-lab.github.io/psychscreen

.env.local

@@ -0,0 +1 @@
+PUBLIC_URL=http://localhost:3000/psychscreen

Dockerfile

@@ -4,6 +4,10 @@ FROM node:14-alpine AS build
 RUN mkdir -p /app
 WORKDIR /app
 
+# Set a default value for PUBLIC_URL
+ARG PUBLIC_URL="/"
+ENV PUBLIC_URL=$PUBLIC_URL
+
 # Install app dependencies
 COPY package.json /app
 COPY yarn.lock /app

package.json

@@ -2,6 +2,7 @@
   "name": "psychscreen",
   "version": "0.4.3",
   "private": true,
+  "homepage": "%PUBLIC_URL%",
   "dependencies": {
     "@apollo/client": "^3.6.9",
     "@emotion/react": "^11.10.0",
@@ -43,7 +44,7 @@
   },
   "scripts": {
     "predeploy": "react-scripts build",
-    "deploy": "gh-pages -d build",
+    "deploy": "env-cmd -f .env.github yarn build && gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

scripts/build.sh

@@ -13,6 +13,5 @@ cd "$(dirname "$(dirname "$0")")"
 # import common stuff
 source scripts/lib/common.sh
 
-
 # build the image and tag it with the project version
-docker build -t gcr.io/${GCR_PROJECT_ID}/${DOCKER_IMAGE_NAME}:${DOCKER_TAG} .
+docker build -t --build-arg PUBLIC_URL=https://psychscreen.wenglab.org/psychscreen gcr.io/${GCR_PROJECT_ID}/${DOCKER_IMAGE_NAME}:${DOCKER_TAG} .

scripts/run-local.sh

@@ -1,15 +1,13 @@
 #!/bin/bash
 # arg1: environment used to pick config file to use in /config.
 set -e
+source .env.local
 
 # cd to project root directory
 cd "$(dirname "$(dirname "$0")")"
 
 # Set environment variable (used for config) to staging by default
 [[ ! -z "$1" ]] && ENVIRONMENT="$1" || ENVIRONMENT=staging
 
-echo config/config.${ENVIRONMENT}.json
-pwd
 #ln -sf config/config.${ENVIRONMENT}.json public/config.json
-cp config/config.${ENVIRONMENT}.json public/config.json
-yarn start
+NODE_OPTIONS="--openssl-legacy-provider" yarn start

src/App.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { BrowserRouter as Router, Route, Routes, Navigate  } from 'react-router-dom';
+import { HashRouter as Router, Route, Routes, Navigate  } from 'react-router-dom';
 import '@zscreen/psychscreen-ui-components/src/App.css';
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
 import './App.css';

src/assets/brain.png

@@ -2,6 +2,7 @@
  * HomePage.tsx: the app home page.
  */
 
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { AppBar } from '@zscreen/psychscreen-ui-components';