Add Node.js Support

[jerico]

To enable Node.js in Local Server, add the following configuration in the project's composer.json:

{
  "extra": {
    "altis": {
      "modules": {
        "local-server": {
          "nodejs": {
            "path": "../altis-nodejs-skeleton"
          }
        }
      }
    }
  }
}

path refers to the frontend code directory

• Add Node.js container when Node.js configuration exists
• Add documentation
• Add healthcheck
• Echo Node.js URL when startup completes
• Add config to setup Node.js version to use
  • Read from extra.altis.modules.local-server.nodejs.version {$app}/package.json
  • Based off how we set version in TFA https://github.com/humanmade/terraform-app-stack/blob/5a70129f5699b663347be2c2919b63ba98ab6015/modules/nodejs/buildspec.yml#L18

https://github.com/humanmade/product-dev/issues/1589

[joehoyle]

Really great @jerico!

[mikelittle]

I tried a new altis-skeleton with altis-nodejs-skeleton in a nodejs subdirectory. I had thought the nodejs code must live in the same repos as the Altis code.
Anyway, I saw no evidence of it having run npm run dev.
I tried looking at the nodejs container logs (I had to use vs-code) and it doesn't seem to show npm run dev instead it looks like it may have run next dev

added 23 packages, and audited 24 packages in 38s

3 packages are looking for funding
  run `npm fund` for details

1 high severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

> [email protected] dev
> next dev

   ▲ Next.js 14.0.2
   - Local:        http://localhost:3000

 ✓ Ready in 1886ms
 ○ Compiling / ...
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
 ✓ Compiled / in 2.1s (201 modules)

after that, there are only get requests shown when I refresh my browser. Changing index.jsx does nothing.

[mikelittle]

Can we get an entry in composer server logs for nodejs, please?

[jerico]

I tried a new altis-skeleton with altis-nodejs-skeleton in a nodejs subdirectory. I had thought the nodejs code must live in the same repos as the Altis code.

Is this decision documented somewhere? I based this off how thehourglass manage their repo. They have front-end and backend on a separate repo.

Our skeleton uses next.js, internally it's running the npm run dev https://github.com/humanmade/altis-local-server/pull/710/files#diff-6e1aa008277f9688efac7746b347e1e418cfc7b7e36f5bec209e48022d735022R263

I'll check the auto-recompile and adding log entry.

[jerico]

@mikelittle

• Auto-recompile and reload working correctly for me.
• Added nodejs entry in composer server logs

We also support having the nodejs code in the same repository by pointing to it using nodejs.path

Screen.Recording.2024-07-17.at.16.36.55.mov

[mikelittle]

Is this decision documented somewhere? I based this off how thehourglass manage their repo. They have front-end and backend on a separate repo.

I got the node app location information from this notion page but it must have moved on. No worries.

The live reload still doesn't work for me. But I'll put that down to my setup.

[rmccue]

The docs are the better place to consult; they're separate repos as we changed that decision based on feedback. It does also make me wonder if we might want the server separate as a result 🤔

[jerico]

@rmccue Separate server meaning separate from Local Server?

Given our current setup, it makes sense for it to be part of the Local Server for now. When deployed, Node.js runs alongside WordPress. We currently assume that there's always a WordPress instance paired with the front-end in Altis.

[mikelittle]

Looks good to me. Well done with this.

[hm-backport]

The backport to v19-branch failed:

Commits ["366ccaa5770ebc40e293ca310b9b551a8f4f90c5","9ddfe5ec9a5f3c4891169b9651cc4aac7487532b","e505f0e138a69f0e3719aed8a9fb8cba37e5f93d","dc97da5c283e982583254bab825745fbde08a485","85c0b8746e2690bdf0f2a3a987fefc69e39719ea","e5e8c2d0481948366b20d9cb95e2fe04b68886a2","858158cced167bee9d987e6da31ae3b7d8d4f895","fbd0a6b61e1c1f8462ae288068113d44ba8d078d","f7b893b3f8e9b124b7bec042b40bc9742c5431ff","c2fee48dcbb87d0813b40168db8888f5f5d6e759","de954686d599e79198dbcbb16aed99dc092f8a36","63ae1a1f4e5133c78acd3625dd6aeceab20905de","d100534ff79164b506cfdbad7a36e45b0c5c57ea","556d894c4d21fb9e58317cb43889f50870d53d6d","87c188fe434acb1f803a68651c63a895618c1709","58fb61985df7b410946768ee253e6ac44338ac4a"] could not be cherry-picked on top of v19-branch

To backport manually, run these commands in your terminal:

# Fetch latest updates from GitHub.
git fetch
# Create new working tree.
git worktree add .worktrees/backport v19-branch
# Navigate to the new directory.
cd .worktrees/backport
# Cherry-pick all the commits of this pull request and resolve the likely conflicts.
git cherry-pick 366ccaa5770ebc40e293ca310b9b551a8f4f90c5 9ddfe5ec9a5f3c4891169b9651cc4aac7487532b e505f0e138a69f0e3719aed8a9fb8cba37e5f93d dc97da5c283e982583254bab825745fbde08a485 85c0b8746e2690bdf0f2a3a987fefc69e39719ea e5e8c2d0481948366b20d9cb95e2fe04b68886a2 858158cced167bee9d987e6da31ae3b7d8d4f895 fbd0a6b61e1c1f8462ae288068113d44ba8d078d f7b893b3f8e9b124b7bec042b40bc9742c5431ff c2fee48dcbb87d0813b40168db8888f5f5d6e759 de954686d599e79198dbcbb16aed99dc092f8a36 63ae1a1f4e5133c78acd3625dd6aeceab20905de d100534ff79164b506cfdbad7a36e45b0c5c57ea 556d894c4d21fb9e58317cb43889f50870d53d6d 87c188fe434acb1f803a68651c63a895618c1709 58fb61985df7b410946768ee253e6ac44338ac4a
# Create a new branch with these backported commits.
git checkout -b backport-710-to-v19-branch
# Push it to GitHub.
git push --set-upstream origin backport-710-to-v19-branch
# Go back to the original working tree.
cd ../..
# Delete the working tree.
git worktree remove .worktrees/backport

Then, create a pull request where the base branch is v19-branch and the compare/head branch is backport-710-to-v19-branch.