100 days of Angular 2

Ahh, the new car smell.

Already there's a lot of magic going on that I don't quite understand. I have a basic idea what TypeScript is, but this Typings registry is a mystery. I'm not sure what SystemJS is doing but I'll just close my eyes and proceed.

The npm install went fine, but typings install failed. They reccomend running npm run typings install but that also failed with a Unable to connect, unable to get local issuer certificate which is probably due to my corporate proxy.

I tried a few suggestions from typings issue #106 to no avail. So I looked through issue 463 but that didn't help. Although I have a .npmrc file with my proxy defined in there for npm, Typings doesn't honor it.

After some more Googling I realized I mispelled my .typingsrc file. In it, I listed my proxy in INI format:

rejectUnauthorized=false 

which is not JSON format:

{
    "rejectUnauthorized" : false
}

despite some people online suggesting to do it that way.

Okay, things look like they installed. I'll just close my eyes and ignore all the deprecation warnings that appeared for Typings.

The node_modules folder is only 72 MB, which is about 400 MB less than I was expecting.

On Step 3 of the quickstart I created my first component. I'm using the latest version of the Atom editor with no plugins installed. Hey, there's no syntax highlighting! What's going on here?

Anyways, I proceeded along with the quick start tutorial. I created the index.html and the main.ts and ran the npm start command in my shell.

It's alive! Out of curiosity I took a look at the network tab in the Chrome dev tools.

39 requests and 1.8 MB transferred for a basic Hello World Angular 2 app. I'm sure this is because I'm in a development mode, but this is a metric I want to watch over time. I need to figure out how to "production-ize" this app ASAP. I'd expect a few hundred KB tops for such a basic website.

Deploying to the world wide web

So I have the Hello World Angular 2 app running locally in my development environment, but what do I need to bundle/transpile/serve to the real world, and how do I do it? Some quick Googling made my head spin. Most of the Stackoverflow answers involve 100+ line configurations for Gulp/Grunt/Webpack/SystemJS build pipelines that sound really overkill. I just want to show my super sweet Hello World app to my uncle Bob.

Okay. New plan.

1. Commit this code into a repository.
2. On a server, clone the repository. Run npm install to install the dependencies there.
3. Run tsc to transpile the .ts files into .js files
4. Use the included lite-server to serve up the files on some port, like 3000.
5. Stick nginx in front of lite-server so I can route traffic from the hostname at port 80 to the hello world app.

In detail:

git init

Then define my local git settings, which are different than my global settings:

git config user.email stephen@netinstructions.com
git config user.name "Stephen"

I created a .gitignore file that ignores the following:

node_modules/
typings/
.typingsrc
app/**/*.js
app/**/*.map

Then:

git add .
git commit -m "day 1 initial commit"

On GitHub I created a new repository. I added the remote to my local and pushed.

Now on my server (in my case, a cheap t2.micro EC2 instance)

git clone https://github.com/netinstructions/100-days-of-angular2
cd 100-days-of-angular2/
npm install

Then transpile the .ts files into .js files. This command didn't initially work, so I also had to install Typescript, and I just decided to install it globally.

npm install -g typescript
tsc

Then I ran the command to start it up, using screen to keep it running.

screen
npm run-script lite

I pressed Ctrl-A and 'd' to detach the process. Reminder to future self: Use screen -r to reattach.

Finally I'll stick nginx in front of the server.

I created a file in /etc/nginx/sites-available/100daysofangular2.com with the following:

server {
  server_name 100daysofangular2.internetuproar.com;
  listen 80;
  listen [::]:80;
  location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header HOST $http_host;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass http://127.0.0.1:3000;
    proxy_redirect off;
  }
}

Note the server name (which will have to match DNS records) and the port (which will have to match lite-server) above. Then I created a symbolic link

sudo ln -s /etc/nginx/sites-available/100daysofangular2.com /etc/nginx/sites-enabled/

And test the nginx config, then reload:

$ sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
$ sudo service nginx reload

I also set up a CNAME entry for one of my domains, which matches the nginx config file above:

Note that I actually set up the CNAME entry before doing any of the steps above, since it usually takes a couple hours to propagate across the internet.

Finally, I visited the URL:

Holy crap! It worked! And now I can show Uncle Bob my first Angular 2 app!

Day 1 summary

Quickstart wasn't quick. There's lots of magic happening, especially around Typings/SystemJS since I'm the least familiar with them.

There isn't great Typescript support for Atom out of the box, so I'll need to find a good plugin or switch to a different editor.

The basic, Hello World app is really big, so very soon I'll want to figure out how to make a "production version" with a better build pipeline.

And finally, the lite-server that I used to deploy my app goes directly against its intended use. As the lite-server instructions state, it is only designed to be used in development environments. So we'll need to take care of that in the near future. The deployment process should be automated, but I'll first have to come up with a better hosting solution.

I still haven't learned much about Angular 2. That'll happen tomorrow.

See day 2 here.