Working with Vite.js
Learn how to use Vite.js and npm scripts to automate your development workflow, enable instant reloads, and generate optimized production builds for the Block theme.
Quick Start
Block uses Vite.js as its build tool. The package.json file includes convenient npm scripts for running the development server, compiling assets, and building production-ready files.
To use the build system and run the theme locally, you’ll need the Block source files and Node.js installed. Follow the steps below to get started.
1. Download and install Node.js
Most modern frontend tooling is built on Node.js. Download and install the latest LTS version from the official Node.js website.
Node.js comes bundled with npm, the JavaScript package manager.
npm --version
2. Working with the Theme Folder
Navigate to the root /Block directory to install dependencies and start working with the theme.
a. Installing npm modules
First, open your terminal and navigate to the project folder where the Block theme is located. Then install all required dependencies listed in package.json:
Once the installation is complete, a node_modules folder will be created in your project directory.
b. Run Vite development server
Start the Vite development server to compile assets and preview your project in real time. Vite provides instant hot module replacement, so changes appear immediately as you save files.
This command starts a local server and opens the project in your browser. Any updates to HTML, JavaScript, or Tailwind CSS will be reflected instantly.
c. Build production files
To generate optimized production files, run the build command. Vite will bundle, minify, and output all production-ready assets into the dist folder.
This command starts a local server and opens the project in your browser. Any updates to HTML, JavaScript, or Tailwind CSS will be reflected instantly.You can also preview the production build locally using: