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.


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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s