What is live-reload and how do I get it to work

Themes
1

My goal is to develop a theme for my site, but right now I am working with either Casper or Source themes until I can address this issue.

It is my understanding that since I have installed ghost-local (Ubuntu) that when I edit a .hbs file in vscode, I should see the changes immediately when I return to the browser without any changes on my part.

When I google this, there seems to be mixed opinions on if this is in fact the behavior out of the box.

I am not seeing this behavior.

When I change the .hbs file and then return the the browers, if I do a shift-reload, my changes do show up.

This is the case for both Source and Casper themes.

My questions are:

  1. Am I correct that there is a way to have the page automatically update with my changes? If not, I would like a definitive answer and I can proceed accordingly. But if so, then I would like to enable that.

  2. If so, then how to I get there from here? What can I do to resolve the npm conflicts in the theme shown below?

Here is info on my system:

$ ghost version

Running in development mode

Ghost-CLI version: 1.26.0
Ghost version: 5.80.5 (at ~/projects/ghost06)

$ npm version
{
npm: ‘9.5.1’,
node: ‘18.16.1’,
acorn: ‘8.8.2’,
ada: ‘1.0.4’,
ares: ‘1.19.1’,
brotli: ‘1.0.9’,
cldr: ‘42.0’,
icu: ‘72.1’,
llhttp: ‘6.0.11’,
modules: ‘108’,
napi: ‘8’,
nghttp2: ‘1.52.0’,
nghttp3: ‘0.7.0’,
ngtcp2: ‘0.8.1’,
openssl: ‘3.0.9+quic’,
simdutf: ‘3.2.2’,
tz: ‘2022g’,
undici: ‘5.21.0’,
unicode: ‘15.0’,
uv: ‘1.44.2’,
uvwasi: ‘0.0.15’,
v8: ‘10.2.154.26-node.26’,
zlib: ‘1.2.13’
}

$ npm update

up to date, audited 1 package in 112ms

found 0 vulnerabilities

from the theme directory:

casper$ npm update
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: casper@5.7.1
npm ERR! Found: postcss@8.2.13
npm ERR! node_modules/postcss
npm ERR! dev postcss@“8.2.13” from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer postcss@“^8.2.15” from cssnano@5.1.12
npm ERR! node_modules/cssnano
npm ERR! dev cssnano@“5.1.12” from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:

npm ERR! A complete log of this run can be found in:

2

The two themes you mentioned are weird, because they’re linked from the content/themes folder to a current folder that Ghost will update. You don’t want that. So… you want to get a copy you can safely edit and that’ll live in the content/themes folder. I usually just download it from the Ghost install, give the zip file a new name, then upload it again. That’ll cause it to be in the themes folder.

Then, run npm install from the themes/content/(source or casper) folder, that’ll cause the dependencies for building the theme to get installed.

Then you can run gulp, which will cause the theme assets to be rebuilt when you change them. Depending on the theme, that may also get you live reload in the browser. (It varies by theme.)

Note that if you add a new .hbs file, you’ll probably need to restart Ghost to get Ghost to recognize it, but edits will be as simple as just reloading the browser (or not even that if your livereload is working).

Tip: Don’t start Ghost with ghost start. Use `ghost run -D, which will get you live logging – super useful when you’re getting error messages to have them right there, and then you can see the output of the {{log}} helper.

3

Thanks. Most of that I have already tried. I don’t intend to do actual development on the original Source or Casper files, for now I just want to see the live reload happen. I didn’t say, but I am a very experienced full stack engineer, particularly with wordpress and NextJS. Once I see this working, I will do a whole new install and figure out what theme I want to actually start with and symlink that somewhere to avoid getting overwritten.

I have watched the log files, but even that is confusing to me. For instance, ghost start tells me I am running in development mode, but without the log files showing. In that case, I have run ghost log -f to watch the logs, which I suspect has the same effect together as ghost run -D.

So far, the logs show me everything as expected except the live reload.

With ghost running in development mode, I have also run npm dev which starts gulp, and that also works as expected, I can see the output that it rebuilds the theme based on the saved file.

But it doesn’t reload, and I wonder if it is even necessary to do that, because both with and without gulp, I can reload my page in the browser and get the same results. What if anything is different when I have gulp running vs when I don’t?

I can’t help but wonder if the npm module version mismatches I listed in my OP are keeping gulp from actually triggering the reload? But why would I have mismatches in a stock install? Is this a known bug?

4

The starter theme is reported to have livereload on. Might be worth starting from there, or at least investigating how it’s doing it. Here’s the announcement about it:

5

That link certainly seems to suggest it will do what I want. I will try it and report back.

6

So now I am getting pretty much the same result with this configuration:

1 ) did clean ghost install and theme install as described here: Incomplete Documentation on Local Development · Issue #59 · TryGhost/Starter · GitHub

1a) instead of yarn on theme, did npm install

1b) instead of yarn on ghost install, did npm install

  1. had to install rollup for use with this theme instead of gulp: npm install rollup -g

  2. start ghost with ghost run -D

  3. in theme directory, run rollup command as listed in package.json/scripts/dev: rollup -c --environment BUILD:development -w

This indicates that it is waiting for changes:

rollup v4.13.0
bundles assets/js/index.js → assets/built…
LiveReload enabled
created assets/built in 1.5s

[2024-03-22 18:26:47] waiting for changes…

  1. in vscode, modify index.hbs

Result: rollup doesn’t respond to changes.

  1. in chrome (and also firefox) click refresh of home page shows changes in index.hbs, but no live reload.

Expected behavior: “Livereload by default. See changes instantly in the browser whenever you save a file” as listed on GitHub - TryGhost/Starter: A development starter theme for Ghost

I feel like I must be missing something simple and obvious here.

Here are ghost doctor results:

$ ghost doctor

Love open source? We’re hiring JavaScript Engineers to work on Ghost full-time.

Running in development mode

:heavy_check_mark: Checking system Node.js version - found v18.16.1
:information_source: Ensuring user is not logged in as ghost user [skipped]
:information_source: Checking if logged in user is directory owner [skipped]
:heavy_check_mark: Checking current folder permissions
:heavy_check_mark: Validating config
:heavy_check_mark: Checking memory availability
:heavy_check_mark: Checking binary dependencies
:heavy_check_mark: Checking free space

does it matter what user I run ghost as or from?

7

You do need to have livereload already going when you load the page, but it sounds like that’s the case?

Can you check dev tools for console logging? IIRC, Livereload modifies the page a bit to load some javascript that triggers the reload, and I’m wondering if there’s an error shown that might be informative.

8

Thanks for your attention! How should I do that?

9

D’oh. That last message was posted at writing time in Friday. I guess I was already checked out lol. I’ll post the logs and the steps on Monday or Tuesday.

1 Like
10

UPDATE:

I did another fresh ghost install, and all of what I think are the same steps, but this time it is working. maybe there was an npm module that had a bug that got fixed in the last 4 days? I am not going to check the old installs for diffs, because as long as it works now, I am good and can proceed. But if someone in the future comes across this, then keep that possibility in mind.

Thanks for your help!

1 Like
11

Just another update for people from the future:

When checking in my code of the theme, it appears at first glace that the postcss package was missing earlier, or upgraded, and maybe that is why the live reload wasn’t working.

In any case, it seems to be there now, for my purposes I will accept that I happened to be trying this while there was a borked release of something regarding dependencies and that it got repaired while I waited over the weekend. This is the best outcome for me and I was hoping something like that would happen because otherwise it was going to be ugly for me to chase down.

2 Likes