How to Build and Deploy a Vite React TypeScript App

·
How to Build and Deploy a Vite React TypeScript App


Setting up a modern web application and publishing it online used to be complicated. Tools like Vite, React, TypeScript, and modern hosting platforms have simplified the process significantly.

This guide walks you through every step: installing prerequisites, building your project locally, and deploying it live on Cloudflare, Netlify, Vercel, and Render.

Prerequisites: Node.js and Package Managers

Before writing any code, you need Node.js and a package manager installed on your computer.

Step 1: Install Node.js

  1. Go to the official website: nodejs.org.
  2. Download the LTS (Long Term Support) version. This is the most stable release for development.
  3. Run the installer and keep the default settings.

Step 2: Check Your Versions

Open your terminal or command prompt and check if Node.js and npm (Node Package Manager) were installed correctly:

node -v
npm -v

If these commands return version numbers (for example, v20.11.0 and 10.2.4), your setup is ready.

Updating to the Latest Versions

If you already have Node.js installed but want to update npm or fix cache issues, run:

npm install -g npm@latest

If you encounter permission errors on macOS or Linux, append --force (use with caution):

npm install -g npm@latest --force

Step 1: Create a Vite React TypeScript Project

Vite provides a command-line tool to bootstrap projects instantly using npx or npm create.

1. Run the Create Command

Run the following command in your terminal to initialize a new project:

npm create vite@latest my-app -- --template react-ts

(Replace my-app with your preferred project name).

2. Navigate to the Folder and Install Dependencies

Change directories into your new project folder and install the required modules:

cd my-app
npm install

If you run into dependency conflicts during installation, force npm to bypass strict peer dependency checks:

npm install --force

3. Start the Local Development Server

To verify everything works, launch the development server:

npm run dev

Open your browser and navigate to the local URL shown in your terminal (usually http://localhost:5173).

Step 2: Build and Preview Your Project

Before hosting your application, you must convert your React TypeScript code into plain HTML, CSS, and JavaScript.

1. Build the Production Bundle

Run the build command:

npm run build

Vite compiles your code and outputs the static assets into a folder named dist.

2. Preview the Production Build Locally

To test how your app will perform on a live server, run the preview command:

npm run preview

Step 3: Initialize Git Repository

Most deployment platforms connect directly to Git repositories. Initialize Git inside your project root directory:

git init
git add .
git commit -m "Initial commit"

Create a new repository on GitHub, GitLab, or Bitbucket, then push your local code:

git remote add origin https://github.com/your-username/your-repo-name.git
git branch -M main
git push -u origin main

Deployment Options

Option A: Deploy to Cloudflare

Cloudflare allows hosting via Cloudflare Pages (for static web applications) or Cloudflare Workers (for serverless execution).

1. Deploy as Cloudflare Pages (Recommended for Single Page Apps)

First, install the Wrangler CLI tool locally or globally:

npm install -g wrangler

Authenticate Wrangler with your Cloudflare account:

npx wrangler login

Build your project and deploy the dist folder directly:

npm run build
npx wrangler pages deploy dist --project-name=my-react-app

2. Deploy as a Cloudflare Worker

To run your app on a Cloudflare Worker, create a wrangler.toml configuration file in your project root directory:

name = "my-react-worker"
main = "src/index.ts"
compatibility_date = "2024-01-01"

[site]
bucket = "./dist"

Build your assets and publish:

npm run build
npx wrangler deploy

Option B: Deploy to Netlify

Using Netlify CLI

Install Netlify CLI, log in, and deploy:

npm install -g netlify-cli
netlify login
npm run build
netlify deploy --prod

Select ./dist as your publish directory when prompted.

Using Netlify Web UI

  1. Log in to netlify.com.
  2. Click Add new site > Import an existing project.
  3. Select GitHub and authorize access.
  4. Set Build command to npm run build and Publish directory to dist.
  5. Click Deploy Site.

Option C: Deploy to Vercel

Using Vercel CLI

Install Vercel CLI and run the deployment command:

npm install -g vercel
vercel --prod

Using Vercel Web Dashboard

  1. Go to vercel.com.
  2. Click Add New > Project.
  3. Import your GitHub repository.
  4. Confirm Framework Preset is set to Vite, Build Command is npm run build, and Output Directory is dist.
  5. Click Deploy.

Option D: Deploy to Render

  1. Log in to render.com.
  2. Click New + and select Static Site.
  3. Connect your GitHub repository.
  4. Set Build Command to npm run build and Publish Directory to dist.
  5. Click Create Static Site.

Summary Checklist

Task Command
Check Node Version node -v
Update NPM npm install -g npm@latest
Create Project npm create vite@latest app-name -- --template react-ts
Install Dependencies npm install
Dev Server npm run dev
Build Bundle npm run build
Preview Build npm run preview
Cloudflare Pages npx wrangler pages deploy dist
Vercel Deploy vercel --prod
Netlify Deploy netlify deploy --prod