Docker dev modernization

.github/workflows/frontend.yml

@@ -42,11 +42,15 @@ jobs:
           node-version: 14
           cache: npm
           cache-dependency-path: frontend/package-lock.json
-      - run: npm install -g npm@7.0.0
+      - uses: browser-actions/setup-chrome@v2
+        id: setup-chrome
+      - run: npm install -g npm@6.14.18
       - run: npm install
         working-directory: ./frontend
       - run: npm run test
         working-directory: ./frontend
+        env:
+          CHROME_BIN: ${{ steps.setup-chrome.outputs.chrome-path }}
 
   node-next-test:
     strategy:
@@ -61,8 +65,11 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node_version }}
-      - run: npm install -g npm@7.0.0
+      - uses: browser-actions/setup-chrome@v2
+        id: setup-chrome
       - run: npm install
         working-directory: ./frontend
       - run: npm run test
         working-directory: ./frontend
+        env:
+          CHROME_BIN: ${{ steps.setup-chrome.outputs.chrome-path }}

.gitignore

@@ -14,3 +14,4 @@ frontend/.env
 .DS_Store
 
 TODO.md
+docs/superpowers/

Makefile

@@ -19,8 +19,8 @@ specs: ## Run the specs
 console: ## Open a rails console
 	docker compose --profile dev run --rm backend rails c
 
-seed: ## Seed your database
-	docker compose --profile dev run --rm backend bundle exec rails app:setup
+seed: ## Reset, migrate, load fixtures, and seed your database
+	docker compose --profile tools run --rm app-setup
 
 help:
 	@sed -n -E "s/(^[^ ]+):.* ## (.*)/`printf "\033[32m"`\1|`printf "\033[0m"` \2/p" $(MAKEFILE_LIST) | sort | column -t -s '|'

README.md

@@ -18,10 +18,41 @@ Help would be appreciated! Please join us in [slack #flaredown](https://join.sla
 
 ## Installation
 
-The application and all dependencies are dockerized and can be run using `docker compose`, so there's no dependencies to install other than Docker.
+You can run the application and its dependencies using `docker compose`, or run the app natively using the setup instructions below.
 Alternatively, you can run the app using the `make` commands available: `make help`
 
-If you want to run the application on your own machine see the next sections on dependency installations
+If you want to run the application on your own machine see the next sections on dependency installations.
+
+### Running with Docker
+
+Populate the necessary environment parameters:
+
+```bash
+cp backend/env-example backend/.env
+cp frontend/env-example frontend/.env
+```
+
+In `frontend/.env`, `PORT` is the backend API port used by the Ember app and `FRONTEND_PORT` is the local frontend port.
+
+Set `FACEBOOK_APP_ID` in `frontend/.env` if you want to use Facebook login locally.
+
+Set up the database:
+
+```bash
+docker compose --profile tools run --rm app-setup
+```
+
+This command is interactive and resets the local Docker development and test databases. Type `yes` when prompted to continue.
+
+Start the application:
+
+```bash
+docker compose --profile dev up
+```
+
+Visit your app at [http://localhost:4300](http://localhost:4300).
+
+Frontend dependency changes are handled automatically by Docker. For a full reset of all local Docker data, including databases and dependency volumes, run `docker compose down -v`, then run the database setup command again afterward.
 
 ### Running natively
 
@@ -77,10 +108,10 @@ npm install
 
 ### Prerequisites
 
-- Populate the necessary environment parameters with `cp backend/env-example backend/.env && cp backend/env-example frontend/.env`
+- Populate the necessary environment parameters with `cp backend/env-example backend/.env && cp frontend/env-example frontend/.env`
 - Create a [Facebook dev app](https://developers.facebook.com/docs/development/create-an-app) and paste your own ID into `frontend/.env` file's `FACEBOOK_APP_ID` parameter.
     - Note: This is not necessary in `backend/.env` but we have not yet cleaned up these two files into the necessary components.
-- Seed your database using `make seed` or `bundle exec rails app:setup`
+- Reset, migrate, load fixtures, and seed your database using `make seed` or `bundle exec rails app:setup`
 
 ### Running
 

backend/lib/tasks/app.rake

@@ -43,6 +43,8 @@ namespace :app do
       Rake::Task["db:drop"].invoke
       Rake::Task["db:create"].invoke
       Rake::Task["db:migrate"].invoke
+      ActiveRecord::Base.connection.schema_cache.clear!
+      ActiveRecord::Base.descendants.each(&:reset_column_information)
     end
     Rake::Task["db:fixtures:load"].invoke
     Rake::Task["db:seed"].invoke
@@ -62,7 +64,10 @@ namespace :app do
   def prompt(message, choices = nil)
     begin
       print(message)
-      answer = STDIN.gets.chomp
+      input = STDIN.gets
+      raise OperationAbortedException if input.nil?
+
+      answer = input.chomp
       p "got answer: #{answer}"
     end while choices.present? && !choices.include?(answer)
     answer

docker-compose.yml

@@ -13,7 +13,7 @@ services:
       - mongodb
       - redis
     ports:
-      - 3000:3000
+      - 127.0.0.1:3000:3000
     volumes:
       - ./backend:/app
     environment: *backend-services-hosts
@@ -34,16 +34,19 @@ services:
       - dev
       - native
   frontend:
-    platform: linux/amd64
     build: frontend
     depends_on:
       - backend
     ports:
-      - 4300:4300
-      - 65535:65535
+      - 127.0.0.1:4300:4300
+      - 127.0.0.1:4301:4301
     volumes:
       - ./frontend:/app
-    command: sh -c "cd /app && rm -rfd ./dist && ./node_modules/.bin/ember serve --port 4300 --proxy http://backend:3000 --live-reload-host frontend --live-reload-port 65535"
+      - frontend_node_modules:/app/node_modules
+      - frontend_bower_components:/app/bower_components
+    environment:
+      CHROME_BIN: /usr/bin/chromium
+    command: sh -c "cd /app && rm -rfd ./dist && ./node_modules/.bin/ember serve --watcher polling --host 0.0.0.0 --port 4300 --proxy http://backend:3000 --live-reload-host localhost --live-reload-port 4301"
     profiles:
       - dev
   native:
@@ -104,3 +107,5 @@ volumes:
   mongodb:
   redis:
   notused:
+  frontend_node_modules:
+  frontend_bower_components:

frontend/Dockerfile

@@ -1,17 +1,38 @@
-FROM --platform=linux/amd64 node:14.21
-
-# Force npm version 7
-RUN npm i -g npm@7
+FROM node:14.21.3-bullseye
 
 WORKDIR /app
 
-COPY package*.json bower.json .bowerrc .npmrc ./
+RUN apt-get update -qq && \
+      apt-get install -y --no-install-recommends chromium && \
+      rm -rf /var/lib/apt/lists/*
+
+RUN npm i -g npm@6.14.18
 
-RUN npm install
+COPY bin/docker-entrypoint /usr/local/bin/frontend-entrypoint
 
-# May no be needed in future version of node
+RUN chmod +x /usr/local/bin/frontend-entrypoint && \
+      chown -R node:node /app
+
+ENV CHROME_BIN=/usr/bin/chromium
 ENV OPENSSL_CONF=/dev/null
 
-COPY . .
+USER node
+
+COPY --chown=node:node package*.json bower.json .bowerrc .npmrc ./
+COPY --chown=node:node patches ./patches
+
+RUN npm install && \
+      { \
+        for file in package.json package-lock.json bower.json .bowerrc .npmrc; do \
+          [ -f "$file" ] && sha256sum "$file"; \
+        done; \
+        find patches -type f -print 2>/dev/null | sort | while IFS= read -r file; do \
+          sha256sum "$file"; \
+        done; \
+      } | sha256sum | awk '{print $1}' > ./node_modules/.docker-dependencies-checksum
+
+COPY --chown=node:node . .
+
+ENTRYPOINT ["/usr/local/bin/frontend-entrypoint"]
 
 CMD ["npm", "start"]

frontend/README.md

@@ -11,7 +11,6 @@ You will need the following things properly installed on your computer.
 * [Node.js](http://nodejs.org/) (with NPM)
 * [Bower](http://bower.io/)
 * [Ember CLI](http://ember-cli.com/)
-* [PhantomJS](http://phantomjs.org/)
 * [Google Chrome](https://google.com/chrome/)
 
 ## Installation

frontend/bin/docker-entrypoint

@@ -0,0 +1,28 @@
+#!/bin/sh
+set -e
+
+cd /app
+
+dependencies_checksum() {
+  {
+    for file in package.json package-lock.json bower.json .bowerrc .npmrc; do
+      [ -f "$file" ] && sha256sum "$file"
+    done
+
+    find patches -type f -print 2>/dev/null | sort | while IFS= read -r file; do
+      sha256sum "$file"
+    done
+  } | sha256sum | awk '{print $1}'
+}
+
+checksum_file="./node_modules/.docker-dependencies-checksum"
+current_checksum="$(dependencies_checksum)"
+
+if [ ! -x ./node_modules/.bin/ember ] ||
+  [ ! -f "$checksum_file" ] ||
+  [ "$(cat "$checksum_file")" != "$current_checksum" ]; then
+  npm install
+  printf '%s\n' "$current_checksum" > "$checksum_file"
+fi
+
+exec "$@"

frontend/env-example

@@ -0,0 +1,16 @@
+# Backend API port used by frontend/config/environment.js in development.
+PORT=3000
+
+# Frontend dev/static server port.
+FRONTEND_PORT=4300
+
+FACEBOOK_APP_ID=
+PUSHER_KEY=
+RECAPTCHA_SITE_KEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+FULLSTORY_ENABLED=
+FULLSTORY_ORG=
+HEAP_KEY=
+
+# Production-only host overrides.
+API_HOST=
+STATIC_URL=