I previously had a working local install of both atlas-wpengine.com-frontend (the Next.js-based front end of the new website) and atlas-wpengine.com-backend (the Docker-based back-end).
At some point I pulled changes from Github and did some tinkering and this broke.
This posts documents some of the issues I had getting it back up and running.
1. Inconsistent branches
Turns out one of the causes of my issues was that I had inconsistent branches. I was using master branch of the backend repo and the development branch of the frontend repo.
The Drewl front-end developers don’t run a local copy of WordPress. They connect their local front end sites to the live or staging site.
I can’t see a simple way to ensure that you’re always running compatible branches. But be aware that having different or out of date branches can be an issue in this decoupled world.
2. Build/dev script issues
The second issue was that I was confused by the conventions around build/dev scripts and my lack of understanding of npm “Workspaces”. AND… I didn’t read the README! 🤦
I was running:
npm run faust:start -w apps/front-website
This used to work for me locally, and I thought that this was running a dev server. But this runs a production server and was asking me to run the production build first so that it had something to serve.
However, running
npm run faust:build -w apps/front-website
gave me errors and a failing build because of issue 1 (see above).
What I needed to do locally was to run:
npm run faust:dev -w front-website
(Part of my confusion is that I’ve used JS frameworks in the past where start was the development command. Electron, for example…)
It seems that npm start is the convention for starting a production server. So watch out for that.
ASIDE: Workspaces, scripts, and faust/Atlas
I also note that this project uses npm Workspaces. This is like sub-modules – it allows multiple npm packages to be present in a single repository (the “monorepo” approach).
What confused me is that the front end repository also has a root package.json with some npm scripts in:
"wpe-build": "npm run faust:build -w $WORKSPACE",
"start": "npm run faust:start -w $WORKSPACE",I wasn’t sure how the $WORKSPACE got passed into this.
Turns out you can ignore this on local dev. This is actually a Faust/Atlas thing. These two commands are used by Atlas to build and start the site.
While I’ve not discovered the exact mechanism by which environment variables get into package.json, the $WORKSPACE is an environment variable and is set in the Atlas environment variables configuration in the WPE Portal.
The scripts you want to run in local dev are those in apps/front-website/package.json and yes, these are documented in the README!