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
We need the following
dist node_modules .parcel-cache
To install parcel
Now create an
Add a scripts section to your package.json
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
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.