Starter theme w livereload docker and traefik

Developer help
1

live reload is working but chrome isn’t updating automatically

i’m also receiving this error in chrome dev inspect

index.js?v=db418a61b4:1 GET https://ghost.m720.com:35729/livereload.js?snipver=1 net::ERR_CONNECTION_REFUSED

(anonymous) @ index.js?v=db418a61b4:1
(anonymous) @ index.js?v=db418a61b4:1

Latest ghost installed through docker compose
w a sep traefik reverse proxy running ghost service into ghost.m720.com

i’m also working under the starter theme which should have livereload baked into it through rollupjs

https://github.com/TryGhost/Starter

  "rollup-plugin-livereload": "^2.0.5",
  "rollup-plugin-postcss": "^4.0.2" 

  ghost:
    image: ${GHOST_IMAGE_TAG}
    container_name: ghost_service
    volumes:
      - ghost-data:${DATA_PATH}
      - /home/k/docker/ghost/data/:/var/lib/ghost/content/themes
    expose:
      - "35729"
    environment:
      NODE_ENV: ${GHOST_DEV_MODE}
      url: ${GHOST_URL}
      database__client: mysql
      database__connection__host: ghost_mysql
      database__connection__database: ${GHOST_DB_NAME}
      database__connection__user: ${GHOST_DB_USER}
      database__connection__password: ${GHOST_DB_PASSWORD}
    networks:
      - ghost-network
      - traefik-network
    healthcheck:
      test: timeout 10s bash -c ':> /dev/tcp/127.0.0.1/2368' || exit 1
      interval: 10s
      timeout: 5s
      retries: 3
      start_period: 90s
    labels:
      - traefik.enable=true
      - "traefik.http.services.ghost.loadbalancer.passhostheader=true"
      - "traefik.docker.network=traefik-network"      
      - traefik.http.routers.ghost_public.rule=Host(`ghost.m720.com`)
      - traefik.http.routers.ghost_public.entrypoints=websecure
      - traefik.http.routers.ghost_public.tls=true
    restart: unless-stopped
    depends_on:
      mysql:
        condition: service_healthy

i then run `

docker exec -it ghost_service sh

`

and run

npm run dev

inside of the theme folder and that part works 100%

Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest
Why you should do it regularly: GitHub - browserslist/update-db: CLI tool to update caniuse-lite to refresh target browsers from Browserslist config
rollup v3.21.7
bundles assets/js/index.js → assets/built…
LiveReload enabled
created assets/built in 1.1s

[2025-03-22 12:03:24] waiting for changes…

but chrome refuses to auto update when i save changes to a .css file

what am i doing wrong? i’ve tried a bunch of different things but hoping someone knows exactly how to get this rolling easily enough. thanks for your time!

here’s my rollup

import { defineConfig } from 'rollup';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import terser from '@rollup/plugin-terser';
import postcss from 'rollup-plugin-postcss';
import atImport from 'postcss-import';
import postcssPresetEnv from 'postcss-preset-env';
import { resolve } from "path";
import livereload from 'rollup-plugin-livereload';

export default defineConfig({
    input: 'assets/js/index.js',
    output: {
        dir: "assets/built",
        sourcemap: true,
        format: 'iife',
        plugins: [terser()]
    },
    watch: {
        clearScreen: false // this disables screen clearing?
    },
    plugins: [
        commonjs(), 
        nodeResolve(), 
        babel({ babelHelpers: 'bundled' }),
        postcss({
            extract: true,
            sourceMap: true,
            plugins: [
                atImport(),
                postcssPresetEnv({})
            ], 
            minimize: true,
        }),
        process.env.BUILD !== "production" && livereload({
            watch: resolve('.'),
            verbose: true,
            extraExts: ['hbs'],
            exclusions: [resolve('node_modules')],
            clearScreen: false
        }),
    ]
})
2

I’d be looking hard at the reverse proxy, given the browser console logs seem to show requests not getting through

3

okay, so i just figured this out… hopefully this helps someone out in the future

the trick was to enable https on the livereload plugin within rollup
i run traefik with wildcard ssl cert so i just copied it over into my theme directory and bob’s your uncle. also, i had to open up the docke port that’s running the npm run dev watcher @ 51823:51823…

    process.env.BUILD !== "production" && livereload({
        watch: resolve('.'),
        extraExts: ['hbs'],
        exclusions: [resolve('node_modules')],
        clearScreen: false,
        port: 51823,
        https: {
            key: fs.readFileSync(resolve('./traefik.key')),
            cert: fs.readFileSync(resolve('./traefik.crt'))
        }
    }),
1 Like