With so many Javascript/Purescript/Elms side projects going, all with diverse build/bundling setups, getting them somewhere presentable like my personal site is a challenge. I’ve iterated over several solutions over the past few years and today I’m excited to share a new one, node modules! This solution builds on what I learned in previous attempts and continues to streamline my personal site continuous integration and deployment.
The basic structure is side projects go to in separate repositories (ex. ascii-forest) and my personal site also into a public repo. The personal is a statically generated Hugo site that builds and deploys via gitlab-ci and the side projects arch very widely but can be understood as visual browser experiments. A good example of how things previously made their way to my personal site is my generative code experiment series. When I first integrated them it was via a Bash script executed during the gitlab-ci build step. The script cloned the experiments repo built the js files copied them into a place Hugo would statically serve them. This worked great at first but soon became a mess as I moved on to other projects and the structure of the experiments changed and eventually stop building. My second solution was to build the experiments once locally manually push the built files to S3 where the build script could just download, untar, and copy into correct location but even this did not solve everything. The setup was still fragile and relied on manual processes. Taking that into account I shifted to npm.
Create a node module for each side project then simply let npm handle the dependencies. To show this I’ll go through a side project called ascii-forest which is responsible for the ascii art, at the time of writing, to the right of this article on desktop.
ascii-forest example
Make sure the side projects package.json is in the root dir of it’s repo
Add the required fields to the side projects package.json
main: index.js
name: ascii-forest
version: 0.2.0
Commit and push
Tag repo with semantic version
$ git tag -a v0.2.0 -m ‘version 0.2.0: Add built files to module’
$ git push origin –tags
Install this new package into the main project, in my case personal site
“ascii-forest”: “https://gitlab.com/BTBTravis/ascii-forest-generator.git#v0.2.0"
$ npm install
import Forest from 'ascii-forest';
// ascii forest
document.querySelector('.ascii-forest pre').textContent = Forest.generateForest(30, 300);