Home › Courses › Angular App Deploy on Vercel using GitHub

Angular App Deploy on Vercel using GitHub

61 / 63

What is Vercel?

  1. Vercel is an application hosting platform
  2. You can host web applications and websites on Vercel
  3. It supports multiple technologies:
  4. Angular
  5. React
  6. Vue
  7. Laravel
  8. Any other web technology
  9. In simple words, Vercel works like hosting (similar to GoDaddy) but is more advanced and developer-friendly


Prerequisites Before Deployment

Before deploying on Vercel, you must:

  1. Create an Angular application
  2. Push the complete code to GitHub

Both steps must already be completed.


Verify Code on GitHub

  1. Open GitHub
  2. Go to Repositories
  3. Select the repository where Angular code is pushed
  4. Example: Angular 21
  5. The application code should already be present and working


How the Deployed App Should Look

  1. After deployment, the application should look exactly like the local version
  2. Dummy or static content is fine
  3. No dynamic functionality is required for deployment testing


Login or Signup on Vercel

  1. Open vercel.com in the browser
  2. Login or Sign up
  3. You can use Login with Google
  4. The signup/login process is very easy
  5. No complexity in setup or deployment


Vercel Dashboard

  1. After login, you will see the dashboard
  2. Already deployed projects (if any) will be visible
  3. We will deploy a new project


Create a New Project on Vercel

  1. Click on Project
  2. Choose where you want to import the code from:
  3. GitHub
  4. GitLab
  5. Bitbucket
  6. Select GitHub
  7. Connect Vercel with your GitHub account
  8. If already logged in, it will connect automatically


Import GitHub Repository

  1. All GitHub repositories will be listed
  2. Select the Angular repository (example: Angular 21)
  3. Click Import


Vercel Auto Configuration

After importing:

  1. Vercel automatically detects Angular framework
  2. Branch name is auto-selected
  3. Project name is auto-generated
  4. Build command is automatically set:
  5. ng build
  6. or npm run build
  7. These commands run automatically during deployment


Deploy the Application

  1. Click on Deploy
  2. Deployment time depends on project size
  3. Small projects usually take less than 1 minute
  4. Heavy projects may take slightly longer


Deployment Completion

  1. After deployment:
  2. Dashboard is ready
  3. A free live URL is generated
  4. Open the URL to view the deployed Angular application
  5. The deployed output will match the local application


Automatic Redeployment (Redeploy)

If You Change Code:

  1. Make changes in the Angular project
  2. Commit the changes:

git add .
git commit -m "test vercel"
git push
  1. As soon as code is pushed to GitHub:
  2. Vercel automatically starts redeploying
  3. No manual action required


Verify Redeployment

  1. Refresh the Vercel dashboard
  2. You will see:
  3. Build status
  4. Commit message
  5. Deployment progress
  6. Once build is complete, visit the URL again
  7. Updated code will be visible liv


Share this lesson: