Setting up a development environment for designing themes

Arya

Hello All!

Big thanks to everyone for developing this great app!

I wanted to build upon the Persona Theme, make some UI improvements, and change up the styles but I really don't know the workflow for theme development with NodeBB.

So I got the Persona Theme code, and want to know if there is a way to see changes live as I make edits not just the CSS, but if I move around some of the div items for example?
After pushing changes to Theme to NPM, how to get an updated version of theme working on the live site?

The only thing that does it for me is if I use the Custom CSS Editor in the Settings section.

Many thanks,
Arya

dogs

@arya you can use grunt.

Getting started - Grunt: The JavaScript Task Runner

(gruntjs.com)

After installing grunt-cli you can run the command

grunt

in your nodebb path. Every file changes will be recognized and build live on stage.
It's perfect for development purposes.

For optimized development, the NodeBB team (and many of the plugin authors) use Grunt as part of their workflow. The pre-requisite dependencies are installed with NodeBB during the npm install step, although you may need to install grunt-cli (or your distribution's appropriate package for grunt) to allow grunt to be called via the command line.

Once installed, you can simply run grunt to build all assets and run NodeBB. Grunt will also watch for file changes and selectively build a subset of NodeBB's assets so there is no need to hop back to the console to stop NodeBB, build, and restart NodeBB.

Alternatively, you can run grunt --skip, which skips the build step and simply runs NodeBB with file watching enabled.

Getting Started - NodeBB Documentation

Documentation portal for NodeBB Forum Software

(docs.nodebb.org)

Arya

@dogs oh ok I see, I haven't used Grunt before, docs seem pretty self-explanatory thanks.

Just one thing, if I download the Persona Theme source code, how do I pair it with Grunt? Where do I enter the Theme code in my NodeBB code?

PitaJ

I recently had a discussion here regarding the setup of theme and plugin development:

Plugin development 2021 updated - environment and dev workflow - request

Hello everybody! I just started using NodeBB and as a developer I want to dive in and modify it and I have some ideas for some widgets/layouts. My problem is...

NodeBB Community (community.nodebb.org)

Arya

@pitaj Thanks! just saw it.

Can you also answer this if possible?

If I install my custom theme on my website, and I make changes to the Child Theme and publish it to NPM, how do I update it on the website so the changes show?

Thanks

PitaJ

@arya after a day or so there should be an update available for your theme on the ACP plugins page. You can update from there and then rebuild and restart to apply the latest changes.

Arya

@pitaj Is there any way to force it to show the update quicker?

PitaJ

@arya you can update manually, installing your latest package version with npm

npm install nodebb-theme-mytheme@latest

Run in your nodebb directory

I want to clarify that it is not recommended to use npm for a development flow.

Arya

@pitaj I meant on a production environment. Thanks though