Deploying a React Vite Application on Render

When it comes to deployment, Render.com provides a user-friendly platform that integrates seamlessly with your Git workflow. This article will guide you through the process of deploying your React Vite application to Render.com, ensuring a smooth and efficient transition from development to production.

Prerequisites:

• A React application created using Vite
• A Render.com account. If you haven’t signed up yet, head over to Render’s website to create an account. (Free tier available)
• A GitHub or GitLab account is required to connect your repository with Render.com.

Deploying on Render

I plan to use a basic React Vite application to demonstrate deploying on Render, which is available on my GitHub Account — NoteKeeper.

First, let’s create a new Static Site on Render.

Go to the Render.com dashboard, click the “New” button, and select “Static Site”

Select the Git provider that hosts your React Vite app’s repository or you can enter link for any public repository. In my case I am going to connect my Static Site with NoteKeeper repository.

Specify the project name, branch, etc as needed.

• In the "Build Commands" section, enter the following commands:

npm install; npm run build

• In the “Publish Directory” section, specify the directory containing your built application’s static assets. For React Vite Application set the Root Directory as dist.

dist

• Customize additional settings as needed (environment variables, Auto-Deploy, etc.).
• Once you’re satisfied with the configuration, click “Create Static Site” to initiate the deployment process.

• Render will automatically build and deploy your React Vite application based on the provided commands and directory.

• Upon successful deployment, your application will be marked as Live, and a unique URL will be provided for you to access it.
• You can view your live React Vite application by navigating to the generated URL in your web browser.

My application is available at https://notekeeper-851u.onrender.com/.

Conclusion

Deploying a React Vite application on Render.com is a straightforward process that streamlines the transition from development to production. By following these steps, you’ll have your React Vite application up and running on Render.com in no time. Happy Deployment!