Vanilla Plus JS requires some consistency in how projects are laid out to
reduce the configuration burden on the developer. This layout is initialized
for you when you run vanillaplusjs init.
The core structure looks as follows:
The files that you want to serve generally go in
src/public/. These will be used
to populate the out/ and
artifacts/ folders. In particular,
the files that should be served by your static file server are exclusively
contained in the out/www/ folder –
however if your operating system has symlink support (most non-Windows machines),
they may include symlinks. To build without symlinks, ensuring that you can
simply copy the contents of out/www/ to
your web server, you can use
vanillaplusjs build --no-symlinks
The artifacts folder is used for storing
post-processed images. These files can take a long time to produce, even compared
to their file size. Especially if you intend to use single-use machines for
deployment, it's better to have these artifacts downloaded rather than recreating
them, to keep the build time down. The recommended way of doing this is to
configure your repo to use
Git Large File Storage
(Git LFS) and include the following in your .gitattributes
file:
*.png filter=lfs diff=lfs merge=lfs -text
*.jpg filter=lfs diff=lfs merge=lfs -text
*.jpeg filter=lfs diff=lfs merge=lfs -text
*.webp filter=lfs diff=lfs merge=lfs -text
src/public/assets/* filter=lfs diff=lfs merge=lfs -text
Then you can include the artifacts folder in your
repository so it will be downloaded when pulling the repository
with Git LFS rather than being recreated. If you have a single
build machine which does not get cleared between builds then you
might not need to include the
artifacts folder, but you
will still need Git LFS to handle the source images in your
project.
The src/partials folder is used for storing
partial HTML files that are included using the preprocessor TEMPLATE command,
which is covered later.