Static React App Deployment with Vite

React apps built with Vite are known for their speed and efficiency. Deploying these applications as static websites ensures fast performance and scalability. In this blog, we'll walk you through deploying a static React app with Vite, using modern platforms to simplify the process.

What is Vite?

Vite is a next-generation front-end tool framework that optimizes development speed with instant server startup and lightning-fast hot module swapping (HMR). It is ideal for modern web applications, including React projects.

Why static deployment?

Static deployments are ideal for projects that:

• You don't need server side rendering (SSR).
• Hosting is cost effective (often free).
• Provide faster loading and excellent caching capabilities.

Getting Started

Let's deploy a React application built with Vite step by step.

Step 1: Project Setup

1. Create a Vite React App

Run the following command to create a new React app using Vite:

npm create vite@latest my-vite-app --template react
cd my-vite-app
npm install

2. Start Development Server

Test your application locally:

npm run dev

Step 2: Create a project for production

1. Edit the vite.config.js file to set the base path when deploying to a subdirectory.

Example:

export default defineConfig({
    base: '/your-subdirectory/',
    plugins: [react()],
});

Build the application:

npm run build

This will generate a dist folder with optimized static files.

Step 3: Deploy Static Files

You can deploy your application using any of these platforms. We will explore deployment using FAB Builder and popular cloud platforms.

Option 1: Deploy with FAB Builder

FAB Builder offers an efficient deployment solution, ideal for users with minimal coding experience.

Steps:

1. Upload Static Files

• Login to FAB Builder.
• Go to the Deployment section.
• Upload the dist folder generated by Vite.

2. Domain configuration and settings

• Set up your own domain or use FAB Builder's default URL.
• Confirm configurations such as SSL and cache.

3. Deployment

Click the Deploy button and your static React app will be up and running in minutes!

Option 2: Deploy to other platforms

Netlify

1. Install Netlify CLI:

npm install -g netlify-cli

2. Deployment:

netlify deploy --prod

3. Follow the instructions to upload the dist folder.

Vercel

1. Install Vercel CLI:

npm install -g vercel

1. Deployment:

vercel

1. Vercel will automatically detect Vite settings and deploy your application.

GitHub Pages

1. Install the GitHub Pages plugin:

npm install gh-pages --save-dev

1. Add the deployment script to the package.json file:

"scripts": {
    "deploy": "gh-pages -d dist"
}

1. Deployment:

npm run deploy

FAB Builder: Additional Features

FAB Builder provides advanced deployment features:

• Multi-cloud hosting: Choose from AWS, GCP, Azure or FAB Cloud.
• One Click Deployment: Simplify deployment of applications built with Vite.
• Git Integration: Push your code directly into Git repositories.

Benefits of Using FAB Builder for Deployment

1. No Hard Coding: Simplified workflows for developers at all levels.
2. Cost Efficiency: Save significant development costs with deployment automation.
3. Multi-Platform Support: Seamless deployment of web, mobile and backend applications.
4. Quick Deployment: Get up and running with minimal setup and configuration.

Conclusion

Deploying a static React app with Vite is straightforward, especially with platform like FAB Builder that simplify the process. Whether you're a beginner or an experienced developer, these steps will help you get your app up and running quickly and efficiently.

Start building your app today with FAB Builder and revolutionize your deployment process!