Documentation

Build settings Configure the template via template.config.js

This page explains the main configuration options available inside template.config.js. The file acts as the control panel of the build system and allows you to customize development workflow, asset processing, optimization pipelines, and optional modules.

Where to edit settings

All template configuration lives in template.config.js located in the project root. This file defines how the development server, build pipeline, asset processing and optional modules behave.

Tip
Change one setting at a time and run npm run dev to verify the result.

Quick reference

These are the main top-level configuration keys available in template.config.js.

template.config.js — main keys

lang
vscode
devcomponents
newpage
git
navpanel
statistics
server
html
styles
fonts
video
images
js
php
pug
ftp
logger
projectpage
aliases
coffee

Default HTML language

lang

Defines the default language used in generated HTML pages. The value is automatically applied to the <html lang=""> attribute.

  • Example: lang: "en"

Editor helpers

vscode

Controls automatic helper configuration for VS Code.

  • settings — configure path aliases.
  • snippets — install project snippets.

Local server

server

Controls the development server configuration and output behavior during builds.

  • path — asset path format.
  • isassets — output CSS/JS into assets folder.
  • buildforlocal — bundle assets to open from file system.
  • hostname — server hostname.
  • port — server port.

Video optimization pipeline

video

Controls video encoding and optimization during production builds.

  • enable — enable video optimization.
  • srcDir — source directory containing videos.
  • sizes — generated video resolutions.
  • codecs — enabled codecs (mp4 / webm / av1).
  • removeAudio — removes audio track for autoplay.

Images pipeline

images

Controls image resizing, optimization, responsive images and modern formats such as WebP or AVIF.

  • svgsprite
  • optimize.enable
  • optimize.sizes
  • modernformat.type

Path aliases

aliases

Path aliases allow importing project files using short paths instead of long relative paths.

Example aliases

@components
@js
@styles
@img
@video
@fonts
@files

Download

Download Animmaster Vite Template and start building projects with a powerful development workflow and optimized build system.