Deploying an Angular app with

Deployment with is absolutely top-notch. It’s straight forward and the developer experience is as flawless as it gets.
The problem is that there is no documentation on how to use it together with Angular. This will be the topic of this post.


In order to understand what is going on, you need to have knowledge of how basically works, what the Angular-CLI does and last but not least, what npm run-scripts are.

To get started, you should have an Angular-CLI app set up as well as both zeit’s now and Yarn properly installed.


What we are doing is basically locally building the app, so that the fully “compiled” and minimalised project lays within the “dist” folder. This is just what happens if you execute “ng build” in your project. The npm-run-script “build” is an alias for this in the default Angular-CLI configuration.

Screenshot from 2018-02-21 13-44-46

We need to tell ‘now’ to take this dist-content and deploy it. This is basically a “static-deployment” (as further described here:

Of course you are sitting there screaming: “This guy is nuts! No SPA thingys!” Absolutely right! That’s why we are installing the npm package “serve” as decribed in the official documentation. It creates a server running the app providing all the SPA utility one needs.

Installing ‘serve’

The foundation of this chapter is this documentation:

What you need is something actually serving your app otherwise you’ll only have a static website without any single-page functionalities. This is done by the package ‘serve’.

You only need to execute:

npm install --save serve

Yep, Yarn

Afterwards we need to “switch” to Yarn instead of npm. Yarn is another package-manager but can handle the npm infrastructure. That’s why this step isn’t quite complicated. generally works better with it and doesn’t really like the “package-lock.json”. (It’s a good advice to use Yarn anyway if you ask me ;))

Just execute “yarn install” which is basically the same as “npm install”. Afterwards you should be a proud owner of a “yarn.lock” file.

Screenshot from 2018-02-21 13-38-32

Adding now configuration

The foundation of this chapter is this documentation:

First of all we need to tell ‘now’ what to deploy. Each file needed in “production” (meaning on the deployed server) should be present here. This is at a minimum package.json, dist and yarn.lock. However, you really should update this list when you have additionally needed files. This is not common whatsoever! So move on if you haven’t any major concerns.

Adding a configuration is as easy as creating a file called “now.json” on the same level as “package.json”. This file should look like this:

 "files": [

Remember, as already said above, you should extend this array by any other files which you’ll need on the server.
Also, of course, if there is already a now.json file, you should extend rather than replace it.

Run-Scripts, now!

‘Now’ prioritizes scripts like “now-start” or “now-build”. These are the run-scripts which will be executed instead of the common ones like “start” or “build”. This means instead of “npm run build”, ‘now’ executes “npm run now-build” while deploying.

In the first chapter we’ve already talked about how we are not going to let ‘now’ build the app. This is not possible without issues since it heavily relies on “ng” and the Angular-CLI binaries are not doing well within the ‘now’-remote-environment.

Long story short, we need to add a build-script which does basically nothing.  Go in your package-json and add a run-script called “now-build” which executes just “echo ‘Built locally'”.

Screenshot from 2018-02-21 14-17-33

Basically the same thing need to be done with the start-script. Instead of “npm run start”, ‘now’ should rather execute “npm run now-start”. This script is configured like described in the react-example of the but pointing to “./dist” not “./build”.
Add  another script “now-start” to your package.json like this:

Screenshot from 2018-02-21 14-28-30


To deploy your app you need to manually build it and then run now.

npm run build && now

This should create the app in your dist folder (since executing ‘ng build –prod’) and then running ‘now’ which acts according to the made configurations.

4 thoughts on “Deploying an Angular app with

  1. Hey oddwor,
    thanks a lot for the great guide. I don’t get why Now doesn’t make a guide for angular as well 🙂
    An addition to your current guide: Due to v2 of Now your now.json doesn’t work anymore. This works
    „version“: 1,
    „files“: [
    Depending on how much time I have, I might try v2 with angular. Do you have any plans to have a look at v2 as well?
    Happy regards

    Liked by 1 person

    1. Hey Dr4gon,

      no worries 🙂 Thank you for your helpful comments.
      I did not yet have time to work with v2. All my projects are still shamefully on v1. 😁😑
      But still I absolutely plan to bring this guide up to date. My plan is to release it as another blog post being linked in this one like “there is a new version available. Check out this link.”.

      Thank you so much for your hints and the comment in general! Appreciate it.

      Have a wonderful start in 2019


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s