If you haven’t read part 1 or 2 yet – Get Part 1 here and Part 2 here.
Background – Angular – Keycloak blog series Part 3
Welcome to part 3 of the blog series called Integrating Keycloak with an Angular 4 web application. Before we continue where we left off in part 2, let’s do a quick recap of part 2 as well as what we’ll cover in this part of the series.
In part two, we explored some background information regarding Keycloak realms and clients. We then continued to create a new realm, client and users. Our Keycloak environment is now set up and configured successfully for our purpose. In this part we’ll focus on setting up and configuring the Angular environment. Let’s get to it.
Software Prerequisites
You will need several software prerequisites in order to follow along starting from this part onwards.
1. NODE JS
You will need to install the NodeJS runtime framework in order to follow along.
- You can download the NodeJS framework by navigating to this link: https://nodejs.org/en/
You can choose to install the LTS (Long Term Support) version or the latest current version. Just be sure to install a version that is version 6.9 and up, as we will be working with the Angular CLI library.
2. JAVA JDK
You will need to install a valid Java JDK (Java Development Kit) in order to follow along with this tutorial. If you don’t have any Java JDK installed on your system you can quite easily obtain the install files from Oracle’s website by navigating to the following link: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Please note that you will have to accept the Oracle License Agreement before you will be able to download the JDK install file.
Numerous options are available for installers; simply choose the one that is right for your operating system and install it.
3. JAVA JRE
Install the latest version of the JRE (Java Runtime Environment) binary to ensure that you can execute java based compiled programs. If you don’t have any JRE binary installed on your system you can easily download and install the binaries from Oracle’s website.
Navigate to the following link in your web browser: http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html
Once again you’ll have to accept the Oracle License Agreement before you will be able to download the JRE install file.
Simply choose the right install file for your operating system and install it.
Note that it’s probably a good convention to install both the x86 (32-bit) and x64 (64-bit) binaries, just in case you might want to make use of them in the future. As I’m on a 64-bit operating system, I’ll make use of the 64-bit libraries throughout the entire tutorial series. If you are on a 32-bit operating system you won’t run into any problems, just make sure to install the 32-bit libraries.
Installing Node JS
The installation steps of NodeJS will vary, based on the specific operating system that you use.
If you’re using Microsoft Windows you should have an installer file. You can just run that and follow the various prompts. Note that in some cases you’ll be required to run the installer with administrative privileges. This can be done easily by simply right clicking on the install file and selecting the Run as Administrator option.
If you’re using Apple macOS you should have an installable .pkg file, simply run this and follow the various prompts.
Once you’ve installed NodeJS, open a new command prompt window (on Microsoft Windows) or a terminal window (on Apple macOS or Linux). We want to verify that NodeJS is installed as well as the Node Package Manager (npm); execute the commands as specified below.
node -v
This will return the currently installed node version.
npm -v
This will return the currently installed npm version.
If you want more help on installing NodeJS, feel free to go through their documentation on their website or by doing a simple google search.
What this command does is to check which version of the NodeJS Interpreter and Node Package Manager is installed on your machine. If you see values like those in the figure above, you’re all sorted. If you have versions that are greater than mine, it’s also fine, but if you have versions lower than mine you might consider upgrading to the latest versions if you plan on following along with this tutorial series.
Installing the Angular CLI
Let’s first discuss what exactly the Angular CLI is and why it is very beneficial to use it. In fact, I’d go so far as to say if you don’t use it there has to be some special reason for it. Angular CLI (Command Line Interface) is a tool to initialize, develop, scaffold and maintain Angular applications. Instead of doing things manually we can make use of the Angular CLI, which is an excellent command line tool, to speed up our development and ensure that we can easily maintain our Angular applications.
First things first. We need to install the Angular CLI as a global library. You have two choices when it comes to installing dependencies: install packages globally or locally. The fundamental difference between global packages and local packages is as follows. When installing a package globally it basically means that you’re installing the package onto your system as a sort of ‘program’. When installing packages locally you’ll be installing the specific package into the root of your project. So, in essence, a general rule of thumb would be to install a global package if you need to interact with it through terminal commands or something similar, or to install local packages if it’s project specific.
A good example of a global package installation scenario would be installing the Angular CLI, as we will be using the Angular CLI commands throughout the project. A good example of a local package would be installing the Twitter Bootstrap framework locally, as we’ll only reference the library in our project.
Without further ado, let’s jump in and install the Angular CLI. It’s worth noting that you should be able to run this command from any directory via the command prompt or terminal (as we’re installing it as a global package). Open a command prompt or terminal window and type the following command to install the Angular CLI globally (as can be seen below).
npm install -g @angular/cli@latest
Let’s discuss the command in parts. The npm install part means that we’re invoking the Node Package Manager and want to install a new package. The -g part means that we want to install the package as a global package. The @angular/cli part means that this is the package name we want to install. The last part @latest specifies the version of the package that we want to install. So in short, what this command means is that we want to install the latest stable version of the Angular CLI as a global package.
Once you hit the Enter button on your keyboard the Node Package Manager will retrieve all the necessary dependencies and install the Angular CLI package. It will display a file system tree when it’s finished with the install, showing you all the packages it installed.
We are now ready to create our new project using the Angular CLI. In a moment you’ll see just how easy it is to create a new Angular project with Angular CLI.
First you need to navigate to the specific directory where we want to install the project. Do this via a Command Prompt or Terminal Window.
Creating a new Project
You only have to execute one command to create the new project and everything will happen automagically. As before, we will discuss the command. (See below for the command).
ng new angular-keycloak
This first part ng means that we are invoking the global installed library we installed just now (Angular CLI). The new part means that we want to create a new project. The angular-keycloak part is the project’s name. You can use your own name if you want to.
After you typed in the command press Enter on your keyboard and the Angular CLI will do its thing. First it will create the project structure, after which it will install all the default packages via the Node Package Manager. See the figure below for example output.
Note that this might take a while if you have a slow internet connection, or if you’re not using an SSD (Solid State Drive).
As you can see, the console output shows us that the project has been successfully created.
Closing thoughts for Part 3
In this part we’ve covered quite a lot in terms of setting up and configuring the Angular environment. We now have a base project to work from. In the next part we’ll continue where we left off by installing Bootstrap v4 and integrating Keycloak into the project.
If you want more information on Keycloak, Angular JS or Node JS you can visit the links below to read up, practice and improve your skill-set.
- Angular: https://angular.io/docs
- Node JS: https://nodejs.org/en/docs/
- Keycloak Server Administration Guide: https://www.gitbook.com/book/keycloak/server-adminstration-guide/details
- Keycloak Official Documentation: https://www.gitbook.com/book/keycloak/documentation/details
- Keycloak: http://www.keycloak.org/index.html
If you have any ideas or requests for implementing any Angular 2+ features (in the context of this blog series), feel free to share it with us in the comment section below.
Related Reading
If you enjoyed this post, you may also be interested in:
