Development Guide

Get familiarized with the development workflow of the project.

Installing Dependencies

All dependencies in the project are managed through NPM, including Hugo.

To install the dependencies, open a command line at the root of the project and run:

$ npm ci

To avoid package compatiblity issues, use Node version 12.x.

Hot reload development servers can be launched for the demo site, the documentation or storybook.

Run a development server of the demo site while watching the theme with Webpack:

$ npm run demo:dev

It should be accessible at localhost:1313/Lander/demo/.

Run a development server of the documentation while watching the theme with Webpack:

$ npm run doc:dev

It should be accessible at localhost:1313/Lander/.

Run a Storybook dev server:

$ npm run story

It should be accessible at localhost:6006/.

When customizing the theme only a build of the theme itself is needed. The rest of the build scripts are mostly for CI/CD pipelines.

Build the theme in production mode:

$ npm run theme:build:prod

Build the theme in development mode:

$ npm run theme:build

Note that having a built theme in dist/ is required for building the sites.

Build the documentation:

$ npm run doc:build

Build the demo site:

$ npm run demo:build

ESLint and Stylelint are used in the project. To run them:

$ npm run lint

The linters are also configured into the Webpack build. When using the development servers linting output is displayed in the console.