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
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.
Of course I changed the colors to personalize the app.
At some point I got annoyed by all the auto generated (derived)
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
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
$ 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.
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.