Deploying an Angular Universal application on Vercel

The purpose of this article is to guide you step by step on how to host an Angular Universal application on Vercel. Before we go any further, let’s do a little reminder about what an Angular Universal application is. According to the documentation, an ordinary Angular application runs in the browser, making pages in the MOD in response to user actions. Angular Universal runs on the server, generating static application pages that are then booted on the client. This means that the rendering of the application is generally faster, allowing users to view the layout of the application before it becomes fully interactive. The first step is to create an account on Vercel if you don’t already have it. If you already have a Vercel account, here are the steps to follow:

1. Create a Github repository for your project

2. Create a new project on vercel that will then link to your repository on Github

3. At the root of your Angular Universal project, create a vercel.json file with the following configuration:

   
 {
  "version": 2,
  "public": true,
  "name": "test-universal",
  "rewrites": [
    { "source": "/(.*)", "destination": "/api" }
  ],
  "functions": {
    "api/index.js": {
      "includeFiles": "dist/YOUR_PROJECT_NAME/browser/**"
    }
  }
 }
     

4. In the package.json file, add the `vercel-build` script with the value

npm run build:ssr

. Now your configuration should look like this.

 {
  "name": "test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build-dev": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "dev:ssr": "ng run test:serve-ssr",
    "serve:ssr": "node dist/test/server/main.js",
    "build:ssr": "ng build && ng run test:server",
    "prerender": "ng run test:prerender",
    "vercel-build": "npm run build:ssr"
  },
...

5. At the root of the project, create a folder called api with inside a file index.js with the following code:

const server = require('../dist/YOUR_PROJECT_NAME/server/main');

module.exports = server.app();

6. Push on Github and the project will be automatically deployed on vercel.

Here we are at the end of the Vercel Angular Application Deployment Guide.If this little guide helped, please feel free to share it.