Simple Guide to Deploying Your Vite React App on Cpanel for Beginners
Tags: react, vite, deploy, cpanel
Published: 2023-11-02 08:08:54


#### Step 1: Specify Your Site's URL in Vite Config
First off, we need to tell your Vite React app where it's going to be published on the internet. In your Vite project, there’s a file named `vite.config.js`. Open this file and add a `base` property under `export default defineConfig`. This is where your site's URL will go. It should look something like this:

```javascript
export default defineConfig({
  base: 'http://myvitereactapp.com/',
  // ... other config settings
})
```

#### Step 2: Prepare Your App for Deployment
Now, let's get your app ready to go live. This step converts your project into a form that's more efficient for web browsers and usually it compresses your all CSS and JavaScript codes to make it more faster. Open your project's terminal, and run `yarn install` to make sure all dependencies are up to date. After that, execute `yarn build`. This will create a `dist` folder in your project, holding the production-ready version of your app.

#### Step 3: Zip the `dist` folder
Zip/ Compress your `dist` folder, use any compressor tool to zip your `dist` folder. Usually people uses (WinZip, 7zip, etc.) .

#### Step 4: Upload Your App to File Manager.
Login in to the control panel or cPanel, and look for the `File Manager`or you can use the search bar at the top to find the file manager. Inside the File Manager, you should see a folder named `public_html`. This is where your react build source code will go.

![File Manager ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/usm3jgvt39gzwcfflw4m.png)


![public html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3c1dznwhs8q19j178nex.png)


#### Step 5: Uploading `dist.zip` to `public_html`
Click on upload button at the top of File Manager then Select the dist.zip file from your source code folder, then upload them directly into the `public_html` folder on your cpanel.


![Image upload](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5orx05cpxv5xmz4sz6c.png)



![Image select](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ej4xogrc2zhnugq0y69a.png)

#### Step 6: Extract Your Zip file 
After uploading the `dist.zip` file you have to extract the zip file, click on to the zip button and click on to the extract button.

![extract](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbvxkjy4dhbqug56li74.png)


![Image edit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vkqn4kv411fk6s4f8rxz.png)





#### Step 7: Set Up Redirects for SPA
Vite React apps are usually single-page applications (SPAs), and they require special handling of page requests. In the `public_html` folder on your host, create a file called `.htaccess`. Paste in the following configuration to manage redirects:

```apache
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>
```


![htaccess](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/src2ly2983xpr8mt3i52.png)


Now save the .htaccess file.

#### CASE CLOSED !
You've successfully deployed your Vite React Application! Visit your web address, and you should see your app shining back at you from the web. Congrats on bringing your project to the world!