🚀 Installation #

This guide will walk you through setting up Admindek on your local development environment.

System Requirements #

Before you begin, ensure your system meets these requirements:

Required #

Node.js: Version 20.19 or higher (required by Vite 8)
npm: Version 10 or higher (comes with Node.js 20+)

Recommended #

Git: For version control and updates
VS Code: With extensions for better development experience
pnpm: The template uses pnpm workspaces internally — install with npm install -g pnpm

Quick Installation #

Option 1: Download ZIP (Recommended for beginners) #

Download the Admindek package
Extract the ZIP file to your desired location
Open terminal in the extracted folder
Install dependencies:
```
npm install
```
Start development server:
```
npm start
```
Open your browser to http://localhost:4173

Option 2: Git Clone (Recommended for developers) #

# Clone the repository
git clone <repository-url>
cd admindek-html
 
# Install dependencies
npm install
 
# Start development server
npm start

Verify Installation #

After installation, you should see:

Terminal output indicating successful build:

🔄 Starting development server with automatic rebuild...
✅ Build completed successfully!
👀 Watching for changes in src/html/ and src/assets/scss/

Browser opening automatically to http://localhost:4173
Analytics Dashboard displaying with sample data and charts

Project Structure #

After installation, your project structure will look like this:

admindek-html/
├── src/                    # Source files
│   ├── html/              # HTML templates
│   ├── assets/            # SCSS, JS, images
│   └── entries/           # Entry points
├── dist/                  # Built files (auto-generated)
├── docs/                  # Documentation
├── plugins/               # Custom Vite plugins
├── package.json           # Dependencies and scripts
├── vite.config.js         # Build configuration
└── README.md             # Project information

Development Commands #

Once installed, you can use these commands:

Command	Description	When to Use
`npm run dev`	Start the Vite dev server with HMR	Daily development
`npm run build`	Build for production	Before deployment
`npm run preview`	Preview the production build	Testing builds
`npm run format`	Format code with Prettier	Code cleanup

Development Workflow #

Standard Development Process #

Start the dev server:
```
npm run dev
```
Open the URL printed in your terminal (typically http://localhost:5173)
Edit files in the src/ directory
See changes instantly — Vite HMR reloads the page automatically when you save

Hot Module Replacement #

As of v3.4, Admindek uses Vite's native HMR for development. When you save a file, the browser updates automatically — no manual refresh required.

For production builds, run npm run build to generate the optimized output in dist/, then npm run preview to test it locally.

Troubleshooting Installation #

Common Issues #

Node.js Version Error #

Error: Node.js version 14.x is not supported

Solution: Upgrade to Node.js 16+ from nodejs.org

Permission Errors (Windows) #

EACCES: permission denied

Solution: Run terminal as Administrator or use:

npm install --no-optional

Port Already in Use #

Port 4173 is already in use

Solution: The system will automatically find an available port, or specify one:

npm run preview -- --port 3001

Build Errors #

Module not found or build failed

Solution:

Clear node_modules: rm -rf node_modules package-lock.json
Reinstall: npm install
Try again: npm start

Getting Help #

If you encounter issues not covered here:

Check our Troubleshooting Guide
Verify your Node.js version: node --version
Clear browser cache and try again
Contact support at contact@dashboardpack.com

Next Steps #

🎉 Installation Complete! Your development environment is ready.

What's next?

Create Your First Dashboard - Learn the basics
Explore the File Structure - Understand the organization
Customize the Theme - Make it yours

Having trouble? Check our Common Issues guide or contact support.

PreviousOverview NextFirst Dashboard