Building Your Theme

The Vanilla theme serves as an example implementation of the Mosaic Templates library.

Overview

The build scripts in the Vanilla package.json and deployment steps in the Vanilla gitlab-ci.yml demonstrate how they should be used in customer themes. Refer to Vanilla as a guide if you encounter difficulties, but for a detailed explanation, continue reading below.

Guidelines / Instructions

Starting from Scratch

A basic setup for a new theme can be found in the empty theme template. Ensure that all files (both static and templates) reside inside a src directory for the build to generate the correct folder structure.

Once you've configured the necessary script commands in your package.json, execute the build command to compile both static and template files in your src folder:

$ npm run build

This generates static/ and templates/ directories. Both should be included in the .gitignore file to prevent them from being committed to the repository.

Alternatively, you can run the build commands separately:

$ npm run static
$ npm run templates

For real-time updates during development, utilize the 'watch' version of the build command:

$ npm run watch

Localhost

When working on localhost, running the build after each change suffices to view the results on webshop.localhost.

SFTP

If working via SFTP on a test server, sync both the static/ and templates/ directories to the server after each build to see the results.