Did a todo app

[bartonhammond]

Learned a lot - got to start somewhere ;)

I tried to get it on GitHub Pages but didn't work - https://bartonhammond.github.io/nue-todo/ - I just put the .dist/prod into /docs and published from branch. If someone could tell me why that fails, I'd try again.

Here's the source: https://github.com/bartonhammond/nue-todo

[nobkd]

Try adding --base /nue-todo to your build command.
I'll have to check, if that still works properly, but you can give it a try first if you want to.
I'll take a look tomorrow I guess.

[bartonhammond]

I built as nue build --production --base /nue-todo - looks the same in the console on GH

[bartonhammond]

I updated to from 1.1.42 to 1.2.0 and built again and the only change was in index.html with date-updated

[nobkd]

Sorry, I was in the wrong discussion, when writing a moment ago.

Was about the other way around, that bun changed some defaults, that may or may not have broken something in nue. I'm going to investigate, in a bit though

[nobkd]

Try making the following import relative (additionally to having the base option): import { $ } from '/@nue/view-transitions.js' -> import { $ } from '../@nue/view-transitions.js' it's not pretty, but should work for your spa.

I guess, the base option needs some love, to make components' js imports also work properly, when build to a different directory, and not just the ones in html

I would've also pointed you to the source code of the first todo app by nue, but it doesn't seem to exist anymore in this organization. (Here's the still deployed variant: https://nuejs.org/todomvc/)

[bartonhammond]

I've love to see the source for that todomvc. I've built the todo example using their ToDo site provided template w/ the css but I didn't want to go that route with nue as I am terrible w/ css. It's black magic to me. I've studied it and taken courses and worked with it extensively. then 3 months later i can't remember how it works.

Anyway - I did as you suggested... import { $ } from '../@nue/view-transitions.js'

I assume that the site works fine with a local http server it should work on GH so I tried this

nue-todo$ cd docs
docs$ python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
::1 - - [23/Jan/2025 09:04:57] "GET / HTTP/1.1" 200 -
::1 - - [23/Jan/2025 09:04:57] code 404, message File not found
::1 - - [23/Jan/2025 09:04:57] "GET /nue-todo/@nue/mount.js HTTP/1.1" 404 -
::1 - - [23/Jan/2025 09:04:57] code 404, message File not found
::1 - - [23/Jan/2025 09:04:57] "GET /nue-todo/@nue/view-transitions.js HTTP/1.1" 404 -
::1 - - [23/Jan/2025 09:04:57] code 404, message File not found
::1 - - [23/Jan/2025 09:04:57] "GET /img/avatar-rounded.jpg HTTP/1.1" 404 -

I also tried w/ simple-blog and get this:

prod$ python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
::1 - - [23/Jan/2025 09:09:46] "GET / HTTP/1.1" 200 -
::1 - - [23/Jan/2025 09:09:46] code 404, message File not found
::1 - - [23/Jan/2025 09:09:46] "GET /simple-blog/@nue/view-transitions.js HTTP/1.1" 404 -

[bartonhammond]

Thanks @nobkd

Works! https://bartonhammond.github.io/nue-todo/

I used this to build and move to dir

rm -rf ./nue-todo
nue build --production --base /nue-todo
cp -r ./.dist/prod ./
mv ./prod ./nue-todo

static.yml is the file in /.github/workflows:

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload entire repository
          path: './nue-todo'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

[bartonhammond]

One last thing before I close this.

My "github" image for the footer shows in dev but not in production https://bartonhammond.github.io/nue-todo/ - it's a broken link. I verified the 'svg' is in the GH pages directory since I'm doing a static action.

[bartonhammond]

To fix the image in the footer, I created a prod-site.yaml and updated my script

rm -rf ./nue-todo
nue build --production --base /nue-todo --environment prod-site.yaml
cp -r ./.dist/prod ./
mv ./prod ./nue-todo
``

[nobkd]

Nue notes:

• you don't have to repeat the whole YAML file. The default site.yaml is used, and keys present in both are overridden with the ones from the env file.
• You could also just make the link in the site.yaml relative too, as your spa is on a single page. e.g. ./img/github.svg, then you don't need the env file (for this project)
• you can use dist: nue-todo (I think it's relative to project root) instead of your script doing the moving part.

Build notes:

• your build script sets a directory to upload files from. The name and location of your directory doesn't matter. It could have stayed docs, or whatever you like. GitHub uploads to a subdirectory (with the name of the repo), if it's not the user-page repo (named <user>.github.io). (therefore the base option)
• if you push your built files to gh anyway, you don't need to use a publishing workflow. You can just set GitHub Pages to use the dir with the built files (I think it can only use docs or project root though... :( too bad)

Congrats on your Nue SPA :D

[bartonhammond]

Made the recommendations - thanks!

[bartonhammond]

Thanks for all the help!

[tipiirai]

WOW! Really happy to see both the TODO app and the commitment on both of you guys! Feel a little bad that the client-side library is so beta still: tiny issues start to emerge when you start mixing nested loops and conditionals.