Deploying Ionic apps on IBM Cloud Code Engine

With the recent announcement of Code Engine, IBM Cloud is positioned as a developer friendly environment. I this article I'll go over my experience with this exciting new feature and show how I was able to easily deploy an Ionic Progressive Web App into a managed multi tenant Kubernetes environment.

IBM Cloud Code Engine: focus on code not on managing infrastructure

Why did IBM add this new feature to their Cloud offering? The Cloud Native Computing Foundation 2019 Survey provides interesting insights on cloud native adoption. While container based deployments are becoming mainstream - even on production systems - major inhibitors can be found in: cultural challenges within the development teams, security and technical complexity.

In order to solve those challenges the Code Engine platform delivers a fully managed, server-less platform where developers can deploy their container images, batch jobs, or source code without having to manage the underlying infrastructure. The benefits are obvious: no need to size, deploy, or scale container clusters; no networking skills required; fast application deployment; security enforcement and a unified user experience across the different deployment types. Developers can, therefore, concentrate on coding rather than on setting up and maintaining environments.

Ionic framework: enabling portable mobile and web apps

Ionic Framework is an open source UI toolkit for building mobile and desktop apps using web technologies such as HTML, CSS, and JavaScript. It integrates popular javascript frameworks like Angular, React, and Vue. The development environment and libraries provide pre-designed UI components that adapt to all mobile devices and platforms and allow developers to ship apps to the app stores and as a Progressive Web Apps with a single code base.

When ever approaching development for apps or for web, I personally find it very useful to leverage Ionic and one of the cited javascript frameworks (take a look at this other article of mine on Ionic and React, if interested). The framework builds from the javascript code and creates platform specific apps incorporating native support for the mobile platforms or a static web site that will be accessible under the www directory that will be created alongside the one containing the source code.

Developing on the Cloud

So I thought I would give it a try at leveraging both the Code Engine and the Ionic for developing and deploying a web application. I found that it was pretty easy and straight forward to bring a new application to life on the web by spawning a container image providing an http server to serve the built assets.

Read on if you are interested in understating how it works and some hints on getting this to work right away.

Setting up your dev box

In order to be able to start developing your application you need to set up the Ionic development environment, this involves installing the Ionic Command Line Interface and the prerequisite NodeJs. The installer for Node can be downloaded for their site. After the installation you can verify the environment with the following commands.

$ node --version
$ npm --version

and proceed with the installation

$ npm install -g @ionic/cli

Just for reference here's my environment level:

$ node --version
v14.17.0
$ npm --version
6.14.13
$ ionic --version
6.16.1

You are ready for creating your app project. Ionic provides a nice set of starter apps for you and the process is pretty straightforward with the start command that asks all the relevant questions and creates the project for you.

$ ionic start Starter

Setting up the code repository

You are now ready for starting your magic as a developer but you still need a code repository for team collaboration, tracking issues and for deploying your application on the IBM Cloud. So let's set this up straight away with GitHub.

My preferred way of dealing with Git is through the GitHub Desktop app. The project folder is already created with the .gitignore file so that you are sure that you are not committing unneeded file into repository. Here's how the repository should look like.

Some important aspects to note.

In order to be able to use the repository with Code Engine make sure that you rename the master branch or create an additional branch named main. You can set the name up later in the IBM Cloud Environment if you do not wish to use this default.

The repository will contain the source code only, no build artefacts and no node modules either (those would be the www and the node_modules directories). Just make sure that you check in the package.json and package-lock.json files together with the other configuration ones in the main root directory of the repository. You are going to need those in the build phase of the container creation.

Define the container image

Finally, since we are going to be deploying a container, we will add to the repository a Dockerfile file. Let's take a look at that before we dive into the Cloud environment.

The docker container image creation process is split in two sections: in the first one we build the app and, in the second one, we serve the built assets.

For the build phase we start from a node image that comes with the ionic prerequisites already setup. We create a working directory and copy in there the Git repository with the configuration and source files. We then install the Ionic command line, the needed packages and run the build that will create the needed www dir.

For the server setup phase we start from a docker image running the apache http server, we change the configuration file so that the server listens on port 8080 (this is another default in Code Engine but it can be changed in the Cloud Console), we copy the static assets created during the build phase in the correct directory and define the port and entry-point for the image.

Deploy on IBM Cloud

That's basically it. We are now ready for creating our project and application on the IBM Cloud Code Engine. Before diving into the description of how to accomplish this I would like to point out that, so far, we have only created a front end application: the user interface that gets downloaded into a browser running on the pc or the mobile phone. We will probably need to add some backend server to our app that we can easily create as micro services or rest api based servers running also in the same Code Engine environment. So our final implementation will consist in more than a single app but will encompass some jobs other specific container images or, perhaps, bind those to additional Cloud Service endpoints (i.e. databases).

Let's take a look at how we can deploy our source code now. Once logged into our IBM Cloud account we can access the Code Engine service home page where we are presented with two fast start options: deploy your prebuilt docker image or provide your Gif repository for building it. We will choose this second one and enter the repository URL.

If we did not create a project yet, or if we want to deploy to a new one we are then give the option to do so. Creating a project involves specifying the Cloud multi zone location the will host the environment and providing a name for it.

Since we have setup our code and repository so that it can accomodate the defaults we can basically proceed with minimal changes now. We only need to review the build details wizard to make sure that we have all in place.

We have already set up our branch name as the default: main. As a build strategy we are going for Dockerfile as opposed to a Cloud Native Buildpack where the code gets inspected in order to determine which runtime to deploy (for more info on build strategies refer to this page). Finally we provide the needed info for the IBM Cloud hosted Registry that will hold the docker images.

We are now ready to hit the deploy button and let the magic happen. The application will be created and show up in pur project page along with a public URL that we can use to access the web app.

Wrap up

IBM Cloud is becoming even more developer friendly with the recent addition of the Code Engine feature. We experienced how easy it is to set up a Git code repo to hand over to the Cloud for deployment without having to set up any computing environment but just by writing a suitable Dockerfile. Moreover the environment that gets created has autoscaling capabilities and can scale down to zero for costs savings.

Lastly, a very interesting plus: our image is hosted on IBM Cloud Image Registry where it gets scanned for vulnerabilities and security flaws.