Déployer Angular Universal sur Vercel

Le but de cet article c'est de vous guider étape par étape de comment héberger une application Angular Universal sur Vercel. Avant d'aller plus loin, faisons un petit rappel sur ce que c'est qu'une application Angular Universal. Selon la documentation,une application Angular ordinaire s'exécute dans le navigateur, rendant les pages dans le DOM en réponse aux actions de l'utilisateur. Angular Universal s'exécute sur le serveur, générant des pages d'application statiques qui sont ensuite amorcées sur le client. Cela signifie que le rendu de l'application est généralement plus rapide, ce qui permet aux utilisateurs de visualiser la mise en page de l'application avant qu'elle ne devienne totalement interactive. La première étape consiste à créer un compte sur Vercel si vous ne l'avez pas déjà. Si vous avez possédez déjà un compte Vercel, voici les étapes à suivre:

1. Créer un dépôt sur Github pour votre projet

2. Créer un nouveau projet sur vercel que allez ensuite lier à votre dépôt sur Github

3. A la racine de votre projet Angular Universal, créer un fichier vercel.json avec la configuration suivante:

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

4. Dans le fichier `package.json`, ajouter le script `vercel-build` avec comme valeur

npm run build:ssr

. Désormais votre configuration devrais à peu près ressembler à ceci.

 {
  "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. A la racine du projet, créer un dossier appelé api avec à l'interieur un fichier index.js avec le code suivant:

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

module.exports = server.app()

6. Faites un push sur Github, et le projet sera automatiquement déployé sur vercel.

Nous voici à la fin du guide de déploiement d'une application Angular sur Vercel.Si ce petit guide vous a aidé, n’hésitez pas à le partager.