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.

How to add confirmation emails to google forms

Have you ever used google forms to get some input from your users? It is really easy to set up a google form, add the required input fields and share the form with your users. Here’s an example of a google form.

After the users fill in the form, they will see a short confirmation message on the screen and their responses will be stored. You might also want your users to get a confirmation email after filling out the form. This is not the default behavior of google forms though so you will have to add a small script to do so.

If you fill in and submit the example form you will receive such a confirmation email and see what we are going to set up.

Here’s what you have to do:

  • from the form edit screen choose the tools menu option
  • pick script manager and click the new button
  • you will be redirected to a new page for adding the script
  • pick form in the popup
  • add a name for your script file
  • clear the code if there is any example code in there
  • add the following code:

The code is pretty straightforward: it received the user response as a parameter, it gets an array with the individual answers for each question (itemResponses), it gets the response for each question, sets the subject and the body of the email to be sent and sends the email to the user.

There’s is only one more step to go, we need to set a trigger for this function:

  • go to resources from the menu
  • pick current projects triggers
  • you will notice there are no triggers set up. click on click here to add one now
  • you need to select the method to run (onFormSubmit) and the trigger event from form and on form submit
  • you can also set the notification options – the default is to receive a daily email with the errors that come up, but for testing purposes you could set it to send error messages immediately
  • click save and authorize the app as requested

And that’s it! you now have the needed script. You need to go back to the forms edit page, from the scripts manager popup you need to refresh the scripts list and pick the newly added onFormSubmit script.

And you’re done! You’re ready to test out your form and send it out to your users!

Let me know if you have any questions! 🙂

Organizing Hierarchical Databases

I was researching a better way of organizing the database of one of my projects and came across an interesting article. The article is about organizing hierarchical data in mysql databases. Here it is. The two methods proposed are very well explained and also the advantages and disadvantages of using each method are presented. It helped me get a clear picture of the available methods and pick the best one for my project 🙂