Deployment with Netlify and Vercel - vonschappler/Ultimate-React GitHub Wiki

Deploying to Netlify

To deploy to Netlify, first we need to build our application with the command:

npm run build

When the build process is concluded, then we proceed to Netlify and create our account there. After creating, just move the dashboard and click on the button Add a new site and Deploy manually.

This will open a page from where it's possible to simply drag and drop the whole dist folder created by vite after executing the command listed above.

NOTE: If for some reason, the application is not work, try creating a file with the name netlify.toml inside the dis folder with the code listed below, delete the previously added site and upload a new one.

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

The preview site deployed to Netlify can be found here.


Deploying to Vercel

The process we are going to view here is a bit different from what was done with Netlify. Although Netlify also provides continuous deployment (meaning that the project will be automatically be re-deployed when any change is sent to a remote repository) we'll provide instructions on how to proceed with continous deployment using Vercel.

As always, the first step is to create an account on Vercel.

After that, you'll be able to search for any repository you have created on your GitHub account, assuming that you have linked Vercel and Github.

After selecting the repository, nothing needs to be changed (unless the project has some kind of enviromental variables which need to be set up).

Clicking on the button Deploy will run the command npm run build and after a few moments, the project will be availabe for sharing!

The same project deployed with Netlify has now also a version on Vercel.

⚠️ **GitHub.com Fallback** ⚠️