Deploy a React + Vite App

In this tutorial

Introduction

Vite 7 and React 19 are a powerful combination for building modern single-page applications. Vite provides lightning-fast HMR and optimized production builds, while React 19 introduces improved concurrent features and the new use() hook. This tutorial covers scaffolding, building, and deploying a Vite + React app on Rackline.

Prerequisites

• A Rackline account
• Node.js 22 or later installed locally

Step 1 — Create the Project

Use the Vite CLI to scaffold a new React project with TypeScript. Vite 7 defaults to SWC for transforms, which is significantly faster than Babel.

npm create vite@7 my-react-app -- --template react-ts
cd my-react-app
npm install

Step 2 — Build for Production

Vite produces an optimized static bundle in the dist directory. The build uses Rollup under the hood with tree-shaking, code-splitting, and asset hashing for optimal caching.

# Build the production bundle
npm run build

# Preview locally before deploying
npm run preview

Step 3 — Configure Rackline for Static Hosting

Rackline detects Vite projects and configures Nginx to serve the dist folder. For single-page applications, it automatically sets up a fallback to index.html for client-side routing.

# Initialize Rackline
rackline init --framework vite

# This creates a rackline.json with:
# {
#   "framework": "vite",
#   "buildCommand": "npm run build",
#   "outputDirectory": "dist",
#   "routes": { "fallback": "/index.html" }
# }

Step 4 — Deploy and Set Up Previews

Deploy the app and optionally configure preview deployments for pull requests. Each preview gets a unique URL so reviewers can test changes before merging.

# Deploy to production
rackline deploy --environment production

# Create a preview deployment
rackline deploy --preview --branch feature/new-ui

# List all deployments
rackline deployments list

Conclusion

Your React + Vite application is live on Rackline with optimized static hosting and optional preview deployments. The combination of Vite 7's fast builds and Rackline's global CDN ensures your users get the fastest possible experience.