Deploy Angular19 SSR to Vercel with Serverless Functions
In this article, we will deploy an Angular19 SSR project to Vercel with serverless functions. Vercel is a cloud platform for static sites and Serverless Functions that fits perfectly with Angular19 SSR. It is a great choice for deploying Angular19 SSR projects.
Prerequisite knowledge
- In Angular 19, if you create a project using the command
ng new your-project-name --ssr, after runningng build, there will be two subfolders under the 'dist' folder. In these two folders, the 'index.html' file, which was common in previous versions, is absent. - When running locally on a personal computer, we execute 'node dist/your-project-name /server/server.mjs'. When deploying to a remote server, we need to use serverless functions to run the node command.
Test locally
I have intentionally prerendered three products with IDs (1, 2, 3), while other product pages are generated through Static Site Generation (SSG), as shown in the image below. The server-side rendered page source contains the complete data. This eliminates the need for the browser to download and parse JavaScript, significantly improving the page loading speed and enhancing the user experience.
Prepare files needed by Vercel function
- Export app in server.ts
- Create api folder and create index.js. The full file path is : your-project-name/api/index.js.
- Create vercel.json under project. Then full file path is: your-project-name/vercel.json
- Push source code to github and deploy angular app on Vercel platform.(I skipped this step)
- My source code is located:GitHub
Conclusion
Deploying an SSR - rendered application is more intricate than deploying a static web app. We must adhere to the documentation for different deployment platforms.
<<previous article
SSR,SSG and Client-side Rendering in Angular19
next article>>