Introduction: This guide walks you through deploying a Vite app with React on Cloudways. Whether you’re starting a new project or deploying an existing one, we’ll cover each step—from connecting to your server to configuring the app for smooth operation on Cloudways. If you’re looking for professional support in web development or app optimization, SvayambhuTech offers custom solutions tailored to meet your needs.

Step 1: Connect to Your Cloudways Server via SSH

Access SSH Details: Log in to your Cloudways account and locate your server’s Access Details.Open Terminal: Connect via SSH by running:

ssh master@[server_IP_address]

Navigate to the App Folder: Move to your app’s public_html folder:

cd /home/master/applications/[your_dbname]/public_html

Note: If you’re seeking a seamless setup experience, SvayambhuTech provides expert services to handle all server configurations and optimizations for you.

Step 2: Verify and Update Node.js Version

  1. Check Node Version:
node -v

If the version is below 18 or lesser then latest version, proceed with an update.

2. Update Node.js with NVM:

  • Install NVM (Node Version Manager):
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Install and use Node.js version 18 or latest version:

nvm install 18
nvm use 18

For hassle-free server maintenance, SvayambhuTech offers comprehensive support, ensuring your stack is always up to date.

Step 3: Set Up Your Vite Project

Option 1: Create a New Vite Project

  1. Initialize Vite:
npm create vite@latest
  • Select “React” and choose between JavaScript or TypeScript.

Navigate and Install Dependencies:

cd [project_name]
npm install

Option 2: Clone an Existing Repository

  1. Clone and Navigate to the Repo:
git clone [repository_URL]
cd [repository_name]

Install Dependencies:

npm install

Tip: If your project requires customized setup, SvayambhuTech can handle the complete deployment process, from cloning to configuration.

Step 4: Configure Vite for Cloudways and Set Up .htaccess

  1. Adjust the package.json:
    • Update the dev script to support IPv4:
"scripts": {
  "dev": "vite --host 127.0.0.1"
}

Create and Configure .htaccess:

  • Add these rules in .htaccess:
DirectoryIndex disabled
RewriteEngine On
RewriteBase /
RewriteRule ^(.*)?$ http://127.0.0.1:4173/$1 [P,L]

Run Your App:

npm run dev

Conclusion

Congratulations! Your Vite app with React is now live on Cloudways. By choosing SvayambhuTech for your web development and deployment needs, you can ensure professional guidance every step of the way. Our team specializes in custom web and app solutions, from initial setup to ongoing maintenance, tailored to help your project thrive.

Ready to elevate your web project? Explore SvayambhuTech’s services for unmatched support in development and deployment.