[WIP] Various Webpack and Development Workflow concerns

.bundlewatch.config.js

@@ -9,7 +9,7 @@ module.exports = {
   },
   files: [
     {
-      path: "client-admin/build/static/js/*.js",
+      path: "client-admin/dist/*.js",
       maxSize: "250 kB",
     },
     {

.dockerignore

@@ -0,0 +1,27 @@
+# This is from the context of the root of the project
+
+.bundlewatch.config.js
+.env
+.git
+.gitattributes
+.gitconfig
+.github
+.gitignore
+.vscode
+Makefile
+docker-compose.dev.yml
+docker-compose.test.yml
+docker-compose.yml
+docs
+example.env
+heroku.yml
+package.json
+prod.env
+test.env
+
+*/.dockerignore
+*/.gitignore
+*/build
+*/dist
+*/Dockerfile
+*/node_modules

Makefile

@@ -94,6 +94,9 @@ start-FULL-REBUILD: echo_vars stop rm-ALL ## Remove and restart all Docker conta
 	docker compose ${COMPOSE_FILE_ARGS} --env-file ${ENV_FILE} down
 	docker compose ${COMPOSE_FILE_ARGS} --env-file ${ENV_FILE} up --build
 
+start-backend: echo_vars ## Start backend Docker containers
+	docker compose ${COMPOSE_FILE_ARGS} --env-file ${ENV_FILE} up --force-recreate server math postgres maildev
+
 build-web-assets: ## Build and extract static web assets for cloud deployment to `build` dir
 	docker compose ${COMPOSE_FILE_ARGS} --env-file ${ENV_FILE} create --build --force-recreate file-server
 	$(MAKE) extract-web-assets
@@ -122,7 +125,7 @@ rbs: start-rebuild
 
 .PHONY: help pull start stop rm-containers rm-volumes rm-images rm-ALL hash build-no-cache start-rebuild \
 	start-recreate restart-FULL-REBUILD e2e-install e2e-run e2e-run-all e2e-run-interactive \
-	build-web-assets extract-web-assets
+	build-web-assets extract-web-assets start-backend
 
 
 help:

client-admin/.babelrc.json

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ]
+  ]
+}

client-admin/.dockerignore

@@ -1,34 +1,7 @@
-### SublimeText ###
-*.sublime-workspace
-
-### OSX ###
 .DS_Store
-.AppleDouble
-.LSOverride
-Icon
-
-# Thumbnails
-._*
-
-# Files that might appear on external disk
-.Spotlight-V100
-.Trashes
-
-### Windows ###
-# Windows image file caches
-Thumbs.db
-ehthumbs.db
-
-# Folder config file
-Desktop.ini
-
-# Recycle Bin used on file shares
-$RECYCLE.BIN/
-
-# App specific
-build
+.dockerignore
+.gitignore
+.vscode
+Dockerfile
 node_modules
-npm-debug.log
-
-# VCS
-.git
+package-lock.json

client-admin/.eslintrc.js

@@ -0,0 +1,46 @@
+module.exports = {
+  env: {
+    node: true,
+    es2022: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:jsx-a11y/recommended',
+    'plugin:react/recommended',
+    'prettier'
+  ],
+  globals: {
+    FB: 'readonly'
+  },
+  ignorePatterns: ['build'],
+  overrides: [
+    {
+      files: ['src/**/*.js'],
+      env: {
+        browser: true,
+        jquery: true
+      }
+    }
+  ],
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  plugins: ['jsx-a11y', 'react', 'prettier'],
+  rules: {
+    camelcase: 'off',
+    'jsx-a11y/no-static-element-interactions': 'warn',
+    'jsx-a11y/tabindex-no-positive': 'warn',
+    'react/no-unknown-property': ['error', { ignore: ['sx'] }],
+    'prettier/prettier': 'error'
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  }
+}

client-admin/.gitignore

@@ -29,3 +29,6 @@ $RECYCLE.BIN/
 build
 node_modules
 npm-debug.log
+
+# VS Code settings
+.vscode/settings.json

client-admin/.prettierignore

@@ -0,0 +1 @@
+build

client-admin/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "jsxSingleQuote": true
+}

client-admin/.vscode/settings.json

@@ -1,6 +1,17 @@
 {
-    "search.exclude": {
-        "**/*.code-search": false,
-        "**/node_modules": false
-    }
-}
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+  },
+  "editor.codeActionsOnSave": {
+    "quickfix.biome": "never",
+    "source.fixAll": "always"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "prettier.enable": true,
+  "prettier.semi": false,
+  "prettier.singleQuote": true
+}

client-admin/Dockerfile

@@ -7,8 +7,10 @@ FROM docker.io/node:18-alpine
 
 ARG ENABLE_TWITTER_WIDGETS
 ARG FB_APP_ID
+ARG SERVICE_URL
 ENV ENABLE_TWITTER_WIDGETS ${ENABLE_TWITTER_WIDGETS}
 ENV FB_APP_ID ${FB_APP_ID}
+ENV SERVICE_URL ${SERVICE_URL}
 
 # Set default NODE_ENV to production unless overridden at build time with --build-arg NODE_ENV=development
 ARG NODE_ENV
@@ -22,4 +24,4 @@ RUN npm ci --production=false
 
 COPY . .
 
-CMD npm run build:prod
+CMD npm run build

client-admin/README.md

@@ -79,7 +79,7 @@ _In the future this should become more customizable._
 To build static assets into `build/` for a production deployment, run
 
 ```sh
-npm run build:prod
+npm run build
 ```
 
 _The polis file-server process builds and serves these assets when docker compose is used._

client-admin/example.env

@@ -0,0 +1 @@
+SERVICE_URL=http://localhost:5000