Newbie messed up dev environment and now localhost isn't working

[kater]

Hi folks,

I’ve created a right mess with my dev environment, and the easiest solution will probably be to start over, but I appreciate if anyone has advice that could get me on the right track.

A few months back, I installed Ghost and its dependencies directly on my Mac, just localhost with nodejs, yarn, gulp etc. I’ve been tinkering with ghost themes, breaking and fixing things as that’s the way I learn.

After purchasing a premium theme Weiss Pro, and successfully editing the .hbs pages (directly in ghost/content/themes/weiss-pro and watching for changes with ?yarn dev? - I think?) I figured out what customistions I wanted to make and today set about trying to do this properly to ready for production.

Following the themes developer instructions, installed Docker (Docker Desktop for Mac) and pointed to the ‘src’ directory where the theme developer has the .sass files set up.

Here’s where I think thinks have stuffed up. According to the instructions, Docker should be pointing to localhost:3000, whereas I’d been running Ghost at localhost:2368. I found that when I launched the container in Docker, it opened the site at :2368 and when I changed the URL in-browser to :3000, Docker shut the site down… it was like both were pointing to the one installed version of Ghost (or its database) and would cancel the other out.

I deleted Docker, completely (I think) to try and go back to the environment I had working previously. But now that isn’t working either.

For instance, tonight I created a home.hbs file in ghost/content/themes/weiss-pro and updated routes.yaml to point to it, which it did successfully. I then reverted back to index.hbs in routes.yaml, and deleted the home.hbs file, but now when I load the site it’s complaining that it cannot find home - it’s as if the site is cached (it’s never done that when I was tinkering previously).
Edit: switching the theme to casper then back to the weiss seemed to fix things, so must have been cached.

So basically, with my amateur knowledge, I’ve created a right mess. Any ideas as to what I might be able to do to resolve this? I’ve attached a screenshot of the site and routes file (the version uploaded).

Given it’s hard to uninstall all of the packages, I’m considering just starting over on a spare laptop. If I do this, should I just install Docker as per the theme dev instructions linked above, and will that give me a full development environment to work with?

Thanks for any assistance and apologies in advance for any pain caused by the massive facepalm you’ll probably do in light of this!

[DavidDarnes]

Hi @kater

Maybe there’s no need to run Ghost inside a Docker container locally? You could just use the Ghost CLI and follow the installation steps? It would certainly remove a lot of complexity. Check out our installation instructions here:

How to install Ghost locally on Mac, PC or Linux

This doc also includes how to develop themes locally

[kater]

Hi @DavidDarnes thanks for your reply. Those are the instructions I followed for my initial setup.

I have been working on the .hbs files successfully directly from content/themes but the CSS is not navigable so I couldn’t easily find and make the changes I needed. I did reach out to the developer to ask how to edit these, and he advised to use Docker.

The theme - installed locally and edited from /content/themes - has the following CSS/app.css file:

I’m well versed in CSS (but rusty, and previously doing PHP or static sites, so CSS and NodeJS is completely new to me) but as you can see from that, it’s just not formatting in an editable way. All I want is a well-formatted CSS doc to work on

The theme comes with a folder called “only for development” which contains many but not all of the theme files, set up for development. The CSS is well formatted there:

Maybe I should have just copied and pasted this file to /content/themes and edited it, but alas I didn’t. I’ll give it a shot tonight and see if I can get things working, otherwise I’ll be setting up a whole dev environment on a different system to have another go, as for some reason, since installing Docker (and now uninstalling it) yarn dev doesn’t work on my localhost server.

Thanks again,
Kate

[sunlanterns]

Hi Kate!
Just a quick check, did you try running yarn before doing yarn dev?
And as for the routes.yaml issue before, I would make sure you uploaded the updated The routes.yaml in the admin panel at its separate upload spot. (This is something I’ve missed by accident before myself).

[kater]

Hi @sunlanterns thanks for your reply!
Yep, I’m running yarn before yarn dev. I’ll have another go tonight after restarting my Mac and see if it starts behaving.

I had uploaded routes.yaml to the admin area, and it had not refreshed but after a restart it worked - was probably just cached!

Cheers,
Kate

[sunlanterns]

If restarting your Mac doesn’t help, may copy in here whatever error message you’re getting from yarn dev

[kater]

Thanks! The problem I was having is in the terminal window in the screenshot if the original post - but I’ll run it again tonight and see what happens.

[sunlanterns]

Ah, I’m blind!
Not found… that’s interesting. And you don’t have a gulp file either so I’m betting it’s setup differently from Casper. In the root folder of your theme you should have a package.json file with a scripts field. If you could paste in here what that field contains (it could be several lines) I should be able to figure out what you should be running to compile your css.

[kater]

Hi folks and @sunlanterns thanks for your attempts to help me clean up this mess In my city, lockdowns have been lifted and with work and errands I haven’t even sat at my personal computer for a few weeks to follow up.

So, I might give up trying to make customisations on this theme. What I’m most confused about is the uncompiled CSS files are in a separate folder to the theme installed in my local environ - even if I can get my CLI / localhost install working, the CSS will remain uneditable. I’m not sure if that’s standard with all themes (Caspers CSS is editable…) but simply its too hard for a time-poor newbie to try figure out. I really do need to make time to learn and dev a theme from scratch as I have very specific things I want to play with (like page templates for book reviews, so metadata is layout consistently etc).

Is there anyway to uninstall everything I’ve installed locally to set up this environment (npm, gulp, nodejs) so I can set it up again fresh… without a full OSX reinstall?

Thanks!