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

Deploying modern JavaScript apps has never been easier thanks to static hosting platforms. Whether you're using React, Vue, or Angular, services like Vercel, Netlify, and GitHub Pages offer simple, fast, and free deployment options. This guide will walk you through deploying your frontend apps step-by-step. 1. Deploying to Vercel (Best for Next.js & React) Vercel specializes in frontend frameworks with zero-config deployment. Steps to Deploy Build Your App npm run build # Creates a `dist` or `out` folder Install Vercel CLI npm install -g vercel Deploy vercel Follow prompts to link your Git repo or drag-and-drop your build folder. Key Features ✅ Automatic HTTPS & CDN ✅ Preview URLs for Every Commit ✅ Serverless Functions Support Example: A Next.js app deploys instantly with optimized SSR/SSG. 2. Deploying to Netlify (Best for JAMstack) Netlify offers powerful CI/CD and plugin integrations. Steps to Deploy Connect Your Git Repo Sign in to Netlify → "New site from Git" → Choose GitHub/GitLab/Bitbucket. Configure Build Settings Build command: npm run build Publish directory: dist (or build for React) Deploy! Netlify automatically deploys on every git push. Key Features ✅ Free HTTPS & Custom Domains ✅ Forms, Identity (Auth), and Serverless Functions ✅ Split Testing & Rollbacks Example: A Vue.js app with Netlify CMS for content management. 3. Deploying to GitHub Pages (Free for Open Source) GitHub Pages is ideal for simple static sites and open-source projects. Steps to Deploy Set homepage in package.json "homepage": "https://username.github.io/repo-name" Install gh-pages npm install gh-pages --save-dev Add a Deploy Script "scripts": { "deploy": "gh-pages -d dist" } Run Deployment npm run deploy Key Features ✅ Free Hosting for Public Repos ✅ Integrated with GitHub Workflows ❌ No Serverless Functions Example: An Angular portfolio hosted at username.github.io/my-portfolio. Comparison: Vercel vs. Netlify vs. GitHub Pages Feature Vercel Netlify GitHub Pages Best For Next.js, React JAMstack, Vue Open-source, Docs Free Tier ✅ Yes ✅ Yes ✅ Yes (Public) Custom Domain ✅ Free SSL ✅ Free SSL ✅ Manual Setup Serverless ✅ Edge Functions ✅ AWS Lambda ❌ No Deploy Speed ⚡ Fastest ⚡ Fast Medium Which One Should You Choose? Vercel: If you use Next.js or need serverless APIs. Netlify: For JAMstack apps with plugins (CMS, Forms). GitHub Pages: For simple static sites (docs, portfolios). Troubleshooting Tips 404 Errors on Refresh (SPAs) Fix: Add a _redirects file (Netlify/Vercel): /* /index.html 200 Environment Variables Configure in Netlify/Vercel dashboard under "Environment Variables." CORS Issues Use Netlify/Vercel serverless proxies or configure API headers. Final Thoughts Deploying React, Vue, or Angular apps is effortless with these platforms. For full-stack apps: Vercel/Netlify + serverless functions. For simple sites: GitHub Pages. Start deploying today—your app is just a git push away!

Apr 19, 2025 - 00:30

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

Deploying modern JavaScript apps has never been easier thanks to static hosting platforms. Whether you're using React, Vue, or Angular, services like Vercel, Netlify, and GitHub Pages offer simple, fast, and free deployment options. This guide will walk you through deploying your frontend apps step-by-step.

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

Vercel specializes in frontend frameworks with zero-config deployment.

Steps to Deploy

Build Your App

   npm run build  # Creates a `dist` or `out` folder

Install Vercel CLI

   npm install -g vercel

Deploy

   vercel

Follow prompts to link your Git repo or drag-and-drop your build folder.

Key Features

✅ Automatic HTTPS & CDN

✅ Preview URLs for Every Commit

✅ Serverless Functions Support

Example:

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

2. Deploying to Netlify (Best for JAMstack)

Netlify offers powerful CI/CD and plugin integrations.

Steps to Deploy

Connect Your Git Repo
- Sign in to Netlify → "New site from Git" → Choose GitHub/GitLab/Bitbucket.
Configure Build Settings
- Build command: npm run build
- Publish directory: dist (or build for React)
Deploy!

Netlify automatically deploys on every git push.

Key Features

✅ Free HTTPS & Custom Domains

✅ Forms, Identity (Auth), and Serverless Functions

✅ Split Testing & Rollbacks

Example:

A Vue.js app with Netlify CMS for content management.

3. Deploying to GitHub Pages (Free for Open Source)

GitHub Pages is ideal for simple static sites and open-source projects.

Steps to Deploy

Set homepage in package.json

   "homepage": "https://username.github.io/repo-name"

Install gh-pages

   npm install gh-pages --save-dev

Add a Deploy Script

   "scripts": {
     "deploy": "gh-pages -d dist"
   }

Run Deployment

   npm run deploy

Key Features

✅ Free Hosting for Public Repos

✅ Integrated with GitHub Workflows

❌ No Serverless Functions

Example:

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

Comparison: Vercel vs. Netlify vs. GitHub Pages

Feature	Vercel	Netlify	GitHub Pages
Best For	Next.js, React	JAMstack, Vue	Open-source, Docs
Free Tier	✅ Yes	✅ Yes	✅ Yes (Public)
Custom Domain	✅ Free SSL	✅ Free SSL	✅ Manual Setup
Serverless	✅ Edge Functions	✅ AWS Lambda	❌ No
Deploy Speed	⚡ Fastest	⚡ Fast	Medium

Which One Should You Choose?

Vercel: If you use Next.js or need serverless APIs.
Netlify: For JAMstack apps with plugins (CMS, Forms).
GitHub Pages: For simple static sites (docs, portfolios).

Troubleshooting Tips

404 Errors on Refresh (SPAs)
- Fix: Add a _redirects file (Netlify/Vercel):
```
 /* /index.html 200
```
Environment Variables
- Configure in Netlify/Vercel dashboard under "Environment Variables."
CORS Issues
- Use Netlify/Vercel serverless proxies or configure API headers.

Final Thoughts

Deploying React, Vue, or Angular apps is effortless with these platforms.

For full-stack apps: Vercel/Netlify + serverless functions.
For simple sites: GitHub Pages.

Start deploying today—your app is just a git push away!