How to Deploy React, Vue, and Angular Apps on Vercel, Netlify & GitHub Pages

Deploying modern JavaScript apps has never been easier thanks to powerful static hosting platforms. Whether you’re building with React, Vue, or Angular, platforms like Vercel, Netlify, and GitHub Pages provide fast, free, and reliable deployment solutions.

This guide walks you through how to deploy your frontend applications step-by-step.

🚀 1. Deploying to Vercel (Best for Next.js & React)

Vercel specializes in frontend frameworks like Next.js and offers zero-config deployments.

Steps to Deploy

1. Build your app npm run build # Creates a `dist` or `.next` or `build` folder
2. Install Vercel CLI npm install -g vercel
3. Deploy vercel Follow the prompts to link your Git repo or drag-and-drop the build folder.

Key Features

• ✅ Automatic HTTPS & CDN
• ✅ Preview URLs for every commit
• ✅ Serverless Functions and Edge Middleware

Example:
A Next.js app deploys instantly with optimized SSR/SSG support.

🌐 2. Deploying to Netlify (Best for JAMstack & Vue)

Netlify provides robust CI/CD pipelines, plugin support, and is loved by the JAMstack community.

Steps to Deploy

1. Connect your Git repo
   Sign in → Click “New site from Git” → Choose GitHub, GitLab, or Bitbucket.
2. Configure build settings
   • Build command: npm run build
   • Publish directory: dist (Vue), build (React), or your framework’s output folder
3. Deploy
   Netlify deploys your app automatically on every push.

Key Features

• ✅ Free HTTPS & custom domain support
• ✅ Built-in forms, identity (auth), serverless functions
• ✅ Rollbacks & split testing

Example:
A Vue.js app with Netlify CMS for easy content management.

🧾 3. Deploying to GitHub Pages (Best for Static Sites)

GitHub Pages is great for hosting open-source projects, documentation, and simple static websites.

Steps to Deploy

1. Set the homepage in package.json "homepage": "https://username.github.io/repo-name"
2. Install gh-pages npm install gh-pages --save-dev
3. Add a deploy script "scripts": { "deploy": "gh-pages -d dist" }
4. Run deployment npm run deploy

Key Features

• ✅ Free hosting for public repositories
• ✅ Easy setup for documentation sites
• ❌ No support for serverless functions

Example:
An Angular portfolio hosted at https://username.github.io/my-portfolio.

📊 Comparison: Vercel vs. Netlify vs. GitHub Pages

✅ Which Platform Should You Choose?

• Use Vercel if you’re building with Next.js, need Edge Functions, or want the smoothest React integration.
• Use Netlify for Vue, Angular, or JAMstack apps that benefit from plugins, CMS, or split testing.
• Use GitHub Pages for documentation sites, portfolios, or simple static projects.

🛠️ Troubleshooting Common Issues

404 Errors on Refresh (SPA Routing)
Add a _redirects file (for Vercel/Netlify):

/*    /index.html   200

Environment Variables
Define these in your Netlify/Vercel project dashboard.

CORS Issues
Use serverless proxies or configure headers in your APIs.

🎯 Final Thoughts

Deploying modern frontend frameworks like React, Vue, and Angular has become incredibly straightforward:

• For full-stack serverless apps: Vercel or Netlify
• For static open-source sites: GitHub Pages

Your app is just a git push away from being live!

🔁 Next Steps

Try deploying a sample React app:

npx create-react-app my-app
cd my-app
vercel

Have questions? Want to learn more? Drop them in the comments.
Happy coding! 🚀