# Configuration file

Valisette is entirely configured from a single configuration file written in javascript ./valisette.conf.js Each as an option that allows to alter the boilerplate itself or the build system output.

# Entry Files

This section describes how to link Valisette's compiler to your application's code with entry files.

# JS_ENTRIES

Webpack is a bundler that also compiles the boilerplate code, it turns everything you require into a module and applies compilers (called loaders) to it. So entries are Javascript files from which you make webpack call your code but also all the assets you might need (that means images, css, fonts, etc...). They are entry points to your code for webpack to compile your app.

# Single entry example

If I type (which is the default config) :

export default {
  JS_ENTRIES: ["main.js"],
}

Webpack will require everything you called from ${ASSETS_PATH}/${JS_PATH}/main.js and output it to ${PUBLIC_PATH}/${JS_PATH}/${JS_MAIN_OUTPUT}.

# Multiple entries example

If I type :

export default {
  JS_ENTRIES: ["main.js", "another-app.js"],
}

Webpack will loop through your entries then for each of them, Webpack will require everything you called from ${ASSETS_PATH}/${JS_PATH}/${JS_ENTRIES[n]} and output it to ${PUBLIC_PATH}/${JS_PATH}/${JS_MAIN_OUTPUT}.

That is really helpful as it allows you to compile multiple applications at once.

# SCSS_ENTRIES

Webpack doesn't parse your scss into css files if you don't call it from your app.

To ease things up, you can just declare your scss files for each app in entries. By doing so, Valisette will generate an alias for each file that you can call from your corresponding javascript entry.

The file being directly called is turned into a module by Webpack and it applies compilers (called loaders) to it to produce a css output.

# Single entry example

If I type (which is the default config) :

export default {
  SCSS_ENTRIES: ["main.scss"],
}

• Webpack will produce an alias by parsing the file name as follows [name].scss will create [name]_css, in this case main_css.
• You then require the alias from your corresponding javascript entry file like this :

// require from resources/assets/javascript/main.js entry file in your first Valisette setup
require("main_css"); // eslint-disable-line import/no-unresolved

• Webpack will now require everything you called from ${ASSETS_PATH}/${SCSS_PATH}/main.scss and output it to ${PUBLIC_PATH}/${CSS_PATH}/CSS_MAIN_OUTPUT.

The scss is now parsed and you can call its css output from anywhere you like.

# Multiple entries example

If I type :

export default {
  SCSS_ENTRIES: ["main.scss", "another-app.scss"],
}

• Valisette will loop on each entry and tell Webpack to produce an alias by parsing the file name as follows [name].scss will create [name]_css, in this case main_css and another-app_css.
• You then require the alias from your corresponding javascript entry file like this :

// require from resources/assets/javascript/main.js entry file in your first Valisette setup
require("main_css"); // eslint-disable-line import/no-unresolved
// require from resources/assets/javascript/another-js-file.js
require("another-app_css"); // eslint-disable-line import/no-unresolved

• Webpack will now require everything you called from ${ASSETS_PATH}/${SCSS_PATH}/main.scss and output it to ${PUBLIC_PATH}/${CSS_PATH}/CSS_MAIN_OUTPUT.

The scss is now parsed and you can call its css output from anywhere you like.

# Proxy Configuration

# PROXY_TARGET

This is the HTTPS-only url that was generated by your Valet setup by default.

When you run watch mode, you want your code to go live and debug it from a URL.

Valisette uses Browsersync to ease up your development by building a proxy between your Valet host and your file system.

This proxy has a few features :

• Browsers are automatically updated as you change HTML, CSS, images and other project files.
• Your scroll, click, refresh and form actions are mirrored between browsers while you test.
• Allow your website to test against a slower connection. Even when devices are connected to wifi.
• Record your test URLs so you can push them back out to all devices with a single click.
• Toggle individual sync settings to create your preferred test environment.

Access it by running :

npm run watch

# Dev server configuration

# DEV_SERVER_PORT

The dev server port on which your code will be served. (Default to 1337).

# Devtools

# VERBOSE

Turns on/off the boilerplate debug mode to print detailed log messages in your terminal. It will print :

• Fully merged webpack config
• Compiler run steps
• List of generated aliases
• List of service work cached files
• Any dedicated verbose logger

# DESKTOP_NOTIFICATIONS

Turns on/off desktop notifications and broadcast log messages.

# IGNORE_WARNINGS

Turns on/off warnings in the terminal with each build.

# Build Features

# PWA_MODE

Turns you app in to a Progressive Web Application by generating an app manifest in ${PUBLIC_PATH}.

It allows your site to be pinned on the desktop and use as an application alongside it's service worker.

# OFFLINE_MODE

Enables offline mode by generating a Service Worker file for your app.

By default, this file is ${PUBLIC_PATH}/sw.js.

For things to work properly you need to import Webpack's offline-plugin runtime inside your app's main file. You will also need to have a control file for your Service Worker that we provide by default as shown in ${ASSETS_PATH}/${JS_PATH}/main.js :

import * as OfflinePluginRuntime from "offline-plugin/runtime";
import swRuntime from "./sw-runtime";

The control file unregisters your Service Worker when a newer version is available and reloads the page. But it can do a lot more.

# GENERATE_HTML

Enables App shell mode by :

• Generating an index.html file for you with all the assets called into it.
• Adding it as a fallback to your site when your connection goes offline if use OFFLINE_MODE.

The html file template is by default ${ASSETS_PATH}/${HTML_TEMPLATE}, Valisette provides you with a default .ejs template.

The output name is controlled by HTML_OUTPUT_NAME.

# EXTRACT_CSS

When turn on, tells Webpack to use MiniCSSExtractPlugin to extract your CSS for your SCSS and your Vue Components to make a distinct CSS file. Otherwise, it defaults to Style loader and Vue loader to load your style chunks.

There is no reason not to use it unless you want to extend the boilerplate compiler.

# COMPRESSION_TRESHOLD

Default size in Bytes from which Valisette will start compressing your assets into gzip format. This is intended for production use only.

# PROD_APP_MAX_SIZE_WARNING

Defines your max app size on which your build will give you a warning in production mode.

# PROD_PACKAGES_MAX_SIZE

Defines your max bundle size on which your build will give you a warning in production mode. Also defines the treshold on which webpack will split your code into bundles in production mode.

# DEV_APP_MAX_SIZE_WARNING

Defines your max app size on which your build will give you a warning in development mode.

# DEV_PACKAGES_MAX_SIZE

Defines your max bundle size on which your build will give you a warning in production mode. Also defines the treshold on which webpack will split your code into bundles in development mode.

# Vue.js Features

# VUE_RUNTIME

Adds/Removes vue runtime to your bundle. This allows you to use vue markup inside HTML files. Defaults to false and uses vue.esm.js to mount your app.

# Performance

This section is performance-oriented and controls performance tools.

# AUDIT

Turns on/off a Bundle Analyzer, it gives a visualization of your bundle's composition. It's useful to detect unwanted imports and bulky dependencies.

# PERFORMANCE_LOG_LEVEL

Sets the level of importance you want your performance hints to be at.

• warning outputs a warnings with each hint.
• error outputs a error with each hint.

# File System

This section explains how to set most the boilerplate architecture and make it behaves to follow you own file system organization.

# ASSETS_PATH

Sets assets path relative to project root folder ./.

# ASSETS_PUBLIC_PATH

Sets a url prefix for all your static assets, default to "/". Usefull if you have project subfolders in your public directory.

# PUBLIC_PATH

Sets your public folder where Valisette will output all production assets.

# PUBLIC_MANIFEST_PATH

Sets PWA manifest location relative to PUBLIC_PATH.

# JS_PATH

Sets Javascript assets path relative to ASSETS_PATH. Replicates it for production assets inside PUBLIC_PATH.

# CSS_PATH

Sets CSS assets path relative to ASSETS_PATH. Replicates it for production assets inside PUBLIC_PATH.

# IMAGES_PATH

Sets Images assets path relative to ASSETS_PATH. Replicates it for production assets inside PUBLIC_PATH.

# FONTS_PATH

Sets Fonts assets path relative to ASSETS_PATH. Replicates it for production assets inside PUBLIC_PATH.

# SCSS_PATH

Sets Fonts assets path relative to ASSETS_PATH.

# HARD_CLEANUP

Forces Valisette to delete public folder and asset folder when rebuilding itself from conf and from reset commands.

# Output Names

When compilation is over you want your files to be named after your own logic. This section explains how to configure everything. It's mainly a wrapper around Webpack's own naming options.

# JS_MAIN_OUTPUT

Defines how your Javascript's entries in JS_ENTRIES will be named. You can pass all of Webpack's naming options to it.

# JS_CHUNK_OUTPUT

Defines how your Javascript's chunks in JS_MAIN_OUTPUT will be named. You can pass all of Webpack's naming options to it.

# CSS_MAIN_OUTPUT

Defines how your SCSS's entries in SCSS_ENTRIES will be named when compiled to CSS. You can pass all of Webpack's naming options to it.

# CSS_CHUNK_OUTPUT

Defines how your CSS's chunks in CSS_MAIN_OUTPUT will be named. You can pass all of Webpack's naming options to it.

# PWA Manifest

This section explains how you can customize your Progressive Web Application's manifest file alter your app's styling.

# APP_URL

Sets the base URL of your application (use the production one when you're ready).

# APP_NAME

Sets your PWA's full name as shown inside browser's pages.

# SHORT_APP_NAME

Sets your PWA's short name (title) as shown inside browser's pages and tab title.

# APP_DESCRIPTION

Sets your PWA's description text.

# BACKGROUND_COLOR

Sets your PWA's loading screen background color (in HEX values)

# THEME_COLOR

Sets your PWA's status bar UI color.

# APP_LOGO

Sets your PWA's logo file. Valisette will make thumbnails for all required logo sizes from it. Make sure it is a square image.

# HTML Generator

# HTML_TEMPLATE

Sets the .ejs you want to work from. Valisette expects you to place it in ${ASSETS_PATH}/. By default, an index.ejs file is generated for you.

# HTML_OUTPUT_NAME

Sets output name for your Generated HTML. By default, output will be located in ${PUBLIC_PATH} and called index.html so that public folder can be sent into production as is.

# Default Types