The deployment services are platforms that automatically build and publish our application from a Git repository.
In the previous post, we saw how to deploy React on our own VPS. That’s the option that gives us the most control.
Now we are going to look at the comfortable alternative: delegating the build, hosting, HTTPS, and automatic deployment to an external platform.
Be careful, it’s not bad to use external platforms for deployment. These platforms are very useful. What is not advisable is using them without understanding what they do underneath (because then when something fails, you have to pray to the control panel).
What these services do
Most of them work in a similar way:
- You connect a GitHub, GitLab, or Bitbucket repository.
- The platform detects it’s a Vite project.
- It runs
npm installandnpm run build. - It publishes the
distfolder. - Every
git pushtriggers a new deployment.
For a React application with Vite, the key configuration is almost always the same: Build Command npm run build and Output Directory dist.
Which one to choose?
There is no universal answer. As a quick guide:
| Case | Reasonable option |
|---|---|
| Quick demo or portfolio | Netlify, Vercel, or Cloudflare Pages |
| Personal project with custom domain | VPS or Cloudflare Pages |
| Simple documentation | GitHub Pages |
| Serious app where you want control | VPS |
| MVP where speed is key | Vercel or Netlify |
Vercel
Vercel is very popular, especially because it’s the company behind Next.js. For a React app with Vite, the flow is quite straightforward.
Import the repository.
Vercel detects the framework.
Review the configuration:
Framework Preset: Vite
Build Command: npm run build
Output Directory: dist
- Click Deploy.
Netlify
Netlify is another very convenient option for static websites. The flow is similar:
Build command: npm run build
Publish directory: dist
To fix React Router routes, create a file named _redirects inside public:
/* /index.html 200
Since Vite copies public to the final build, this file will end up inside dist when you run npm run build.
GitHub Pages
GitHub Pages is useful for small projects, documentation, demos, and portfolios. It has an obvious advantage: if the code is already on GitHub, you don’t have to leave GitHub.
Here are two important details:
- You usually need to configure the
baseinvite.config.jsif you are publishing to a path like/my-repo/. - SPA routes with React Router can be more cumbersome than on Vercel or Netlify.
Example of vite.config.js for a repository named my-app:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
base: "/my-app/",
});
If you are going to use GitHub Pages with React Router, consider using HashRouter for simple demos, or prepare a specific strategy for redirects. GitHub Pages is not as flexible as Nginx, Vercel, or Netlify for this case.
Cloudflare Pages
Cloudflare Pages is a very interesting alternative. It is usually very fast, integrates with Git, and fits very well with static sites.
The usual configuration:
Framework preset: Vite
Build command: npm run build
Build output directory: dist
For SPA routes, you can create a _redirects file in public, just like on Netlify:
/* /index.html 200
Advantages and limitations
These platforms provide very convenient features, but they have their trade-offs:
- Automatic deployments with every
git push. - Free HTTPS without configuring Certbot.
- Preview deployments to test branches or pull requests.
- Global CDN without configuring Nginx or caches.
- You depend on the rules, limits, and pricing of a third party.
- Some advanced configurations are less transparent.
- Migrating can be annoying if you get too used to a specific platform.
- When something fails, you often have to look at logs inside their panel.
My recommendation is simple: learn to deploy on a VPS first and then use these services when they suit you. This way, you choose them for convenience, not out of dependency.
