Runway
Menu
Menu 
Docs

Angular

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.

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.

Add a webserver

When you 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 will persit everything in dist already, but we’ll also need to configure a webserver 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:

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

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 webservers.

Deploy to Runway

Create an application on Runway:

$ runway app create
INFO    checking login status                        
INFO    created app "hilarious-impulse"                 
create app hilarious-impulse: done
next steps:  
* commit your changes  
* runway app deploy  
* runway open

Set the port:

$ runway app config set PORT=4200

And deploy:

$ runway app deploy && runway open

Congrats! You built an Angular app and it’s running on Runway! 🚀