Develop casper theme on linux / npm/node/grunt/gulp/local/global nightmare

Themes
1

Anybody managed to get the casper development environment running on linux? I encounter horrors with gulp, grunt npm hell, local, global etc, etc
I was not able to find any instruction for this, spend already hours to get it running.
Was not able to run yarn install, yarn dev. Million errors and problems on any linux distribution and every environment. npm, yarn, grunt, gulp <-- all can be installed in a million ways.

I can’t imagine that people have these problems :frowning:
Is there any working instruction for linux, or a docker image where it;s possible to set up casper development environment?
Tried official ghost and mmornati/docker-ghostblog
Local install same problems, always npm/node/grunt/gulp/local/global nightmare

2

Hey @Marek_Owsikowski :wave:

I used to develop using a linux system, but I’m using WSL, and I’ve been successful for both using Debian-based distros. Also, I know that at least one of the Ghost Core devs uses Linux as their daily driver.

You mention you’re having issues with Grunt; are you installing Ghost from source? If you want to do theme dev, there’s no need to compile the app, you can just install locally.

For me personally, I don’t install modules globally; once you run yarn in the casper folder, you can run yarn gulp ... to execute a gulp command.

What issues are you running into w/ node or yarn? I think if we can get that sorted out, you should be able to get up and running!

3

I tried it many times in many ways and there are are always different horror problems!
A typical example(after i tried your sufggestion):

root@li2054-167:~# docker run -d --name casper -e url=http://172.105.93.167:3004 -p 3004:2368 ghost
27b384974d4c887a1b85acc3f65102577f63cf155ce304681825a5a3c45b23bb
root@li2054-167:~# docker exec -t -i casper /bin/bash
root@27b384974d4c:/var/lib/ghost# cd
.ghost-cli config.production.json content.orig/ versions/
config.development.json content/ current/
root@27b384974d4c:/var/lib/ghost# cd current/
Gruntfile.js MigratorConfig.js README.md core/ node_modules/ yarn.lock
LICENSE PRIVACY.md content/ index.js package.json
root@27b384974d4c:/var/lib/ghost# cd current/content/
adapters/ data/ images/ logs/ settings/ themes/
root@27b384974d4c:/var/lib/ghost# cd current/content/themes/casper/
root@27b384974d4c:/var/lib/ghost/current/content/themes/casper# yarn gulp
yarn run v1.22.0
error Command “gulp” not found.
info Visit yarn run | Yarn for documentation about this command.
root@27b384974d4c:/var/lib/ghost/current/content/themes/casper# yarn
yarn install v1.22.0
[1/5] Validating package.json…
warning casper@3.0.12: The engine “ghost” appears to be invalid.
warning casper@3.0.12: The engine “ghost-api” appears to be invalid.
[2/5] Resolving packages…
[3/5] Fetching packages…
info fsevents@1.2.12: The platform “linux” is incompatible with this module.
info “fsevents@1.2.12” is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies…
[5/5] Building fresh packages…
warning Your current version of Yarn is out of date. The latest version is “1.22.4”, while you’re on “1.22.0”.
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
Done in 27.70s.
root@27b384974d4c:/var/lib/ghost/current/content/themes/casper# yarn gulp
yarn run v1.22.0
error Command “gulp” not found.
info Visit yarn run | Yarn for documentation about this command.
root@27b384974d4c:/var/lib/ghost/current/content/themes/casper#

What to do this? How to install gulp? I can install gulp in a million ways, with npm, globally or locally, as root as nonroot, by running package,json with some script etc. Once i will manage to install gulp, there will be a problem with grunt, then there will be problems with finding some modules which i don;t know whether to onstall with grunt, gulp, npm. Manually, or from one of the plenty of config files. Globally or not. As root user or not. I tried it many times and got always configuration problems which i haven’t seem since 1998! As you can see your above suggested solution did not work on the official ghost docker image, If i try this on my local pc i gets much worse! Because then I’m in node/npm hell! One million versions of these tools, and i can install them either by my package manager, or nvm or brew.
Whatever I choose I know there will be again a million of new problems. Either some version do not match, or some modules will not be found.

I haven’t find a replcable way to get casper theme development running, searched a lot on the web.
I think it needs only postcss to run, but because the envoronment has all these build tools and everything depends on something i couldn’t get it running.

Maybe above problem can be easily fixed with the one and only proper way of installing gulp(which hopefully you know). Whatever i do i always end up in a complete mess

4

Sorry, I forgot to mention that commands with yarn require dependencies to be installed - run yarn install first :grimacing:.Then running yarn gulp should work

You generally don’t want to develop using this path because it’s linked to the ghost version, try /var/lib/ghost/content/themes/casper.

Why do you need to use grunt? Everything with Casper is managed through gulp.

By the way, the Docker Image is not managed by Ghost, rather the Docker Community; here’s the suggested way to set up ghost for theme dev:

1 Like
5

Same problem here! It does not make any difference whether i use docker image or the instrucions from the site.
here’s my try with your latest suggestions:

root@519e11a18513:/var/lib/ghost/content/themes/casper# yarn install
yarn install v1.22.0
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/5] Validating package.json…
warning casper@3.0.12: The engine “ghost” appears to be invalid.
warning casper@3.0.12: The engine “ghost-api” appears to be invalid.
[2/5] Resolving packages…
[3/5] Fetching packages…
info fsevents@1.2.12: The platform “linux” is incompatible with this module.
info “fsevents@1.2.12” is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies…
[5/5] Building fresh packages…
success Saved lockfile.
Done in 2.85s.
root@519e11a18513:/var/lib/ghost/content/themes/casper# yarn gulp
yarn run v1.22.0
error Command “gulp” not found.
info Visit yarn run | Yarn for documentation about this command.
root@519e11a18513:/var/lib/ghost/content/themes/casper#

So the question is the same, where and how to install gulp? Globally or locally, as root or as normal user. Or by running yarn somehow different? I tried it many times and many times i got into all kinds of dependency problems. There are many package managers involved in this, so it’s a mess.

Again, i can send you also some screens from my local install which was done exactly like from the link, but it’s much worse mess due to all the node/npm versions, all the possible linux distributions etc, so really docker images are much better to replicate. A working step by step instruction on what linux/npm/grunt constellation is missing, a working docker image for theme development would be highly appreciated. I also tried mmornati/docker-ghostblog, also without success.

From what I see immediately in the beginning the system is complaining about packages that are complaining about linux, and i think linux is not so popular amongst ghost/ghost themes developers

Your link shows only how to start ghost locally, i can do this.
I am not able to get the enviroment to for casper theme development.
The only information i got is yarn install && yarn gulp. That does not work.

With the instructions from your link it gets much worse, since i have to deal with the right versions and right way of installing node.
I did not want to use grunt at all, at some point at a local install it was demanded. I am sorry, but the guide is not detailed at all! I am missing a fool proof to have this thing running on linux. Docker images is usually the easiest way, because then you have all the versions of the used software fixed. In the suggested way there are no informations whatsoever what software exactly to use, on what OS in what environment it was tested. There is no step by step instruction how to get this thing working on linux.

I am sure it works with this instruction on macos out of the box and i am sure that it will also work on a particular linux constellation out of the box. I am missing this information. Sorry, but the install instructions on the site are completely useless for the problems i am encountering due to the complexity of the node eco system,

6

It’s really weird that yarn gulp didn’t work. What happens if you run yarn dev?

The Linux complaint isn’t really a complaint, rather it’s information - fsevents is a package for OSX to improve performance of folder watching by tying into the OS APIs.

7

I’m having the same problem. I’m trying to edit the casper theme, but can’t get yarn dev or yarn gulp to work. I’ve tested it on my dev server running Ubuntu 18.04 and on my Digital Ocean droplet. I get the exact same feedback mentioned above.
ghost-mgr@rollercoaster-dev-ghost:/var/www/ghost/content/themes/casper$ yarn gulp
yarn run v1.22.4
warning casper@3.0.12: The engine “ghost” appears to be invalid.
warning casper@3.0.12: The engine “ghost-api” appears to be invalid.
$ /var/www/ghost/versions/3.15.3/content/themes/casper/node_modules/.bin/gulp
[11:13:46] Using gulpfile /var/www/ghost/versions/3.15.3/content/themes/casper/gulpfile.js
[11:13:46] Starting ‘default’…
[11:13:46] Starting ‘css’…
[11:13:48] Finished ‘css’ after 1.63 s
[11:13:48] Starting ‘js’…
[11:13:48] Finished ‘js’ after 168 ms
[11:13:48] Starting ‘serve’…
[11:13:48] Finished ‘serve’ after 2.8 ms
[11:13:48] Starting ‘cssWatcher’…
[11:13:48] Starting ‘hbsWatcher’…

on every instance it hangs here.

8

@joeczar That’s exactly what’s supposed to happen ;)

[11:13:48] Starting ‘cssWatcher’…
[11:13:48] Starting ‘hbsWatcher’…

"Watcher"s wait for changes to files and perform some action when that happens - as an example, when you change a css file, it might re-compile the css.

To get out, hit ctrl+c

1 Like
9

Oh man! I’m so used to React/Gatsby saying your site is now at localhost:3000. Where can I view the page. Is this a “hot load” setup? These handlebars are going to take some gettign used to.

10

Idealy, I’d love to set up a local version that I can sync up to git which would then sync up to my Digital ocean droplet. If you have any documentation on that I’d be super happy :slight_smile:

11

Ghost theme dev is a little different from React/Gatsby, since you have a server running.

When you run ghost start, your local Ghost blog will run (it will tell you where, usually http://localhost:2368), and when you run yarn dev, your theme watcher will run. The default Casper theme doesn’t have LR, but it’s not too hard to add - here’s a code snippet from Gulp I’m using on a non-ghost project:

const {task, watch,  series} = require('gulp');
task('dev', series('default', function devServer() {
	const liveReload = require('browser-sync');
	watch('./src/**/*.css', series('css')).on('change', liveReload.reload);
	watch('./src/**/*.html', series('html')).on('change', liveReload.reload);

	liveReload.init({
		server: {
			baseDir: './dist/',
			directory: true,
		}
	})
}));

You’re going to have to make a few changes to get that to integrate with the default casper css, but it’s a start.

In response to How should I theme dev, here’s what I do:

  1. Fork starter or casper.

  2. Set up a local installation of Ghost

  3. Navigate to the themes folder - cd content/themes

  4. Clone your forked them git clone {git-url} my-awesome-theme

  5. Make the theme yours (don’t forget to commit!)

  6. When you’re ready for automated deployments to your site, add the secrets to your Github Repo (since both Starter and Casper use action-deploy-theme)

    GHOST_ADMIN_API_URL
    GHOST_ADMIN_API_KEY

1 Like
12

Nice! Thanks so much for the help :slight_smile: I’m pretty excited to get into this beast.

1 Like