deploying angular-cli projects to now.sh

I assume you have a working now.sh account.

There is a good amount of talks and posts about the angular-cli covering a variety of topics but one underrepresented part is how and where to deploy.

So the first important thing to understand are the mechanics of getting your locally working app out to a production server. When you run the command ng build --prod we get a dist/ directory. This directory contains a bundled production version which we want to host.

  • In the dist/ folder there is an index.html file. This is the entry file for our application.
  • Since angular apps are Single Page Applications we want every request of the form example.com/** to serve our index.html. The routing is handled in the browser, not on the server.

Create the project

cmd: ng new cli-now

This creates our project and installs all dependencies.

Modify the project

Install the package serve, which we use to host the files.

cmd: npm install --save-dev serve

Modify the start and the build script in your package.json. The single option makes sure that every request serves the index.html.

"start": "serve dist/ --single",
"build": "ng build --prod",

Deploy to now.sh

cmd: now

That’s it! now will upload the files to their service, call npm install, npm build and npm start. It will also respond with a unique deployment url to access the application. In my case it was “https://cli-now-rxrhnbseip.now.sh”.

Cors error