100 days of Angular 2 - Day 2: A temporary, hacky hosting solution

This is day 2 of my 100 days of Angular 2! See day 1 if you want.

How to host an Angular 2 application?

I started the day doing some research on how people are hosting their Angular 2 applications, since my current solution of running lite-server in a "production" environment goes directly against the advice of the lite-server documentation.

Let's see... Node.js and Express are popular choices for hosting Angular 2 applications. The current Angular Universal docs contain information for getting it set up with Node.js/Express and ASP.NET, but no other server side frameworks. I guess Node.js/Express it is then.

If you haven't heard, Angular Universal let's you render your Angular 2 application on the server side and send that to your visitors (or robots/web crawlers). It's crucial if you want your site to be discoverable in search engines such as Google. Another bonus is that the initial load time can be decreased and site previews are rendered correctly such as when someone links to an Angular 2 page on Facebook / G+, LinkedIn, etc. Other benefits are listed in their design document.

While I was peaking around the Angular Universal, I noticed that SystemJS is currently not supported and they suggest using Webpack.

As an aside, I found it hilarious that they tagged SystemJS support to be an urgent, half day effort 7 months ago.

But anyways, looks like I'll need to learn Webpack in the near future migrate off of SystemJS that the Angular 2 quickstart and tutorial started me off on.

Enough research for today

Time to actually start learning Angular 2 by following along with their official Tour of Heros tutorial.

But heros are overrated. Vegetables are the new hotness.

You'll notice I'm using a different editor today, specifically Visual Studio Code. The Atom editor didn't have syntax highlighting out of the box for TypeScript, so I thought to find a TypeScript plugin for it, but the installation of that plugin failed. Apparently I was missing certain dependencies and Atom didn't feel like resolving them for me.

Visual Studio Code has been pretty pleasant to work with so far. It offers all of the syntax highlighting out of the box, as well as some form of autocomplete / intellisense as I'm typing. The built in TypeScript linter/checker thing is also putting red squiggles under my typos. From a plain old Javascript world, this is a fantastic welcome.

Of course I changed the colors to personalize the app.

At some point I got annoyed by all the auto generated (derived) .js and .js.map files cluttering up my workspace. After some googling I found out there is a way to hide derived JavaScript files in Visual Studio Code.

The TypeScript compiler continuously watches the .ts files and compiles (or "transpiles" if you want to be hip) the .ts files into .js files and their corresposing .js.map files (which can be helpful for debugging), but you won't ever be modifying these files yourself, so there's no real point in seeing them.

It's the little things that can drive you crazy or make for a pleasant coding experience.

Anyways, I completed the steps two through six of the official tutorial which covered:

  • Multiple components talking to one another
  • Services
  • Routing

Here's what the app does so far:

The same hacky deployment

I used the same temporary publishing solution as yesterday, but didn't have to do the DNS/nginx setup again, so the steps were just:

(on my remote server)
$ screen -r (to reattach my running session)
Ctrl-C (to stop the running process)
$ git pull
$ tsc
$ npm run-script lite
Ctrl-A and 'd' (to detach from the session)

This is still not the recommended way to publish Angular 2 applications, but it works for now. Uncle Bob can see my latest achievement.

Summary

Today involved much more Angular 2 than yesterday. So far so good.

I'll want to get a code formatter soon that will take care of my indentation, curly brace placement, etc every time I hit the save button. Hopefully there'll be a suitable plugin for Visual Studio Code. This will keep my code in a consistent format, which helps with readability and also any diffs/merges/history for source control.

And again I'll want to figure out a proper hosting solution instead of lite-server so I'll probably research Express and Webpack before day 3.

As a reminder, the full code is available on GitHub.

See day 3 here.