Angular

First steps

Create a free Runway account.
Install the CLI. See the install docs.
Log in:
```
runway login
```
Add an SSH key. See key setup, or use the shortcut:
```
runway local key setup
```

Let’s start a new Angular project and deploy it to Runway.

Setup

In order to create a project we will use Angular’s ng tool. To install it follow the official instructions or try the following:

$ npm install -g @angular/cli

Once installed, create your Angular project and answer the relevant questions (e.g. CSS, SSR etc.), let’s start a static app:

$ ng new my-app
...
✔ Packages installed successfully.
    Successfully initialized git.

The ng tool will setup Angular, install all dependencies (via npm) and create a git repository as well.

$ cd my-app
$ runway app create

You can test/verify the app by running npm run start or ng-serve inside (the my-app directory). Your brand new Angular application will run at http://localhost:4200.

TypeScript on Runway

Angular uses TypeScript, which is a superset of JavaScript that adds static typing and allows developers to catch errors at compile-time instead of runtime. TypeScript compiles down to JavaScript, which makes it compatible with Runway.

Add a web server

When your app is pushed, we’ll build it for you by running npm run build which creates all the files in dist/my-app/browser. By default, we save everything in dist already, but we’ll also need to configure a web server to serve your app after build.

To do this, we’ll add an nginx.conf config file to the repository:

nginx.conf

worker_processes 1;
daemon off;

error_log stderr;

events {
  worker_connections 1024;
}

http {
  charset utf-8;
  access_log /dev/stdout;
  default_type application/octet-stream;
  include mime.types;
  sendfile on;

  tcp_nopush on;
  keepalive_timeout 30;
  port_in_redirect off;

  set_real_ip_from 10.244.0.0/16;
  real_ip_header X-Forwarded-For;

  server {
    port_in_redirect off;
    absolute_redirect off;

    listen {{port}};
    root dist/my-app/browser;
    index index.html;

    # configure fallback for pretty URLs
    location / {
      try_files $uri $uri/ /index.html;
    }
  }
}

This is a standard Nginx config file, with a few important additions:

document root (root) is set to dist/my-app/browser
the port variable is dynamic ({{port}})
set_real_ip_from enables actual IPs in your logs

The next step is to add the necessary mime.types file:

mime.types

types {
  text/html html htm shtml;
  text/css css;
  text/xml xml;
  image/gif gif;
  image/jpeg jpeg jpg;
  application/x-javascript js;
  application/atom+xml atom;
  application/rss+xml rss;
  font/ttf ttf;
  font/woff woff;
  font/woff2 woff2;
  text/mathml mml;
  text/plain txt;
  text/vnd.sun.j2me.app-descriptor jad;
  text/vnd.wap.wml wml;
  text/x-component htc;
  text/cache-manifest manifest;
  image/png png;
  image/tiff tif tiff;
  image/vnd.wap.wbmp wbmp;
  image/x-icon ico;
  image/x-jng jng;
  image/x-ms-bmp bmp;
  image/svg+xml svg svgz;
  image/webp webp;
  application/java-archive jar war ear;
  application/mac-binhex40 hqx;
  application/msword doc;
  application/pdf pdf;
  application/postscript ps eps ai;
  application/rtf rtf;
  application/vnd.ms-excel xls;
  application/vnd.ms-powerpoint ppt;
  application/vnd.wap.wmlc wmlc;
  application/vnd.google-earth.kml+xml  kml;
  application/vnd.google-earth.kmz kmz;
  application/x-7z-compressed 7z;
  application/x-cocoa cco;
  application/x-java-archive-diff jardiff;
  application/x-java-jnlp-file jnlp;
  application/x-makeself run;
  application/x-perl pl pm;
  application/x-pilot prc pdb;
  application/x-rar-compressed rar;
  application/x-redhat-package-manager  rpm;
  application/x-sea sea;
  application/x-shockwave-flash swf;
  application/x-stuffit sit;
  application/x-tcl tcl tk;
  application/x-x509-ca-cert der pem crt;
  application/x-xpinstall xpi;
  application/xhtml+xml xhtml;
  application/zip zip;
  application/octet-stream bin exe dll;
  application/octet-stream deb;
  application/octet-stream dmg;
  application/octet-stream eot;
  application/octet-stream iso img;
  application/octet-stream msi msp msm;
  application/json json;
  audio/midi mid midi kar;
  audio/mpeg mp3;
  audio/ogg ogg;
  audio/x-m4a m4a;
  audio/x-realaudio ra;
  video/3gpp 3gpp 3gp;
  video/mp4 mp4;
  video/mpeg mpeg mpg;
  video/quicktime mov;
  video/webm webm;
  video/x-flv flv;
  video/x-m4v m4v;
  video/x-mng mng;
  video/x-ms-asf asx asf;
  video/x-ms-wmv wmv;
  video/x-msvideo avi;
}

If you’d like to learn more about the different options available on Runway, check out the docs on web servers.

runway app config set PORT=4200

Commit your changes

Don’t forget to git commit the nginx.conf and mime.types files before you continue.

Deploy to Runway

runway app deploy

Run runway app open to see it live, or check the Runway UI. Check runway app logs if something’s off.