How to host an Angular2 app on GitHub Pages using Angular CLI

I’ve recently started playing around with Angular2 šŸ™‚ It takes a bit of getting used to, but I finally managed to build a demo app that I was ready to host online and share with friends. Since I already had the code up on GitHub, using GitHub PagesĀ to host it seemed like the most convenient choice. Easier said that done!

Since Angular2 uses TypeScript code, has lots of node dependencies and a ‘production mode’,Ā deploying on GitHub Pages turned out not to be so straightforward. But a few blog posts, github repos and comments, someĀ updates and only one reboot later, I managed to deploy the app šŸ˜€ Using Angular CLI, a command-line interface for building Angular 2 applications, surely made things easier! Here are the steps I took:

Step 1 – Update Node

Since I had an old version of node, I decided to update it to the latest version before installing Angular CLI.

I currently have version 6.10.0 of node and 4.4.0 of npm.

angular cli version

Step 2 – Install Angular CLI

The Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications. It can be installed by running:

Step 3 – Create and run a demo app with Angular CLI

After running these commands,Ā http://localhost:4200/ should point to the new app. Also, the app will automatically reload if you change any of the source files.

If you’ve tried creating an Angular2 app from scratch you probably noticed how many dependencies have to be configured. Angular CLI took care of all and also provided the scaffolding for a new app!

Step 3.1 – fix weird error that showed up when trying to create the new app

I assume it turned up because something was misaligned with the node-sass version that was installed. The error was fixed after running:

Step 4 – Deploy the app on GitHub Pages

First, you need to create a new repository for the app on GitHub. After that, you have to register the new repo and push the code to GitHub.

The code is now up, all there is left to do is to setup GitHub Pages for it.

Step 5 – Setup GitHub Pages

Angular CLI used to include a command for setting up GitHub Pages

ng github-pages:deploy

but it was removed from the latest version. The command created a new git branch named gh-pages, built a production version of the app, committed and pushed the code to the new branch. GitHub Pages wasĀ alsoĀ automatically set to start the app from this new branch.

The workaround was to use theĀ angular-cli-ghpages command.

It can be installed by running:

Before executing it, we need to create the dist folder for the project.

We’re now ready to run it:

And our app is finally up and running atĀ ! šŸ˜€

A few options are available for this command, you canĀ check them out on GitHub.

course review – Greening the Economy: Sustainable Cities

Greening the Economy: Sustainable Cities is yet another awesome course from Lund University. The course is available on Coursera. It’s the second course I took from Lund University, afterĀ Greening the Economy: Lessons from Scandinavia.

The course explores the influence cities can have on greening the economy. It covers subjects like urban transformation, infrastructure, experiments and living labs taking place in various cities and urban lifestyles and how individual choices can be influenced by local infrastructure.

I loved that they included not only course lectures, but also videos from different conferences and presentations of various projects. The examples are made by some of the key players in the smart cities world, like UN-Habitat and WWF and show some activities that promote sustainable cities in Scandinavia and around the world.Ā This way they present not only a theoretical part, but also some practical examples in the field šŸ™‚

The course also recommends some short readings that offer an insight on the latest studies on smart cities.

The course takes 5 weeks to finish, with around 5 hours per week for videos, readings and assignments.

What did you think of theĀ course?Ā 

Step forward in 2017: Build in-demand career skills with Coursera

Online courses about smart cities

I think it’s about time to revive this blog šŸ™‚ Hopefully I’ll start posting more regularly from now on.

I’ll start with my new interest, smart cities šŸ™‚ What is a smart city? In short, it’s a city in which various information and communication technology and Internet of ThingsĀ solutions were implemented in order to improve the quality of life. It has a wide range of applications: from real-time air quality monitoring to apps forĀ city officials to interact directly with the community, to traffic management and loads of others.

I’ve recently become interested in the field and started learning more and more about it online. Apart for cool app ideas, I’ve also looked into online courses in order to get a strong background in the subject.

So, inspired by the structure of The Dual Masterā€™s in Sustainable Smart Cities from the University of Alabama at Birmingham and Staffordshire University, I looked for free online courses and came up with the following list.

The list is available on GitHub.Ā Star

I’ll keep adding to it as I find new online resources. And also use it to track my progress. šŸ™‚

Do you know any good smart cities books, online classes or other useful resources?

recommended-book: Clean code

From naming variablesĀ andĀ methods, to picking function arguments, to error handling and organizing classes and even comments and formatting, the book is full of suggestions on writing cleaner code. Clean as in easy to write, follow and understand šŸ™‚ The book also has some hands on examples that cover all the discussed topics. I agree that this book is a must-read for any developer.

Clean code cover

From the back cover:

Readers will come away from this book understanding

  • How to tell the difference between good and bad code
  • How to write good code and how to transform bad code into good code
  • How to create good names, good functions, good objects, and good classes
  • How to format code for maximum readability
  • How to implement complete error handling without obscuring code logic
  • How to unit test and practice test-driven development

This book is a must for any developer, software engineer, project manager, team lead, or systems analyst with an interest in producing better code.

I’ll surely pay much more attention to the code I write from now on šŸ™‚

Improving posts on facebook pages using the power editor

I recently discovered the facebook power editor. A really useful tool for creating and managing your facebook pages posts and ads. In this tutorial I will describe how to use it in order to make better posts for your pages.

Apart from the usual components that you can post on your page (text, links, images), using the power editor you can also add call for action buttons to your Ā link posts. Let’s see how.

First, open power editor and select theĀ manage pages option from the dropdown at the top of the page.

using the facebook power editor

To be able to view the posts of your page and create new posts, the first thing you need to do is to load the page in the editor. You the download to power editor button to do this. A popup similar to this one will show up:

using the facebook power editor

In it, select the pages option and fill in the url of your page.

Your pages posts will load and you will be able to view them and their related stats (reach, number of people engaged, number of people talking about it).

Now use the create post button to load the following popup and input the data for your new post. Only the link type posts have more options that can be added from here. The others have the same options as when posting directly on the page. For links you can fill in the following info:

  • url – the actualy link
  • post text – the text that will show up above the link preview part
  • call to action – here you can select the text that will show up on the button from the link preview
  • link headline – this will show up as the title in the link preview
  • display link – here you can add a more detailed description of you link
  • description – this is to inform users why they should click on the link and what they should expect to find there
  • picture – here you can either write the url of a picture you wish to use or upload it from your computer

Then for posts you need to check the ‘This post will be published on the Page‘ option. After you click it you will be able to also enter targeting data like languages and location.

using the facebook power editor

After you click the create post button, the new post will show up in your editor, but it is not yet published on your page.

You can check the preview by clicking on the post.

When you are ready to publish the post, use the publish postĀ button, you can either choose to post it immediately or schedule it for later.

Notice the upload changes button turns green.

using the facebook power editor

Click it and that’s it! šŸ™‚ Your post will be successfully posted on the page or scheduled.

I hope this will help you improve your facebook posts. Let me know if you have questions or comments.

As I previously mentioned, the power editor can also be used for making better facebook ads. I haven’t tried that yet, but I did find a good article on how to do that! šŸ˜‰