Installation

Step-by-step guide to getting Apex Dashboard — HTML running on your local machine.

Prerequisites

Before you begin, make sure you have the following installed:

Node.js 18+ — Download Node.js. Vite requires a current LTS version.
npm, yarn, or pnpm — npm ships with Node.js; yarn and pnpm are optional alternatives
Git — optional, for cloning the repository (you can also download the ZIP)

Step 1: Get the Files

Clone the repository, or download and unzip the template, then move into the project folder:

git clone https://github.com/colorlib/apex-dashboard-html.git
cd apex-dashboard-html

Step 2: Install Dependencies

Use your preferred package manager. This installs Vite, Tailwind CSS v4, ApexCharts, Lucide, and SortableJS.

npm

npm install

yarn

yarn

pnpm

pnpm install

Step 3: Run the Dev Server

npm run dev

The Vite development server starts at http://localhost:3838. It serves every root-level *.html page and hot-reloads your changes — edits to HTML, CSS, or component JavaScript appear instantly without a full reload.

Step 4: Build for Production

When you are ready to deploy, create an optimized static build:

npm run build
npm run preview

npm run build compiles every registered page, minifies the CSS and JavaScript, and writes plain static files to the dist/ directory. npm run preview serves that build locally at http://localhost:4838 so you can verify it before shipping.

The contents of dist/ are plain HTML, CSS, and JavaScript with no server runtime. Upload them to any static host (Netlify, Vercel, Cloudflare Pages, S3, GitHub Pages) or drop the assets into an existing backend.

Available Scripts

Command	Description
`npm run dev`	Start the Vite dev server with HMR on port 3838
`npm run build`	Create an optimized static production build in `dist/`
`npm run preview`	Serve the production build locally on port 4838

Using It With a Backend

The compiled CSS and JavaScript are a drop-in anywhere, and the markup ports cleanly because the <apex-*> custom-element tags survive copy-paste into any template engine. For Laravel specifically, the bundled blade-starter-kit/ wires the components through Laravel’s built-in Vite pipeline. The same approach works for Django templates, Rails ERB, Twig, and others — build with Vite (or include the built assets) and use the tags in your views.

Next Steps

Now that the project is running, explore the Folder Structure to understand how the codebase is organized.

Introduction Folder Structure