← Back to Documentation

Documentation

Install & Run Animmaster Vite Template — getting started

Follow these steps once — and your next projects start instantly. Install dependencies, choose a run mode, and ship when you’re ready.

Download Animmaster Vite Template Save your time — start now

Requirements before installation!

Node.js
Install Node.js first. Get the Windows or macOS version from nodejs.org. Node comes with npm, so you’ll be able to run npm i and all template scripts.

Installation

After downloading the template, unzip the archive into your project folder. Make sure the folder path uses Latin characters and does not contain spaces or symbols like # or !.

Project folder rules
Use Latin names, no spaces, no # or ! anywhere in the path.

Open the project folder in your editor, then open a terminal in that folder and install dependencies:

Terminal
npm i

You may see yellow WARN messages during installation — they are usually safe to ignore. Red ERR! messages mean something failed and should be fixed.

After install
You should see node_modules and package-lock.json created in your project.

Video guide

Prefer watching instead of reading? This short video walkthrough shows how to install, run, and start working with Animmaster Vite Template step by step.

Run modes

Animmaster Vite Template supports different scripts for daily development, production builds, deployments, and packaging.

Development

Use this command to start Vite template

Terminal
npm run dev

Development (online)

Access dev server from other devices on your network.

Terminal
npm run online

Production build

Build optimized output into dist. No server is started.

Terminal
npm run build

Preview build

Serve the production build locally to test before deploy.

Terminal
npm run preview

Deploy via FTP

Build + upload dist to your FTP server (optional).

Terminal
npm run deploy

Publish to GitHub

Build + publish to GitHub Pages (optional).

Terminal
npm run git

Build ZIP archive

Create a ZIP package of the final build (optional).

Terminal
npm run zip

WordPress (dev)

Run WordPress dev workflow (optional, WP mode only).

Terminal
npm run wp

WordPress (build)

Build production output for WP workflow (optional).

Terminal
npm run wpbuild

Stop WP server

Stop WordPress Docker server (optional, WP mode only).

Terminal
npm run wpstop

What happens in Development mode

In development mode, the template runs only what you need while coding: fast rebuilds, live reload, and automatic processing of your source files.

Important
In Development mode, final files are not written to disk — no dist folder is created.
  • Convert OTF/TTF fonts to WOFF2 and connect them (when needed)
  • Generate icon font and connect it (optional)
  • Process HTML files and resolve aliases
  • Process PUG (if enabled) and resolve aliases
  • Process JavaScript modules
  • Process SCSS/CSS
  • Start local server and open the browser
  • Watch changes and auto-reload the page

What happens in Production build

Production mode creates the final optimized project output and saves it into the dist folder. The server does not start automatically.

Important
All output files are written into dist. No local server is started in this mode.
  • Convert fonts to WOFF2 and connect them (if needed)
  • Convert images to WebP/AVIF + generate responsive sizes
  • Optimize JPG/PNG/SVG and compress assets
  • Compile SCSS → CSS (minify, autoprefix, group media queries)
  • Format HTML and resolve aliases (and PUG → HTML if enabled)
  • Bundle and optimize JavaScript (only used code goes into final output)
  • Copy static files from the configured folder
  • Optional: generate critical CSS / non-minified copies (if enabled)

Common errors & fixes

Red ERR! in terminal

If the browser doesn’t open or you see critical errors, check:

  • Node.js is installed
  • Python is installed (latest version)
  • Your editor/terminal has enough permissions
  • No # or ! symbols in the full project path
  • Folder/file names are Latin only, no spaces

Yellow WARN during install

WARN messages during npm i are usually not critical. Focus on red ERR!.

Editor setup (recommended)

To get the best experience, configure your editor for path aliases and snippets. This speeds up development and reduces mistakes.

Path aliases

The template uses aliases to avoid long relative paths. Your editor can autocomplete files, and during build aliases are replaced with correct paths automatically.

Example
<img src="@img/cover.jpg" alt="Cover">

Recommended extension: Path Autocomplete.

Snippets

Snippets let you insert ready code structures instantly. The template can add its own snippets and they work alongside your personal snippets.

Example (data-anim)

<div data-anim-spollers class="spollers">
	<details class="spollers__item">
		<summary class="spollers__title">Spoiler title</summary>
		<div class="spollers__body">Content...</div>
	</details>
</div>

Download

Every project you start without a solid foundation costs you time. Download Animmaster Vite Template and start your next project with a structure that already works.

Download Animmaster Vite Template Save your time — start now