Deploying a React Vite Application on Render

前言

原文链接

作者：Tushar Mahajan

发布时间：Apr 10, 2024

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!

Vite-React-APP Deploy on GitHub

自定义模板

vite-react-deploy

Deploy Vite React App to GitHub Pages

原文链接

发布时间：Apr 26, 2024

Fixing Empty Pages & Missing Assets in Vite React + React Router (GitHub Pages)

原文链接

发布时间：Jun 9, 2024

静态网站和动态网站

静态网站和动态网站的区别在于网站的内容是如何管理和呈现的。

静态网站是指网站的内容在服务器上提前生成好并保存为静态文件，用户在访问网站时直接获取这些静态文件进行展示。静态网站的内容一般不会改变，除非手动修改文件内容。

动态网站是指网站的内容是在用户访问时通过服务器端程序动态生成的，内容可以根据用户的请求或其他条件实时改变。动态网站通常使用数据库和服务器端脚本语言来实现内容的动态生成和管理。

根据描述，添加了Emailjs交互功能和three.js 3d模型但没有数据库交互的网站可以被认定为静态网站，因为内容是提前生成好的静态文件，并不需要服务器端动态生成。