Skip to content

Frontend node modernization / Beige Screen fix - #868

Open
CoryMCodes wants to merge 4 commits into
rubyforgood:masterfrom
CoryMCodes:frontend-node-modernization
Open

Frontend node modernization / Beige Screen fix#868
CoryMCodes wants to merge 4 commits into
rubyforgood:masterfrom
CoryMCodes:frontend-node-modernization

Conversation

@CoryMCodes

Copy link
Copy Markdown
Collaborator

Summary

Two related changes to the Ember frontend: it now installs and builds on modern Node
(18+, pinned at 22), and .env values reach a cold build, which fixes the blank beige
screen on first load.

Modern Node support (Fixes CI front end builds)

frontend/package.json pinned node 14.x / npm 6.x with engine-strict=true, so a plain
npm install failed outright on any current Node. npm 6 also refuses to run lifecycle scripts
as root, which silently skipped postinstall (patch-package and bower install) while still
exiting 0 — the reason --unsafe-perm kept coming back. npm 7 dropped that privilege-dropping
behaviour, so moving off npm 6 removes the need for the flag rather than working around it.

  • engines is now node: >=18, dropping the npm and bower pins
  • frontend/.nvmrc and frontend/.tool-versions (and root .tool-versions) to Node 22,
    matching the image and CI
  • package-lock.json converted to lockfileVersion 3, which enables npm ci. This is the bulk
    of the diff — a format conversion, not a dependency bump.
  • frontend/Dockerfile on node:22-bookworm using npm ci; drops the npm@6 pin and the
    OPENSSL_CONF=/dev/null workaround, neither of which is needed now
  • CI reads frontend/.nvmrc for the main job; the matrix job tests 18, 20 and 24 to guard the
    engines range
  • allow_root in .bowerrc, so installs need no flags in root containers

Blank beige screen on cold load Fixes #719

.env values never reached a cold build. ember-cli-build.js pointed ember-cli-dotenv at
../backend/.env, a path that does not exist in the frontend container at all, and ember-cli
evaluates config/environment.js before addon config hooks run. The first build therefore
produced a config with no FACEBOOK_APP_ID, PUSHER_KEY or RECAPTCHA_SITE_KEY, while any
rebuild picked them up — which is why editing config/environment.js and refreshing appeared
to fix it.

  • config/environment.js now loads frontend/.env itself, at the top of the file, before the
    config is built; ember-cli-dotenv is replaced by dotenv directly
  • Fixes two pre-existing no-redeclare lint errors (var STATIC_URL) in the same file
  • Drops the console.log(process.env.FACEBOOK_APP_ID) workaround from README "Common Problems"

Docs

Rewrote the frontend setup instructions in README.md and frontend/README.md (Node
requirement, cp env-example .env, npm install vs npm ci, npm run dev, no
sudo/--unsafe-perm) and updated the CLAUDE.md gotchas. FACEBOOK_APP_ID is now
documented as only being needed for Facebook login.

Testing

  • Fresh install and build checked on Node 14, 18, 22 and 24 — 14 stops at the engine check, as
    intended
  • Clean-clone npm install, dev server, and npm ci as root on Node 18, all with no extra flags
  • npm install is idempotent against the committed lockfile, so a first install no longer
    leaves a dirty working tree
  • Not run locally: the Docker image build and npm test. Relying on CI for both.

CoryMCodes and others added 4 commits August 3, 2026 20:36
The Ember app pinned Node 14.x / npm 6.x with engine-strict=true, so a plain
npm install failed outright on any current Node. npm 6 also refuses to run
lifecycle scripts as root, which silently skipped postinstall (patch-package
and bower install) while still exiting 0 -- the reason --unsafe-perm kept
coming back. npm 7 dropped that privilege-dropping behaviour, so moving off
npm 6 removes the need for the flag rather than working around it.

Separately, .env values never reached a cold build. ember-cli-build.js pointed
dotenv at ../backend/.env, a path that does not exist in the frontend
container at all, and ember-cli evaluates config/environment.js before addon
config hooks run. The first build therefore produced a config with no
FACEBOOK_APP_ID, PUSHER_KEY or RECAPTCHA_SITE_KEY, while any rebuild picked
them up -- which is why editing config/environment.js and refreshing appeared
to fix the blank beige screen. config/environment.js now loads frontend/.env
itself, before the config is built.

- engines: node >= 18, dropping the npm and bower pins
- .nvmrc and .tool-versions to Node 22, matching the image and CI
- package-lock.json to lockfileVersion 3, which enables npm ci
- Dockerfile on node:22-bookworm using npm ci; drop the npm@6 pin and the
  OPENSSL_CONF workaround, neither of which is needed now
- CI reads frontend/.nvmrc and tests 18, 20 and 24 to guard the engines range
- bower allow_root, so installs need no flags in root containers
- fix two pre-existing no-redeclare lint errors in config/environment.js
- rewrite the frontend setup instructions

Verified a fresh install and build on Node 14, 18, 22 and 24, plus a
clean-clone npm install, dev server and npm ci as root on Node 18 with no
extra flags. The Docker image build and npm test were not run locally.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
A plain npm install enriches the converted lockfile with license fields and
settles acorn's placement, so leaving it out meant every contributor's first
install produced a dirty working tree. Commit the settled version: npm install
is now idempotent against it, and npm ci reproduces the same 2327 packages.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Updated common problems section to clarify the fix for the blank screen issue on first load.
Clarify npm install process and emphasize using npm ci.
@CoryMCodes
CoryMCodes requested a review from compwron August 3, 2026 21:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Blank login page on first load

1 participant