Asset Pipeline
The asset pipeline provides a framework to concatenate and minify or compress JavaScript and CSS assets. It also adds the ability to write these assets in other languages and pre-processors such as Typescript and Sass.
I've used Parcel on several projects and before that Webpack. I've found Parcel to be easier to use and so that is the recommendation for Nails.
Setting up a Volume
If you look at your .devcontainer/docker-compose.yml
you'll see a line that is commented out.
#- node_modules:/workspace/crates/asset-pipeline/node_modules # Set target as a volume for performance.
Comment that back in and rebuild your devcontainer. This will setup the node_modules folder as a volume and you will get way better performance during builds. This is due to the fact the node_modules folder has many files and docker tries to sync them with your main file system.
Also in your .devcontainer/Dockerfile
uncomment the following line.
#RUN sudo mkdir -p /workspace/crates/asset-pipeline/node_modules && sudo chown $USERNAME:$USERNAME /workspace/crates/asset-pipeline/node_modules
.gitignore
We need the following .gitignore
file.
dist
node_modules
.parcel-cache
Installing Parcel
To install parcel
Now create an crates/asset-pipeline/index.ts
And also crates/asset-pipeline/scss/index.scss
h1
Add a scripts section to your package.json
"scripts": ,
npm run start
And now when you run npm install & npm run start
parcel will generate your assets into the dist folder. We should also update our ./.gitignore
to exclude the generated files.
/target
.parcel-cache
/app/dist
node_modules
Adding Images
Create an empty images folder in crates/asset-pipeline/images
then your project should now look something like this.
What we have
We now have a pipeline to compile Typescript and SCSS assets and a place to store images.