Tag: ng2

Deployment of Angular2 App to GitHub Pages

Angular 2, or just Angular as it’s now called, is new, exciting and constantly evolving.  While it’s great to be on the cutting edge of a JS framework, the process can be extremely frustrating at times…

I’m currently working through “Angular 2 – The Complete Guide“, an Udemy course by Maximilian Schwarzmuller.

I wanted to take a quick break to test how much of the course has sunk in, so I went back and rebuilt my Random Quote Generator App from the Free Code Camp frontend projects.  I picked this because it was fairly simple and I wanted to build an Angular project from creation to deployment without investing too much time.

Building the project was relatively quick and painless, which is a testament to Max’s course mentioned above.  You can see my GitHub repo here (and the app finally deployed here).  Given that it’s a static app (i.e. no backend), I figured GitHub pages would be a good place for deployment.

This is where the headache started…  One of the inherent problems when working something like Angular, that’s constantly changing is that many of the resources become irrelevant and incorrect very quickly (this one, no doubt, included).

I found multiple blogs and Stack Overflow answers, some written only months ago, claiming that you could deploy to GitHub pages with the following one command:

After much frustration, and multiple attempts at rebuilding and redeploying, I found that the deploy command was removed from the angular-cli.

So the command written above certainly wouldn’t work.  The functionality, however, is available through the angular-cli-ghpages npm package.

Before we proceed on how to use the angular-cli-ghpages package, there are a couple assumptions being made in this process that will need to be met if this is going to work…

First, I’m assuming that you have Node.js installed on your computer.  If not, visit the Node.js site for instructions for download.

I’m also assuming that you have an Angular app, associated with a GitHub repo, written and ready to deploy…  If not, go create something and commit it to GitHub!!

With those assumptions out of the way, input the following in a terminal to install the npm package globally:

Once installed, you’ll need to build the app.  In the app’s folder, run:

This will create a dist folder that contains the compiled code for your app.  Obviously, you’re going to want to change the above command to include your GitHub username and the repo name.

Then deploy:

or just:

You can find all the options at the angular-cli-ghpages site.

This will deploy a new branch to your GitHub repo called gh-pages branch. Make sure you’re using this branch as the source for your app.  You can find/change this option under the GitHub Pages section of the Settings tab of your repo.

It might take a few minutes for the app to show up on your page, be patient!

That’s it for now, I hope this was able to help.

-Jeremy

Prefer Heroku?  Here’s a good article if you’re having trouble deploying a static angular app to heroku.  The title says Vue, but it works great for angular now that they’re using webpack…

The MEAN Stack – A New Direction for Crooked Code!

It’s been about 8 months since I began the Crooked Code blog…  And so far it’s been a great experience!

While the overall purpose for writing the Crooked Code blog has been, and will continue to be, helping others learn to code, most of the posts fall under one of two major themes…

The first of these themes has been articles covering Algorithm Scripting Challenges in the Free Code Camp curriculum. Two of the most popular of these posts, based on pageviews, have been Symmetric Difference and Map the Debris.

The second major theme has been tutorials on JavaScript, including the Rubber Ducking Series I started a couple months ago based on (but not affiliated with) ‘You Don’t Know JS’.

Where to go from here??
Where to go from here??

While I plan to continue adding JavaScript tutorials, particularly the Rubber Ducking Series, I’m planning on putting a temporary hold on new posts covering Free Code Camp algorithms.

As you may have heard, Free Code Camp has announced they are adding a major expansion to their curriculum. A look at the current map of the beta version shows that many of the advanced algorithms will be supplemental to the main program.

Because of this, I’ve decided to wait until the beta is released into production before I continue writing up more algorithm challenges, as I have no way of knowing which challenges will make the final cut.

I am, however, very excited to announce that I’ve decided to add a third major theme here at Crooked Code – Angular 2 (ng2) and the MEAN stack.

Angular 2

I’m doing this for several reasons…

First, about 90% of my focus lately has been on learning Angular 2.  It’s the first JS framework I’ve learned, so the process has been a long one, and judging by many of the comments I’ve seen throughout the FCC community, I’m not the only one on this journey.  Which brings me to my second reason…

The final release of ng2 is so recent, many of the tutorials and videos out there are a mix of earlier release candidates and the final release all mashed together…

This causes some major confusion in building a working ng2 app, particularly in how to structure the project.  So I hope to shed some light on what I’ve found and save others some of the time I’ve spent (and continue to spend) making sense of it all.

MongoDB, express, Angular2 and NodeJS
MongoDB, express, Angular 2 and NodeJS

Further, I plan to highlight how the ng2 frontend framework ties into the rest of the MEAN stack.

Now that I’ve spent some time digging into Angular 2 on a deeper level, I’m planning on using my previous experience with Node, Express and MongoDB (with Mongoose) to build larger full stack apps.  I think this will be a great opportunity to share what I’m learning with the Crooked Code community.

That’s all for now,

-Jeremy