Create an Angular Application That Builds and Deploys with Now

Angular is a popular JavaScript framework for building applications across all platforms; web, mobile web, native mobile, and native desktop.

In this guide, we will deploy an Angular application with ZEIT Now like the following: https://tour-of-heroes-he3j9k80n.now.sh/

Step 1: Set Up Your Angular Project

The most straightforward way to set up an Angular project is to use the official Angular CLI tool. The CLI tool interactively generates an Angular application that works out of the box.

If you don't have the Angular CLI installed globally, use the following command to install it:

Installing Angular CLI global to the system user with Yarn.

Once the installation is complete, run the following command in your terminal to create a new Angular app:

Creating a new Angular application within a terminal.

Once you run the command, the Angular CLI presents the following options:

• Adding Angular Routing to the project.
• The Stylesheet format to add to the project: css, sass, less, stylus.

For the first option, if you choose Yes, the CLI tool adds routing automatically to the project. Then, you can select your preferred stylesheet format for the second option. Once selected, Angular CLI provides the selected stylesheet format for the project.

After a successful scaffolding, cd into my-new-app directory and run the following command to serve your app in the browser:

Running your Angular application locally

Your browser will automatically be launched with the served Angular app at http://localhost:4200/

Step 2: Deploy Your Angular Project with Now

With your Angular application set up, it is ready to deploy live with Now.

First, you need to provide Now with instructions on how to build your Angular project using a now.json configuration file:

{
  "version": 2,
  "name": "my-new-app",
  "builds": [
    {
      "src": "package.json",
      "use": "@now/static-build"
    }
  ],
  "routes": [
    {
      "src": "/(assets/.+|.+\\.css|.+\\.js)",
      "headers": { "cache-control": "max-age=31536000,immutable" },
      "dest": "/$1"
    },
    {
      "src": "/(.*).html",
      "headers": { "cache-control": "public,max-age=0,must-revalidate" },
      "dest": "/$1.html"
    },
    {
      "src": "/(.*)",
      "headers": { "cache-control": "public,max-age=0,must-revalidate" },
      "dest": "/index.html"
    }
  ]
}

A now.json configuration file that builds an Angular project and caches the assets.

The now.json file allows you to achieve a few things with your deployment:

• Defines a version property to ensure you are using the latest Now 2.0 platform version.
• Defines a project name that your deployments will be sorted under and known by under Now.
• Defines a builds property as an array with one build step using @now/static-build to instruct Now to statically build the project and deploy the dist directory. Using the package.json file as an entrypoint, more on that below.
• Defines a routes property as an array that contains route objects to route all files to the right place whilst providing a fallback to index.html for all other routes so that Angular can handle routing and pages internally.

The routes property in the now.json configuration file contain cache-control headers for caching our application assets. With this set up, your site is delivered faster to users with reduced bandwidth costs.

For the build property that you configured, add a now-build script in the generated package.json file to specify what command Now will run to build the app in the cloud.

{
    "scripts": {
      ...
      "now-build": "ng build --prod --output-path dist"
    },
}

A package.json file with scripts for building Angular projects.

If you have not yet installed Now, you can do so by installing the Now Desktop app which installs Now CLI automatically, or by installing Now CLI directly.

Then, you can deploy from your terminal with just one command:

If you want your application to deploy automatically, you can install the Now for GitHub app and have updates for your GitHub repository deploy and alias on every push.

When your app is deployed, you will receive a deployment URL like the one that was shown at the beginning of this guide: https://tour-of-heroes-he3j9k80n.now.sh/

Resources

For more information on working with Angular, please refer to their documentation.

To configure Now further, please see these additional topics and guides: