NodeBB uses custom themes, but expects them to be installed as an npm dependency. And here we have a problem. Who wants to make a npm package for some client’s one-off theme? I prefer to version the theme directly in the repo, less confusing for future developers. But only you, reader, may truly judge if this process is preferable. In for a penny, in for a pound. And so it goes.

In this tutorial, we will fork a NodeBB theme, version it in our repo, use yarn link on Heroku so NodeBB includes our theme in the build, and then use yalc to avoid the error npm ERR! 404 Not Found - GET https://registry.npmjs.org/nodebb-theme-persona-mytheme - Not found. In the end, we will have our theme versioned in the repo rather than existing as a separate dependency.

We will use nodebb-theme-persona as our starter. 


mkdir src/themes
cp node_modules/nodebb-theme-persona  src/themes/nodebb-theme-persona-mytheme

Now, search and replace nodebb-theme-persona with nodebb-theme-persona-mytheme in your codebase. Also caps-sensitive replace Persona with Persona Mytheme.

Here’s docs on yarn link and a tutorial on yalc. I suggest reading them before executing these commands! 


cd src/themes/nodebb-theme-persona-mytheme
# install yalc globally and locally
yarn global add yalc
yarn add yalc -D
# now link and publish
yarn link
yalc publish
cd ../../../
yarn link nodebb-theme-persona-mytheme
yalc add nodebb-theme-persona-mytheme

Now, you can install Persona Mytheme on your local NodeBB.

Next, you’ll need to make sure yarn link and yalc publishpr gets run on Heroku. 


mkdir scripts
touch scripts/yarn-link-and-yalc-publish-theme.sh
chmod u+x scripts/yarn-link-and-yalc-publish-theme.sh

Add this to yarn-link-theme.sh: 


#!/bin/sh

THEME_NAME="nodebb-theme-persona-mytheme"
ROOT=`pwd`
THEME_REPO_RELATIVE_PATH="src/themes/$THEME_NAME"
YALC_BIN_PATH="node_modules/.bin/yalc"

# to fix https://help.heroku.com/I4N7UGKJ/why-is-my-build-output-yarn-not-found
npm install yarn
cd $ROOT/$THEME_REPO_RELATIVE_PATH
yarn link
$ROOT/$YALC_BIN_PATH publish
cd $ROOT
$ROOT/$YALC_BIN_PATH add $THEME_NAME
yarn link $THEME_NAME

Append this script this to your Procfile (full Procfile below, what’s appended is ./scripts/yarn-link-and-yalc-publish-theme.sh && ) 


web: ./scripts/yarn-link-and-yalc-publish-theme.sh && node loader.js --no-daemon

Commit it, and you’ll get a bunch of linter errrors.

Add some of your libraries to you .eslintignore file 


src/themes/nodebb-theme-persona-mytheme/lib
src/themes/nodebb-theme-persona-mytheme/library.js
.yalc/nodebb-theme-persona-cfpac/lib

Add .eslintignore with git add, and then push to Heroku, and install your theme!

Remember, you won’t see any changes you make to the them until after you run ./nodebb build.