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
.