Installation

This page covers system requirements, all supported installation methods, production build configuration, and the path alias system used throughout the project.

System requirements

Requirement	Minimum	Recommended
Node.js	18.x	20.x LTS (pinned in `.nvmrc`)
pnpm	9.x	9.15.x (declared in `packageManager`)
npm	9.x	Latest stable
yarn	1.22.x	Latest stable
RAM	4 GB	8 GB
OS	macOS, Linux, Windows (WSL2)	macOS or Linux

Install dependencies

pnpm (recommended)

bash

pnpm install

npm

bash

npm install

yarn

bash

yarn install

Development server

bash

# pnpm
pnpm dev
 
# npm
npm run dev
 
# yarn
yarn dev

Vite starts at http://localhost:5173 by default with full HMR.

Production build

The build script runs TypeScript compilation followed by Vite's bundler:

bash

# pnpm
pnpm build
 
# npm
npm run build
 
# yarn
yarn build

This executes tsc && vite build. Output is written to the dist/ directory at the project root.

Preview the production build

After building, you can serve the dist/ output locally to verify it before deployment:

bash

# pnpm
pnpm preview
 
# npm
npm run preview
 
# yarn
yarn preview

vite preview serves the production bundle at http://localhost:4173.

Configuration approach

No .env files

Jumbo React Vite v8 does not use .env files. All application configuration lives in TypeScript modules under src/config/ and src/themes/. If you need to inject runtime secrets (e.g. API keys), add VITE_ prefixed variables to a .env.local file and access them via import.meta.env.VITE_YOUR_KEY. The Google Maps API key in src/components/maps/MapProvider/MapProvider.tsx should be moved to an env variable before shipping to production.

The central config entry point is src/config/index.ts:

typescript

// src/config/index.ts
import { createJumboTheme } from '@jumbo/utilities/helpers';
import { footerTheme } from '../themes/footer/default';
import { headerTheme } from '../themes/header/default';
import { mainTheme } from '../themes/main/default';
import { sidebarTheme } from '../themes/sidebar/default';
 
export const CONFIG = {
  THEME: createJumboTheme(mainTheme, headerTheme, sidebarTheme, footerTheme),
};

Layout defaults live in src/config/layouts/default.ts and are consumed by StretchedLayout.

Path aliases

The project defines three path aliases in vite.config.ts and mirrors them in tsconfig.json:

Alias	Resolves to	Usage
`@/`	`./src/`	Application source code
`@jumbo/`	`./@jumbo/`	First-party layout and component framework
`@assets/`	`./@assets/`	Fonts and static assets

typescript

// vite.config.ts
export default defineConfig({
  resolve: {
    alias: [
      { find: '@jumbo',  replacement: resolve(__dirname, './@jumbo') },
      { find: '@assets', replacement: resolve(__dirname, './@assets') },
      { find: '@',       replacement: resolve(__dirname, './src') },
    ],
  },
});

Always use these aliases in import statements — never use relative paths that traverse directory boundaries.

typescript

// Good
import { CONFIG } from '@/config';
import { JumboLayout } from '@jumbo/components';
import '@assets/fonts/noir-pro/styles.css';
 
// Bad
import { CONFIG } from '../../../config';

Verification checklist

After installation and starting the dev server, confirm:

http://localhost:5173 redirects to the login page
Login with demo@example.com / zab#723 succeeds and shows the dashboard
The sidebar navigation renders correctly
The dark/light theme toggle in the header works
No TypeScript errors appear (pnpm build completes without errors)
No errors in the browser console