twitcher07 / _template-vite-craft-v4

Template project for craft 4 using Vite

Welcome to the Craft 4 with Vite.

Table of Contents

---

1. Requirements
2. Build Tools & Assets
3. Getting Started
4. Build Commands

Installation requirements

---

• Node.js
• NPM
• Composer
• Vite

Tools & Frontend Assets

---

What's included:

• Craft CMS v4 - Craft is a flexible, user-friendly CMS for creating custom digital experiences on the web and beyond. Documentation
• Vite - Documentation

Frontend assets:

• Alpine.js v3 - Documentation
• Tailwind CSS v3 - Documentation
• Vanilla Lazyload - Documentation
• GSAP - Documentation
• fitvids - Documentation

Getting Started

---

Configuring enviroment

Make sure .env variables are updated with the appropriate values. They are used for all frontend build commands. Below are the values used by the frontend build commands.

ENVIRONMENT

Is used to set whether development or production version of files are generated. Expected values are development, dev, staging, or production.

Important note about sites behind HTTP authentication:

Because this site uses the vite plugin, if your site is behind HTTP authentication - you will have to update the HTTP_AUTHENTICATION_USER and HTTP_AUTHENTICATION_PASSWORD in the .env file to make sure pulling in vite build files is working properly.

PRIMARY_SITE_URL

Must be set for Vite plugin and Craft to work properly.

Configuring paths

WARNING: Whatever is inside the folder ./web/dist will be deleted whenever you run npm run build. This is to prevent caching of old build files. Be careful not to put anything else inside this folder.

Setting up purging of TailwindCSS

Make sure in your package.json that "purgeFiles": [] contains an array to any files that contain tailwindcss classes. To learn more go to tailwindcss documentation about (optimizing for production)[https://tailwindcss.com/docs/optimizing-for-production].

Customizing Webpack

Set any custom configuration (e.g. new entry points or other settings) in vite.config.js.

Favicons

Favicon generation uses Real Favicon Generator. Edit ./faviconConfig.json to be valid Real Favicon Generator configuration.

Build Commands

---

npm run build

Builds production frontend files using vite.

npm run dev

Builds development frontend files and watches for changes. In order for this to work properly, make sure the craft environment is set to dev or development.

npm run favicon

Generates favicon information using real favicon generator.

npm run favicon-update

Checks real favicon generator for any updates.