eliataylor · eliataylor · Feb 18, 2025 · Feb 14, 2025 · Feb 14, 2025 · Feb 15, 2025
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -35,7 +35,7 @@ services:
       mysqlv8:
         condition: service_healthy
     ports:
-      - "8081:8081"
+      - "8080:8080"
     extra_hosts:
       - "localapi.oaexample.com:127.0.0.1"
 
@@ -52,7 +52,7 @@ services:
       django:
         condition: service_started
     ports:
-      - "3001:3001"
+      - "3000:3000"
     extra_hosts:
       - "localhost.oaexample.com:127.0.0.1"
 

diff --git a/set-env-vars.sh b/set-env-vars.sh
@@ -2,16 +2,28 @@
 
 set -e
 
-# Define root .env file and public templates
-ROOT_ENV_FILE=".env"
-PUBLIC_ENV_FILE=".env.public"
-PUBLIC_JSON_FILE="stack/cypress/cypress.public.json"
-
-# Ensure root .env file exists
-if [ ! -f "$ROOT_ENV_FILE" ]; then
-  cp "$PUBLIC_ENV_FILE" "$ROOT_ENV_FILE"
-  echo "Created $ROOT_ENV_FILE from $PUBLIC_ENV_FILE"
-fi
+# Define the file reference map
+FILES="
+.env:.env.public
+stack/reactjs/.env:stack/reactjs/.env.public
+stack/django/.env:stack/django/.env.public
+stack/databuilder/.env:stack/databuilder/.env.public
+stack/cypress/cypress.env.json:stack/cypress/cypress.public.json
+"
+
+# Loop through each file mapping
+echo "$FILES" | while IFS=: read -r target source; do
+  if [ ! -f "$target" ]; then
+    if [ -f "$source" ]; then
+      cp "$source" "$target"
+      echo "Created $target from $source"
+    else
+      echo "Warning: Source file $source does not exist. Skipping $target."
+    fi
+  else
+    echo "Skipping $target, already exists."
+  fi
+done
 
 # Load root .env variables into memory
 load_env() {
@@ -20,7 +32,7 @@ load_env() {
       ""|\#*) continue ;;  # Ignore empty lines and comments
     esac
     eval "ROOT_$KEY=\"$VALUE\""
-  done < "$ROOT_ENV_FILE"
+  done < ".env"
 }
 
 # Mapping of target files and variables to update
@@ -51,24 +63,6 @@ stack/cypress/cypress.env.json:REACT_APP_APP_HOST:REACT_APP_APP_HOST
 stack/cypress/cypress.env.json:REACT_APP_API_HOST:REACT_APP_API_HOST
 "
 
-# Ensure missing .env files are created from .env.public
-ensure_env_file() {
-  FILE="$1"
-  if [ ! -f "$FILE" ]; then
-    cp "$PUBLIC_ENV_FILE" "$FILE"
-    echo "Created $FILE from $PUBLIC_ENV_FILE"
-  fi
-}
-
-# Ensure missing .json files are created from cypress.public.json
-ensure_json_file() {
-  FILE="$1"
-  if [ ! -f "$FILE" ]; then
-    cp "$PUBLIC_JSON_FILE" "$FILE"
-    echo "Created $FILE from $PUBLIC_JSON_FILE"
-  fi
-}
-
 # Function to update .env files
 update_env_file() {
   FILE="$1"
@@ -135,17 +129,17 @@ load_env
 echo "$MAPPING" | while IFS=: read -r FILE VAR ROOT_KEY; do
   case "$FILE" in
     *.json)
-      ensure_json_file "$FILE"
       update_json_file "$FILE" "$VAR" "$ROOT_KEY"
       ;;
     *.env)
-      ensure_env_file "$FILE"
       update_env_file "$FILE" "$VAR" "$ROOT_KEY"
       ;;
   esac
 done
 
 # Function to update ports in docker-compose.yml based on REACT_APP_API_HOST and REACT_APP_APP_HOST
+DOCKER_COMPOSE_FILE="docker-compose.yml"
+
 update_docker_compose_ports() {
   [ ! -f "$DOCKER_COMPOSE_FILE" ] && return
 

diff --git a/stack/django/.env → stack/django/.env.public b/stack/django/.env → stack/django/.env.public
diff --git a/stack/django/oaexample_base/settings/security.py b/stack/django/oaexample_base/settings/security.py
@@ -23,9 +23,9 @@ def get_tld(hostname):
 API_HOST_PARTS = urlparse(API_HOST)
 
 SECRET_KEY = myEnv('DJANGO_SECRET_KEY', 'default')
-SUPERUSER_USERNAME = myEnv('DJANGO_SUPERUSER_USERNAME', 'superadmin')
-SUPERUSER_PASSWORD = myEnv('DJANGO_SUPERUSER_PASSWORD', 'admin')
-SUPERUSER_EMAIL = myEnv('DJANGO_SUPERUSER_EMAIL', '[email protected]')
+DJANGO_SUPERUSER_USERNAME = myEnv('DJANGO_SUPERUSER_USERNAME', 'superadmin')
+DJANGO_SUPERUSER_PASSWORD = myEnv('DJANGO_SUPERUSER_PASSWORD', 'admin')
+DJANGO_SUPERUSER_EMAIL = myEnv('DJANGO_SUPERUSER_EMAIL', '[email protected]')
 
 ALLOWED_HOSTS = [get_tld(API_HOST_PARTS.hostname), f".{get_tld(API_HOST_PARTS.hostname)}"]
 

diff --git a/stack/reactjs/.env.public b/stack/reactjs/.env.public
@@ -1,9 +1,14 @@
 #### Your API Server protocol:host:port ####
 # REACT_APP_API_HOST=https://localapi.oaexample.com:8080
-# REACT_APP_API_HOST=https://django-service:8080 # use when running cypress inside docker
 REACT_APP_API_HOST=http://localhost:8080
 # REACT_APP_API_HOST=https://api.oaexample.com
 
+#### Your Webapp URL protocol:host:port ####
+# REACT_APP_APP_HOST=https://localhost.oaexample.com:3000
+REACT_APP_APP_HOST=http://localhost:3000
+# REACT_APP_APP_HOST=https://oaexample.com
+
+DEFAULT_PERMS=IsAuthenticatedOrReadOnly
 
 REACT_APP_GA_ID=G-KXW7DFELYD
 REACT_APP_TITLE=oaexample

diff --git a/stack/reactjs/package.json b/stack/reactjs/package.json
@@ -34,7 +34,7 @@
   },
   "scripts": {
     "start": "bash start.sh",
-    "react-start": "cp -n .env .env.backup 2>/dev/null || cp .env.public .env && react-scripts start",
+    "react-start": "cp -n .env.public .env || true && react-scripts start",
     "start-ssl-in-docker": "HTTPS=true SSL_CRT_FILE=~/.ssl/certificate.crt HOST=0.0.0.0 PORT=3000 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

diff --git a/stack/reactjs/src/object-actions/docs/Install.tsx b/stack/reactjs/src/object-actions/docs/Install.tsx
@@ -9,17 +9,18 @@ const Install: React.FC = () => {
   const { envConfig } = useEnvContext();
 
   function hasCustomDomain() {
-      return (envConfig.REACT_APP_APP_HOST.indexOf("://localhost") < 0 && envConfig.REACT_APP_APP_HOST.indexOf("://127.0.0.1") < 0) ||
-          (envConfig.REACT_APP_API_HOST.indexOf("://localhost") < 0 && envConfig.REACT_APP_API_HOST.indexOf("://127.0.0.1") < 0)
+    return (envConfig.REACT_APP_APP_HOST.indexOf("://localhost") < 0 && envConfig.REACT_APP_APP_HOST.indexOf("://127.0.0.1") < 0) ||
+      (envConfig.REACT_APP_API_HOST.indexOf("://localhost") < 0 && envConfig.REACT_APP_API_HOST.indexOf("://127.0.0.1") < 0);
   }
 
   return (
     <Box>
-      <StyledTypography variant="h1">Install</StyledTypography>
+      <StyledTypography variant="h1">Run Demo</StyledTypography>
       <StyledTypography variant="subtitle1">
         This will build the full stack based on an example application.
       </StyledTypography>
 
+
       <Command
         command="git clone [email protected]:eliataylor/object-actions.git --depth 1"
         help={
@@ -37,42 +38,43 @@ const Install: React.FC = () => {
 
       <Command command="cd object-actions" />
 
-
       <StyledPaper>
-        <Typography variant="body1" >
-          Pick your front and backend URLs, click "Copy Settings" and paste the settings into .env in the project root
-        </Typography>
-        <Typography variant="body2" sx={{ marginBottom: 3 }}>
-          Use HTTPS with oaexample.com if you want test 3rd party authentication (Google / Linkedin / Github / others).
+        <Typography variant="body1" sx={{ marginBottom: 3 }}>
+          Set your front and backend URLs, click "Copy Settings" and paste the clipboard into a .env in the project root
         </Typography>
         <EnvBuilder displayProperties={["REACT_APP_API_HOST", "REACT_APP_APP_HOST"]} />
       </StyledPaper>
 
+      <Command command="sh set-env-vars.sh --env .env" />
 
-      {hasCustomDomain() && <Command
+      {hasCustomDomain() && <div style={{ marginTop: 20 }}><Command
         command="sudo bash docs/os-hosts-install.sh"
         help={
           <>
-            This will add a entry to your computers `/etc/hosts` so that {envConfig.REACT_APP_APP_HOST} and {envConfig.REACT_APP_API_HOST} resolve to your local development environment.
+            This will add a entry to your computers `/etc/hosts` so that {envConfig.REACT_APP_APP_HOST} and {envConfig.REACT_APP_API_HOST} resolve to your local development
+            environment.
             It will also backup the original as `/etc/hosts.bak.timestamp`
           </>
         }
-      />
+      /></div>
       }
 
       <Command command="docker-compose up --build -d" />
 
-      <OutputLinks />
+      <div style={{ marginTop: 50 }}>
 
-      <StyledTypography variant="subtitle1">
-        All tools will be mounted locally, so you can make edits and test your changes immediately. For example, you can reskin the web app starting with your <a
-        href={"https://github.com/eliataylor/objects-actions/blob/0426b1d48a5d59f0776a38a453a854a6c415a38f/stack/reactjs/src/theme/ThemeContext.js#L15"}
-        target={"_blank"}>stack/reactjs/src/theme/ThemeContext.js</a>.
+        <OutputLinks />
 
-        Or you can change the default API permissions for any view starting here <a
-        href={"https://github.com/eliataylor/objects-actions/blob/0fb527b9a8899cc5a5b42cf81d027b4b0a4a094f/stack/django/oaexample_app/views.py#L117"}
-        target={"_blank"}>stack/django/oaexample_app/views.py#L117</a>
-      </StyledTypography>
+        <StyledTypography variant="subtitle2">
+          All tools will be mounted locally, so you can make edits and test your changes immediately. For example, you can reskin the web app starting with your <a
+          href={"https://github.com/eliataylor/objects-actions/blob/0426b1d48a5d59f0776a38a453a854a6c415a38f/stack/reactjs/src/theme/ThemeContext.js#L15"}
+          target={"_blank"}>stack/reactjs/src/theme/ThemeContext.js</a>.
+
+          Or you can change the default API permissions for any view starting here <a
+          href={"https://github.com/eliataylor/objects-actions/blob/0fb527b9a8899cc5a5b42cf81d027b4b0a4a094f/stack/django/oaexample_app/views.py#L117"}
+          target={"_blank"}>stack/django/oaexample_app/views.py#L117</a>
+        </StyledTypography>
+      </div>
 
 
     </Box>

diff --git a/stack/reactjs/src/object-actions/docs/OutputLinks.tsx b/stack/reactjs/src/object-actions/docs/OutputLinks.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { Box } from '@mui/material';
-import { Link } from 'react-router-dom';
-import CardHeader from '@mui/material/CardHeader';
-import LightDarkImg from '../../components/LightDarkImg';
-import { StyledTypography } from '../components/StyledComponents';
-import { useEnvContext } from '../forming/EnvProvider';
+import React from "react";
+import { Box, Typography } from "@mui/material";
+import { Link } from "react-router-dom";
+import CardHeader from "@mui/material/CardHeader";
+import LightDarkImg from "../../components/LightDarkImg";
+import { StyledTypography } from "../components/StyledComponents";
+import { useEnvContext } from "../forming/EnvProvider";
 
 const Install: React.FC = () => {
   const { envConfig } = useEnvContext();
@@ -15,7 +15,7 @@ const Install: React.FC = () => {
         Once all Docker containers are running, these will be accessible in your browser:
       </StyledTypography>
 
-      {envConfig.REACT_APP_APP_HOST.indexOf('https:') === 0 && (
+      {(envConfig.REACT_APP_APP_HOST.indexOf("https:") === 0 || envConfig.REACT_APP_API_HOST.indexOf("https:") === 0) && (
         <StyledTypography variant="subtitle2">
           You will have to accept your browser's warnings about self-signed
           certificates
@@ -24,74 +24,57 @@ const Install: React.FC = () => {
 
       <Box>
         <CardHeader
-          component={'a'}
-          target={'_blank'}
-          style={{ textDecoration: 'none' }}
-          href={envConfig.REACT_APP_APP_HOST}
-          action={<img src={'/oa-assets/logo-react.svg'} height={30} />}
-          subheader={'ReactJS + Material-UI Frontend'}
-          title={<u style={{wordBreak:"break-word"}}>{envConfig.REACT_APP_APP_HOST}</u>}
+          style={{ textDecoration: "none" }}
+          avatar={<img src={"/oa-assets/logo-react.svg"} height={30} />}
+          subheader={"ReactJS + Material-UI Frontend"}
+          title={
+            <Typography variant={"subtitle1"} style={{ wordBreak: "break-word" }}>
+              {envConfig.REACT_APP_APP_HOST}</Typography>}
         />
 
         <CardHeader
-          component={'a'}
-          target={'_blank'}
-          style={{ textDecoration: 'none' }}
-          href={`${envConfig.REACT_APP_API_HOST}/admin/login`}
-          action={<img src={'/oa-assets/logo-django.svg'} height={15} />}
-          subheader={'Backend Content Manager'}
+          style={{ textDecoration: "none" }}
+          avatar={<img src={"/oa-assets/logo-django.svg"} height={15} />}
+          subheader={"Backend Content Manager"}
           title={
-            <u style={{wordBreak:"break-word"}}>
+            <Typography variant={"subtitle1"} style={{ wordBreak: "break-word" }}>
               {`${envConfig.REACT_APP_API_HOST}/admin/login`}
-            </u>
+            </Typography>
           }
         />
 
         <CardHeader
-          component={'a'}
-          target={'_blank'}
-          style={{ textDecoration: 'none' }}
-          href={`${envConfig.REACT_APP_API_HOST}/api/schema/swagger`}
-          action={<img src={'/oa-assets/logo-drf.png'} height={20} />}
-          subheader={'Backend API'}
+          style={{ textDecoration: "none" }}
+          avatar={<img src={"/oa-assets/logo-drf.png"} height={20} />}
+          subheader={"Backend API"}
           title={
-            <u style={{wordBreak:"break-word"}}>
+            <Typography variant={"subtitle1"} style={{ wordBreak: "break-word" }}>
               {`${envConfig.REACT_APP_API_HOST}/api/schema/swagger`}
-            </u>
+            </Typography>
           }
         />
 
-        <StyledTypography variant="subtitle1">
+        <StyledTypography variant="subtitle2">
           And you can use these tools in the terminal to generate data and run
           end-to-end permissions tests:
         </StyledTypography>
 
         <CardHeader
-          component={Link}
-          style={{ textDecoration: 'none' }}
-          action={<img src={'/oa-assets/logo-typescript.svg'} height={30} />}
-          title={'Fake Data Generator'}
-          subheader={<u>README</u>}
-          to={
-            'https://github.com/eliataylor/objects-actions/blob/main/stack/databuilder/README.md'
-          }
+          avatar={<img src={"/oa-assets/logo-typescript.svg"} height={30} />}
+          title={<Typography variant={"subtitle1"} style={{ wordBreak: "break-word" }}>Fake Data Generator</Typography>}
+          subheader={<a href="https://github.com/eliataylor/objects-actions/blob/main/stack/databuilder/README.md" target="_blank">README</a>}
         />
 
         <CardHeader
-          component={Link}
-          style={{ textDecoration: 'none' }}
-          action={
+          avatar={
             <LightDarkImg
-              light={'/oa-assets/Cypress_Logomark_Dark-Color.svg'}
-              dark={'/oa-assets/Cypress_Logomark_White-Color.svg'}
+              light={"/oa-assets/Cypress_Logomark_Dark-Color.svg"}
+              dark={"/oa-assets/Cypress_Logomark_White-Color.svg"}
               styles={{ height: 30 }}
             />
           }
-          subheader={<u>README</u>}
-          title={'Frontend Test Suite'}
-          to={
-            'https://github.com/eliataylor/objects-actions/blob/main/stack/databuilder/README.md'
-          }
+          subheader={<a href={"https://github.com/eliataylor/objects-actions/blob/main/stack/databuilder/README.md"} target={"_blank"}>README</a>}
+          title={<Typography variant={"subtitle1"} style={{ wordBreak: "break-word" }}>Frontend Test Suite</Typography>}
         />
       </Box>
     </Box>