Demo blog and AWS Amplify only loads the first page correctly

[jduprey]

Hi, I'm trying nuekit out to host my personal blog. I'm using AWS Amplify to host. Placeholder: https://www.iduprey.com/

With some trial and error I got Amplify to build and deploy the site using PR previews. However, it only seems to load the first page correctly. If I try to load one of the blog posts, the image fails and it doesn't load the page. The reason for this, I think, is that it is not handling the relative paths correctly. I noticed this same behavior when loading the build from file in my browser, but it worked fine when serving with nue serve .. or even volta http-server.

I used the "Simple blog" template:

You can see the PR hosted here: https://pr-1.d3s4k6lbe46iiq.amplifyapp.com/ - user/pass: admin / admin4admin (I'll change the password and the URL is obfuscated anyway...)

Any idea what I or AWS Amplify is doing wrong? Do I need to configure some routing on the server side or...?

Some additional details:

amplify.yml:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm install 21.5.0
        - nvm use 21.5.0 && node --version
        - node $(which npm) install bun --global
        - node $(which npm) install nuekit@0.1.7 --global
    build:
      commands:
        - nue build --production
  artifacts:
    baseDirectory: .dist/prod
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

I had to tell Amplify to use a newer image for this to work with the newer version of node:

[tipiirai]

Perhaps you can fix this by adding a slash character here between {base} and { post.dir } here on layout.html?

<img src="{base}/{ post.dir }/{ post.hero }" width="400" height="200"

I'm happy to see you got this far with Amplify. Nuekit is currently missing this important deployment piece until "Nue Cloud" is ready. Any challenges or was it straightforward?

[jduprey]

Gah. You are right that {base} was the problem and I should have seen that. duh.

Base isn't set anywhere. Setting it in my site.yaml to base:: // didn't work. Setting it to http://localhost:8181 of course worked locally but then I'd have to remember to change it on deploy and at least for PR previews, I can't know the host ahead of time. So I got ride of the use of { base } in my layout and just use full paths.

I still had page loading errors.. always seemed to load the front page only.. I then realized Amplify had some default rewrite rules that were redirecting ALL URLs to index.html! I removed the following:

...,
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    },
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    }

I removed those and this got the PR preview to build and deploy correctly. (huzzah!)

However, when I merged the PR to main, the build is now failing on nue build --production:

Amplify log.txt:

...
2024-01-04T04:40:56.999Z [INFO]: node_modules/accepts/index.js
2024-01-04T04:40:57.000Z [INFO]: {
                                 text: "The constant \"defaultOptions\" must be initialized",
                                 lineText: "export const defaultOptions: Options",
                                 namespace: "file",
                                 line: 748,
                                 column: 14,
                                 length: 14,
                                 offset: 19233,
                                 title: "Syntax error",
                                 }
2024-01-04T04:40:57.004Z [INFO]: # Completed phase: build

The same build works fine locally, with the same version of node.. so.. I'm not sure what is going on. Perhaps a minor update to a transient dep.. that is breaking?

To answer your question.. getting amplify working will be pretty straight forward once I find all my stupid mistakes and get nue installed correctly... (See my initial post at the top: amplify.yml, use a newer Linux build image, and from this post, remove some rewrite rules.)

[tipiirai]

I hope some day Nue will support multiple cloud services for distribution, but my personal time/energy will go to Nue Cloud, which will operate on top of Deno Deploy and Bunny CDN.

btw: I have no idea why node_modules/accepts/index.js is causing error and what the "accepts" package is.

Assigning you, @jduprey to this if you don't mind.

[jduprey]

Given the build works fine for the or preview release, I have to believe there is some sort of build cache issue. Accepts is standard node package, I believe.

If/when I figure it out, I'll report back.

[jduprey]

Time and necessity allowed me to revisit this.

When I last left this nue build --production was failing in the amplifier build env, with:

{
text: "No matching export in \"node:path\" for import \"dirname\"",
lineText: "import { dirname } from 'node:path'",
namespace: "file",
line: 6,
column: 10,
length: 7,
offset: 262,
title: "Syntax error",
}

This is how I got nue to work inside of an Amplifier build env:

1. upgraded to the latest version of nue (just for grins)
2. Installed bun globally, but then used bun to install my local package.json where nue was the only dep
3. I used bun to run nue

amplify.yml:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm install 21.5.0
        - nvm use 21.5.0 
        - node --version
        - node $(which npm) install bun --global
        - bun install
    build:
      commands:
        - pwd
        - ls -latr 
        - nvm use 21.5.0
        - which node
        - export PATH=./node_modules/.bin:$PATH
        - node --version
        - bun run nue build --production
  artifacts:
    baseDirectory: .dist/prod/
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

package.json:

{
  "name": "iduprey.com",
  "version": "1.0.0",
  "description": "My web site.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jduprey/iduprey.com.git"
  },
  "keywords": [
    "blog",
  ],
  "author": "John Duprey",
  "license": "UNLICENSED",
  "bugs": {
    "url": "https://github.com/jduprey/iduprey.com/issues"
  },
  "homepage": "https://www.iduprey.com",
  "dependencies": {
    "nuekit": "^0.5.3"
  }
}

I never resolved what it was about this environment that caused nue build to fail by installing nuekit globally, and even when I installed locally I still had issues until I used bun run nue - I'm assuming it is doing the proper sandboxing to prevent whatever global node stuff is installed from interfering with nue's execution. ¯_(ツ)_/¯

AWS Amplify is not your target hosting platform, but hopefully this helps others that might want to run it there.