Deployment

This guide covers the basics of deploying your Metronic React application to production.

Building for Production

# Navigate to your project directory
cd metronic-tailwind-react/typescript/vite
 
# Install dependencies (if needed)
npm install
 
# Build for production
npm run build

This creates a dist directory with optimized files ready for deployment.

Configuration

Base URL

Metronic React uses a base URL configuration in vite.config.ts for deployments to subdirectories or behind reverse proxies.

The starter kit comes with a default base configuration:

import { defineConfig } from 'vite';
 
export default defineConfig({
  plugins: [react(), tailwindcss()],
  base: process.env.VITE_BASE_URL || '/',
  // ... rest of config
});

Understanding Base URL

The base option tells Vite where your application will be served from. For example:

• Root deployment: https://example.com/ → base: '/'
• Subdirectory deployment: https://example.com/metronic/tailwind/react/ → base: '/metronic/tailwind/react'

Configuration Options

Option 1: Using Environment Variable (Recommended)

Set the VITE_BASE_URL environment variable in your .env.production file:

# For subdirectory deployment
VITE_BASE_URL=/metronic/tailwind/react
 
# For root deployment
VITE_BASE_URL=/

Option 2: Hardcoded in Config

You can also hardcode the base directly in vite.config.ts:

export default defineConfig({
  base: '/your-custom-path',
  // ... rest of config
});

Important Notes

1. Path Format: The base must be a path string (e.g., /metronic/tailwind/react), not a full URL. Always start with a forward slash /.

2. Trailing Slash: Vite handles trailing slashes automatically, but it's recommended to include the trailing slash for consistency: /metronic/tailwind/react/

3. Asset Loading: When using a base path, Vite automatically prefixes all asset references (CSS, JS, images) with the base path.

4. Router Configuration: If you're using React Router, make sure your router's basename prop matches your Vite base configuration.

5. Development vs Production: You can use different base URLs for development and production by setting different values in .env and .env.production files.

Example: Deploying Behind Nginx

If you're deploying behind an nginx reverse proxy:

location /metronic/tailwind/react {
    alias /path/to/your/dist;
    try_files $uri $uri/ /metronic/tailwind/react/index.html;
}

Then set in your .env.production:

VITE_BASE_URL=/metronic/tailwind/react

Troubleshooting Base URL Issues

If you're experiencing issues with assets not loading or routes not working:

1. Check Environment Variable: Ensure VITE_BASE_URL is set correctly in your production environment.

2. Rebuild After Changes: After changing the base URL, you must rebuild your application:

   npm run build

   Copy

3. Verify Asset Loading: Check your browser's Network tab to see if assets are being requested from the correct path.

4. Check Router Basename: If using React Router, ensure the basename prop matches your Vite base configuration.