Getting Started

This guide walks you through everything you need to get Jumbo React Vite running on your local machine for the first time.

Prerequisites

Before you begin, make sure the following tools are installed:

• Node.js 20.x or later — the project ships an .nvmrc pinning Node 20. Download from nodejs.org or manage versions with nvm.
• pnpm 9.x — the packageManager field in package.json locks pnpm as the canonical manager. Install via npm install -g pnpm or follow the pnpm installation guide.
• A code editor — VS Code with the ESLint and Prettier extensions is recommended.

Quick start

1. Download and extract the template

   Purchase and download the Jumbo React Vite package. Extract the archive to your preferred workspace directory.

   bash

   unzip jumbo-react-vite-v8.zip -d ~/projects/jumbo-react-vite
   cd ~/projects/jumbo-react-vite

   If you are working from the source repository directly:

   bash

   git clone <repository-url> jumbo-react-vite
   cd jumbo-react-vite

2. Switch to the correct Node.js version

   The project includes an .nvmrc file pinned to Node 20. If you use nvm, activate it now:

   bash

   nvm use
   # Found '/path/to/project/.nvmrc' with version <20>
   # Now using node v20.x.x

3. Install dependencies

   Install all required packages using pnpm:

   bash

   pnpm install

   If you prefer npm or yarn:

   bash

   # npm
   npm install
    
   # yarn
   yarn install

4. Start the development server

   Launch the app in development mode. Vite starts with hot module replacement (HMR) enabled.

   bash

   pnpm dev

   Or with npm / yarn:

   bash

   # npm
   npm run dev
    
   # yarn
   yarn dev

   Vite will print the local URL — by default http://localhost:5173.

5. Log in and verify the app

   Open http://localhost:5173 in your browser. You will be redirected to the login page automatically.

   Use the built-in demo credentials:

   Field	Value
   Email	demo@example.com
   Password	zab#723

   After logging in, confirm the following work before moving on:

   • The dashboard loads at /dashboards/misc
   • The left sidebar renders with navigation items
   • The dark/light mode toggle in the top bar functions
   • No errors appear in the browser console

Next steps

Once the dev server is running, explore these sections to understand the project:

• Installation — system requirements, build commands, and path alias reference
• Project Structure — directory layout and naming conventions
• Customization — adjust themes, layout options, and global config