Does theme dev *require* a local installation?

Developer help
1

Hi ghost devs!

Currently I have followed the instructions for a local installation (Ubuntu current) for my theme development. It works as expected, including the automatic reloads from my theme modifications.

I wonder if I can do this is two other ways?

1 - On the same ubuntu machine, run a docker ghost in development mode and then access that in my browser?

2 - On a different ubuntu machine (I have a raspberry pi ubuntu server for this sort of thing) run a docker ghost in development mode and then access that in my browser?

Will auto reload work with either or both methods?

I suppose if I do this, then the difference will be some network latency and db access latency, but the advantage is I will be working with a full version of ghost instead of a kluged version to use an in-memory db.

2

As far as I understand it, at the ‘testing things out, no real load’ level, there are zero differences between a local install with sqllite and a production install. They both use the knex adapter, so the differences under the hood are invisible at the theme level.

If you’re going to do theme dev, you probably want your cycle time to be as short as possible. In other words, you want to be able to see the effects of your changes as quickly as possible. So you do NOT want to make a zip and upload it each time. Deploying with a github action would be better than that, but not as good as hitting save and the changes are live. An avoiding having to manually trigger a build step is going to be a big deal.

3

Thanks Cathy

Typically I work directly with the theme Dev on the server, and use vdscode remote access so that it appears local to me on my desktop. Thus, nothing will need to be uploaded, as it is already there. This works awesomely when doing nextjs or other nodeserver dev work, so I suspect it will work here too.

4

Good news. The answer is no, this works as expected using the official ghost docker image as I configured it.

My configuration:

edit docker compose file

ghost:latest container:

“Id”: “sha256:a6836f379cf3fff383d58f1d65a4ca2ae6a29945b530d1456875ceee462b77af”

        "NODE_VERSION=18.20.0",
        "YARN_VERSION=1.22.19",
        "GOSU_VERSION=1.16",
        "NODE_ENV=production",
        "GHOST_CLI_VERSION=1.26.0",
        "GHOST_INSTALL=/var/lib/ghost",
        "GHOST_CONTENT=/var/lib/ghost/content",
        "GHOST_VERSION=5.81.1"

modified mariadb

I am using a Raspberry Pi 4b as a server, which is an arm 7 machine. Mariadb doesn’t post official docker containers for that architecture, so I modified the docker compose file to use this instead:

image: yobasystems/alpine-mariadb:latest
#image: mariadb:latest
#platform: linux/arm64
platform: linux/arm/v7

Maybe you can use an arm7 version of mysql official, I didn’t look into that, and I don’t know if ghost supports mysql officially or not.

If you don’t have a weirdo cpu architecture like I do, then you don’t need to modify this file to use a different container

volumes

The docker compose file creates a volume on your host where the files will live, essentially they are visible to both the container and the host. With this configuration, your theme work will be persisistent across container restarts. This is important::

volumes:
- /home/ghost/content:/var/lib/ghost/content

make sure ghost runs in dev mode
under Environment for the ghost container, add this line:

NODE_ENV: development

Do not run production servers with this line! If you go to production with this container, be sure to shut down the container, remove or comment out the line, and restart the server.

start docker compose file

#docker compose up -d

clone your theme

I put mine in /home/ghost/themes/mytheme

restart your container

I am using vscode with the docker extension to manage containers. I restart from there so that ghost admin can see my theme, then I activate it.

activate your theme

Do this in the ghost admin as usual

edit your theme and run the npm run dev command in the theme directory

In a different vscode window, using the Remote - SSH extension to open a workspace for the folder home/ghost/themes/mytheme.

Open a terminal with the working directory at home/ghost/themes/mytheme, then

$ npm update (only necessary once)
$ npm run dev (leave this running)

Now you can edit your files and the changes should be reflected in the browser at ip address:2368/rest-of-url