Build

When you're ready to share your Refract app with the world, you'll need to build it for production.

What's a production build?

A production build is an optimized version of your app that's ready for real users. Unlike development mode, which prioritizes fast rebuilds and helpful debugging tools, production builds focus on:

• Performance: Smaller bundle sizes and faster loading times
• Security: Removed development tools and debugging information
• Reliability: Optimized code that works consistently across different browsers
• Caching: Proper file naming for browser caching strategies

Think of it like the difference between a rough draft and a published book - both contain the same content, but one is polished and ready for readers.

Building your application

Refract uses Vite as its build tool, which makes creating production builds straightforward. Here's how the build process works:

Step 1: Basic build command

The simplest way to build your Refract app is using the build command:

Build for Production

npm run build

This command does several things behind the scenes:

1. Bundles your code: Combines all your JavaScript files into optimized chunks
2. Minifies assets: Removes unnecessary characters and optimizes file sizes
3. Generates static files: Creates HTML, CSS, and JavaScript files ready for deployment
4. Creates a dist folder: Contains all the files needed for your production site

Step 2: Preview Your Build

Before deploying, it's good practice to test your production build locally:

Preview Production Build

npm run serve

This starts a local server serving your built app, letting you catch any issues before deployment.

Step 3: Understanding the Build Output

After running npm run build, you'll see a dist folder with this structure:

dist/
├── index.html          # Main HTML file
├── assets/
│   ├── index-abc123.js # Your bundled JavaScript
│   ├── index-def456.css # Your bundled CSS
│   └── logo-ghi789.png # Optimized images
└── favicon.ico         # Site favicon

The random characters in filenames (e.g abc123) are called "hashes" - they help with browser caching.

Build Configuration

Optimize your build with proper configuration:

vite.config.js

Production-optimized Vite configuration:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
plugins: [react()],
build: {
// Output directory
outDir: 'dist',

  // Generate source maps for debugging
  sourcemap: true,

  // Optimize bundle size
  minify: 'terser',

  // Configure chunk splitting
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['react', 'react-dom'],
        refract: ['refract-js']
      }
    }
  }

},

// Base URL for deployment
base: process.env.NODE_ENV === 'production' ? '/your-app/' : '/'
});