Frontend node modernization / Beige Screen fix - #868
Open
CoryMCodes wants to merge 4 commits into
Open
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two related changes to the Ember frontend: it now installs and builds on modern Node
(18+, pinned at 22), and
.envvalues reach a cold build, which fixes the blank beigescreen on first load.
Modern Node support (Fixes CI front end builds)
frontend/package.jsonpinnednode 14.x/npm 6.xwithengine-strict=true, so a plainnpm installfailed outright on any current Node. npm 6 also refuses to run lifecycle scriptsas root, which silently skipped
postinstall(patch-package and bower install) while stillexiting 0 — the reason
--unsafe-permkept coming back. npm 7 dropped that privilege-droppingbehaviour, so moving off npm 6 removes the need for the flag rather than working around it.
enginesis nownode: >=18, dropping the npm and bower pinsfrontend/.nvmrcandfrontend/.tool-versions(and root.tool-versions) to Node 22,matching the image and CI
package-lock.jsonconverted to lockfileVersion 3, which enablesnpm ci. This is the bulkof the diff — a format conversion, not a dependency bump.
frontend/Dockerfileonnode:22-bookwormusingnpm ci; drops thenpm@6pin and theOPENSSL_CONF=/dev/nullworkaround, neither of which is needed nowfrontend/.nvmrcfor the main job; the matrix job tests 18, 20 and 24 to guard theenginesrangeallow_rootin.bowerrc, so installs need no flags in root containersBlank beige screen on cold load Fixes #719
.envvalues never reached a cold build.ember-cli-build.jspointedember-cli-dotenvat../backend/.env, a path that does not exist in the frontend container at all, and ember-clievaluates
config/environment.jsbefore addon config hooks run. The first build thereforeproduced a config with no
FACEBOOK_APP_ID,PUSHER_KEYorRECAPTCHA_SITE_KEY, while anyrebuild picked them up — which is why editing
config/environment.jsand refreshing appearedto fix it.
config/environment.jsnow loadsfrontend/.envitself, at the top of the file, before theconfig is built;
ember-cli-dotenvis replaced bydotenvdirectlyno-redeclarelint errors (var STATIC_URL) in the same fileconsole.log(process.env.FACEBOOK_APP_ID)workaround from README "Common Problems"Docs
Rewrote the frontend setup instructions in
README.mdandfrontend/README.md(Noderequirement,
cp env-example .env,npm installvsnpm ci,npm run dev, nosudo/--unsafe-perm) and updated theCLAUDE.mdgotchas.FACEBOOK_APP_IDis nowdocumented as only being needed for Facebook login.
Testing
intended
npm install, dev server, andnpm cias root on Node 18, all with no extra flagsnpm installis idempotent against the committed lockfile, so a first install no longerleaves a dirty working tree
npm test. Relying on CI for both.