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 wal…


This content originally appeared on DEV Community and was authored by Alex Aslam

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

  1. Build Your App 
   npm run build  # Creates a `dist` or `out` folder
  1. Install Vercel CLI 
   npm install -g vercel
  1. 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

  1. Connect Your Git Repo

    • Sign in to Netlify → "New site from Git" → Choose GitHub/GitLab/Bitbucket.

  2. Configure Build Settings

    • Build command: npm run build
    • Publish directory: dist (or build for React)

  3. 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

  1. Set homepage in package.json 
   "homepage": "https://username.github.io/repo-name"
  1. Install gh-pages 
   npm install gh-pages --save-dev
  1. Add a Deploy Script 
   "scripts": {
     "deploy": "gh-pages -d dist"
   }
  1. 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

  1. 404 Errors on Refresh (SPAs)

    • Fix: Add a _redirects file (Netlify/Vercel): 
     /* /index.html 200

  2. Environment Variables

    • Configure in Netlify/Vercel dashboard under "Environment Variables."

  3. 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! 🚀

Next Steps:

  • Try deploying a sample app: 
  npx create-react-app my-app && cd my-app && vercel

Feel Free To Ask Questions, Happy coding! 🚀


This content originally appeared on DEV Community and was authored by Alex Aslam


Print Share Comment Cite Upload Translate Updates
APA

Alex Aslam | Sciencx (2025-04-18T23:10:46+00:00) How to Deploy React, Vue, and Angular Apps on Vercel, Netlify & GitHub Pages. Retrieved from https://www.scien.cx/2025/04/18/how-to-deploy-react-vue-and-angular-apps-on-vercel-netlify-github-pages/

MLA
" » How to Deploy React, Vue, and Angular Apps on Vercel, Netlify & GitHub Pages." Alex Aslam | Sciencx - Friday April 18, 2025, https://www.scien.cx/2025/04/18/how-to-deploy-react-vue-and-angular-apps-on-vercel-netlify-github-pages/
HARVARD
Alex Aslam | Sciencx Friday April 18, 2025 » How to Deploy React, Vue, and Angular Apps on Vercel, Netlify & GitHub Pages., viewed ,<https://www.scien.cx/2025/04/18/how-to-deploy-react-vue-and-angular-apps-on-vercel-netlify-github-pages/>
VANCOUVER
Alex Aslam | Sciencx - » How to Deploy React, Vue, and Angular Apps on Vercel, Netlify & GitHub Pages. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/04/18/how-to-deploy-react-vue-and-angular-apps-on-vercel-netlify-github-pages/
CHICAGO
" » How to Deploy React, Vue, and Angular Apps on Vercel, Netlify & GitHub Pages." Alex Aslam | Sciencx - Accessed . https://www.scien.cx/2025/04/18/how-to-deploy-react-vue-and-angular-apps-on-vercel-netlify-github-pages/
IEEE
" » How to Deploy React, Vue, and Angular Apps on Vercel, Netlify & GitHub Pages." Alex Aslam | Sciencx [Online]. Available: https://www.scien.cx/2025/04/18/how-to-deploy-react-vue-and-angular-apps-on-vercel-netlify-github-pages/. [Accessed: ]
rf:citation
» How to Deploy React, Vue, and Angular Apps on Vercel, Netlify & GitHub Pages | Alex Aslam | Sciencx | https://www.scien.cx/2025/04/18/how-to-deploy-react-vue-and-angular-apps-on-vercel-netlify-github-pages/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts