Metronic React
Getting Started

Installation

Get started with Metronic React by following this installation guide.

This guide will help you set up Metronic React for development.

Requirements

Before installing Metronic React, ensure you have:

  • Node.js: Version 18.x or higher
  • npm: Version 9.x or higher (comes with Node.js)
  • Git: Latest version

Installation Steps

Clone the Repository

git clone <repository-url>
cd metronic-tailwind-react/typescript/vite

Install Dependencies

Install project dependencies using npm:

npm install

Note: This project requires React 19 and other modern dependencies. You may see peer dependency warnings, which can be safely ignored.

Environment Setup

  1. Create a .env file in the root directory:
cp .env.example .env
  1. Configure the required environment variables:
# API Configuration
VITE_APP_BASE_LAYOUT_CONFIG_KEY=metronic-react-demo1-8150
VITE_APP_API_URL=https://preview.keenthemes.com/hero-api/api
VITE_APP_VERSION=v9.2.0
VITE_APP_THEME_NAME=Metronic

Start the Development Server

Run the development server:

npm run dev

The application will be available at:

http://localhost:5173/metronic/tailwind/react/

Note the base URL path /metronic/tailwind/react/ which is configured in the Vite setup.

Build for Production

When you're ready to deploy, build the application:

npm run build

The built files will be in the dist directory and can be deployed to any static hosting service.

Project Structure

The Metronic React project follows a well-organized structure:

src/
├── assets/            # Static assets (images, fonts, etc.)
├── auth/              # Authentication related files
├── components/        # Reusable UI components
│   └── ui/            # Base UI components (Card, Button, etc.)
├── hooks/             # Custom React hooks
├── i18n/              # Internationalization files
├── layouts/           # Layout components (Demo1, Demo2, etc.)
├── lib/               # Utility libraries
├── pages/             # Page components organized by section
├── providers/         # React context providers
├── routing/           # Routing configuration
└── App.tsx            # Main application component

Next Steps

After installation, you might want to:

Troubleshooting

Common Issues

  1. Port Already in Use

If port 5173 is already in use, Vite will automatically try to use the next available port. Check your terminal for the correct URL.

  1. Missing Dependencies

If you encounter errors about missing dependencies, try:

npm install --force
  1. Base URL Issues

If you're getting 404 errors, make sure you're including the base path /metronic/tailwind/react/ in your URLs.

  1. Build Errors

If you encounter build errors, ensure you're using the correct Node.js version (18+) and try clearing the node_modules directory:

rm -rf node_modules
npm install

For additional help, refer to the Vite documentation or open an issue on our GitHub repository.

PreviousIntroductionNextComponents