Simple Guide to Deploying Your Vite React App on Cpanel for Beginners

#react #vite #deploy #cpanel

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:

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 Manageror 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.

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.

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.

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:

<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>

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!

DEV Community