Creating a progressive web app with Ionic Pro - part 1

February 28, 2018, 10:45 pm Categories:


Ionic Pro, if you're not familiar with the service, is an online development suite allowing application development for mobile apps and PWA's (Progressive Web Apps) using a variety of different tools from the Ionic ecosystem.

In part 1 of this tutorial we're going to use Ionic Pro to develop an Ionic application (and also take a quick look at some of the features available for use with this online service).

In part 2 of this tutorial we're going to develop this Ionic application so that we end up with a fully functional realtime chat app using

In part 3, the concluding part of this tutorial, we're going to explore taking the completed realtime chat application and converting that into a Progressive Web App which we'll test online.

By the end of this three-part tutorial you should have an application that looks like the following (your content will, of course differ from that represented in the screen capture below):

Demonstration of a real-time Ionic chat application in use with text and images being posted

Without further ado, let's crack on with creating our application!

Getting started with Ionic Pro

If you're familiar with using Ionic Pro then you can skip this section - otherwise read on (the following assumes you are new - or relatively new - to Ionic Pro).

If you're unfamiliar with this service then Ionic Pro acts as a Backend as a Service (BaaS) where developers can make use of the following tools:

  • Ionic Creator - allows the prototyping and generation of Ionic applications with tools including a drag and drop GUI and code editor
  • Ionic View - allows for the sharing and testing of Ionic applications with other developers/team members or clients
  • Ionic Deploy - enables realtime updates for live apps with code pushes and content changes before and after an application is live in the App Stores
  • Ionic Package - generates native binaries in a cloud environment for publishing web based code to iOS and Android applications
  • Ionic Monitor - provides error tracking and reporting functionality at the web code layer

As developers we can also use the Ionic Pro service to create applications which are then able to be linked to existing or new applications generated from the Ionic CLI on our own machines.

This is the option we're going to explore using when developing our realtime chat application with Ionic Pro (we'll touch upon pushing code updates to Ionic Pro and generating builds but our focus will be concerned with generating an application and linking that to Ionic Pro).

To start with you'll need to create an account (assuming you don't already have an account that is) with Ionic Pro by navigating to the following URL and clicking on the Sign up link towards the bottom of the page.

This will then present you with the following form to complete:

Ionic Pro sign-up screen

You will then be invited to select one of the following the Ionic Pro plans to suit your development needs and budget:

  • Kickstarter Edition (Free with unlimited public apps but limited access to Ionic Package, Deploy and Monitoring services)
  • Developer Edition ($29/month with full access to all Ionic Pro features)
  • Team Edition ($49 per developer/month - includes everything in Developer along with premium support and Ionic View testing tools)

For the purposes of this tutorial we're going to go with the Kickstarter Edition (you can, of course, always upgrade later and, if you're generating healthy client revenues from your projects, then there's no reason not to!) as this is not only free but allows us to explore and familiarise ourselves with some of the benefits of using the Ionic Pro BaaS:

Ionic Pro development plan options from free to paid for services

After selecting the Kickstarter Edition and clicking on the Select plan button you'll arrive at the final screen of the signup process which provides a summary of your selected plan and invites you to Get started with Pro.

It's important to remember that with the Kickstarter Edition we won't be able to access all of the features of the Ionic Pro BaaS so we are only going to focus on how to create an application and link that within Ionic Pro for the purposes of project management:

Finalising the Ionic Pro account signup process

After clicking on this button - to complete the account signup process - you will then be forwarded to a screen inviting you to create a new application.

Creating an Ionic Pro application

For the purposes of this tutorial, we'll use the name Ionic Communicata for our Ionic application.

Leave the dropdown menu selection defaulted to Personal apps (there is an option where you can choose to create apps for organisations instead but that's not relevant for the purposes of this tutorial):

Ionic Pro - creating a new app screen

Once the app has been created within Ionic Pro you are then presented with the app overview screen which allows you to get started with any of the following options:

  • Monitoring - Track errors
  • User testing
  • Deploying live updates
  • Building native binaries
  • Sharing the application with other developers
  • Hosting the application as a PWA (coming soon - as of February 2018)

Ionic Pro application options

Notice the CODE tab towards the top of the screen?

This allows us to connect code to the application we've just created with Ionic Pro. At the moment we have simply created a container if you will for where our application code will be assigned. Our next step will be to actually take an Ionic CLI generated application and link this to the Ionic Pro application.

As you'd expect from the team at Ionic the interface for guiding developers through this particular task is pretty user friendly and fairly straightforward.

We have 2 options available for connecting code to the Ionic Pro application:

  • Creating a brand new application with the Ionic CLI on our desktop machines
  • Taking an existing Ionic application and integrating this with the Ionic Pro created application

Linking the Ionic Pro application with Ionic CLI

We're going to select the Start a New App option for connecting with Ionic Pro.

Note the first line of the code snippet displayed under this option - this will, when run within the Ionic CLI, allow an Ionic application to be generated on your machine that is directly linked to the Ionic Pro application we just created. By doing so code is then able to be shared from your machine to the repository for the Ionic Pro application and builds subsequently generated as a result.

Nice workflow huh?

Connecting your app to Ionic Pro

Open your system CLI software, navigate to a directory on your machine where you would want to store/develop your Ionic application and begin the process of connecting a new Ionic application with Ionic Pro by logging in to your account with the following command:

ionic login

You will be prompted for your Ionic Pro e-mail address and password.

By taking this step the CLI directly connects us to our Ionic Pro account and, through performing its magic in the background, allows us to begin interacting with the service accordingly.

A word of warning - IF you have multiple Ionic Pro accounts MAKE sure you are signed out of any previous account first with the following CLI command:

ionic logout

There's nothing worse than wondering why your application isn't being generated or linked properly - even though you are following all the correct steps - only to find that you were in the wrong account to begin with!

I've made this mistake once or twice before so make sure you don't! :)

Once your account details have been successfully entered the Ionic CLI will present you with a prompt requesting the setting up of SSH access for the application:

[OK] You are logged in!
> ionic ssh setup
Looks like you haven't configured your SSH settings yet.

? How would you like to connect to Ionic Pro? (Use arrow keys)
❯ Automatically setup new a SSH key pair for Ionic Pro 
  Use an existing SSH key pair 
  Skip for now 
  Ignore this prompt forever 

This is an important step as the Ionic CLI and Ionic Pro will use SSH (Secure Shell) to allow code to be pushed to the Ionic Pro repository courtesy of Git.

In order to allow this to take place we need to generate an SSH key pair (that is if you don't already have an existing SSH key pair that you might want to use for this purpose - if so then you can select the second menu option from the CLI prompt instead).

To do this we go ahead and select the Automatically setup new a SSH key pair for Ionic Pro menu option which prints the following information and request prompt to the terminal:

? How would you like to connect to Ionic Pro? Automatically setup new a SSH key pair for Ionic Pro
The automatic SSH setup will do the following:
1) Generate a new SSH key pair with OpenSSH (will not overwrite any existing keys).
2) Upload the generated SSH public key to our server, registering it on your account.
3) Modify your SSH config (~/.ssh/config) to use the generated SSH private key for our server(s).

? May we proceed? (Y/n)

Select Yes as the set-up process simply wants to modify the config file in the .ssh directory to use the generated SSH private key for Ionic CLI to Ionic Pro communication from this point forwards.

This is perfectly secure and a necessary step to be taken so don't allow yourself to be concerned with regards to any security risks or issues raised from granting such permission.

As the SSH key pair is being generated and configured the following process takes place:

  • Creation of an ionic directory within the .ssh directory
  • Prompt to provide a passphrase for the private key
  • Repeat prompt for the same passphrase
  • The generated public/private key pair is stored within the ionic directory
  • The generated public key is then added to your Ionic Pro account
  • The generated private key is then set to be the active SSH key for secure communication with Ionic Pro

All of which is demonstrated in the following output that's printed to the terminal (note that I've replaced the key details and machine details with my own placeholder values for security reasons):

> ionic ssh generate /Users/USER-NAME/.ssh/ionic/REPLACED-FOR-SECURITY-REASONS
Created ~/.ssh/ionic directory for you.
You will be prompted to provide a passphrase, which is used to protect your private key should you lose it. (If someone 
has your private key, they can impersonate you!) passphrases are recommended, but not required.
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
[OK] A new pair of SSH keys has been generated!
     Private Key (~/.ssh/ionic/REPLACED-FOR-SECURITY-REASONS): Keep this safe!
     Public Key (~/.ssh/ionic/ Give this to all your friends!

Next steps:
- Add your public key to Ionic: ionic ssh add ~/.ssh/ionic/
- Use your private key for secure communication with Ionic: ionic ssh use ~/.ssh/ionic/REPLACED-FOR-SECURITY-REASONS

> ionic ssh add /Users/USER-NAME/.ssh/ionic/ --use
[OK] Your public key (SHA256:REPLACED-FOR-SECURITY-REASONS) has been added to Ionic!
> ionic ssh use /Users/USER-NAME/.ssh/ionic/REPLACED-FOR-SECURITY-REASONS
/Users/USER-NAME/.ssh/ionic/REPLACED-FOR-SECURITY-REASONS is already your active SSH key.
[OK] SSH setup successful!

IMPORTANT - Do NOT share your private key with any person, organisation or service as this would immediately render useless any security benefits of using the public key for SSH communications. When looking to exchange keys for SSH communication with different services (I.e. BitBucket, Git etc) then share the public key only!

Now that secure communication has been enabled and configured we can connect the Ionic Pro application that we generated earlier with a brand new Ionic application that we're going to generate using the following CLI command:

ionic start --pro-id fc84eaff

This will then run through the project generation cycle starting with the following information/template prompt:

Using ionic-communicata for name.

? What starter would you like to use: (Use arrow keys)
❯ tabs ............... ionic-angular A starting project with a simple tabbed interface 
  blank .............. ionic-angular A blank starter project 
  sidemenu ........... ionic-angular A starting project with a side menu with navigation in the content area 
  super .............. ionic-angular A starting project complete with pre-built pages, providers and best practices for Ionic development. 
  conference ......... ionic-angular A project that demonstrates a real world application 
  tutorial ........... ionic-angular A tutorial based project that goes along with the Ionic documentation 
  aws ................ ionic-angular AWS Mobile Hub Starter

Select the blank template option from the displayed menu choices (we'll be developing a single page application for the purposes of this tutorial so a blank template is perfect for our needs).

This is then followed by a prompt requesting whether we want to integrate the newly CLI generated app with Cordova to natively target iOS & Android.

We'll answer Yes (as we can, if we so desire, publish the application to those platforms in addition to generating the project as a Progressive web App - after all, it certainly won't hurt us to add this in as a project "extra"):

✔ Creating directory ./ionic-communicata - done!
✔ Downloading and extracting blank starter - done!

? Would you like to integrate your new app with Cordova to target native iOS and Android? (y/N) 

Once we've answered the prompt the application is subsequently generated with the following output being printed to the terminal at each stage:

✔ Personalizing ionic.config.json and package.json - done!
> ionic integrations enable cordova --quiet
✔ Downloading integration cordova - done!
✔ Copying integrations files to project - done!
[OK] Added cordova integration!

Installing dependencies may take several minutes.

  ✨   IONIC  DEVAPP  ✨

 Speed up development with the Ionic DevApp, our fast, on-device testing mobile app

  -  ????   Test on iOS and Android without Native SDKs
  -  ????   LiveReload for instant style and JS updates

 ️-->    Install DevApp:     npm i

✔ Running command - done!
> git init
> npm i --save -E @ionic/pro
✔ Running command - done!
> ionic link fc84eaff
✔ Looking up app fc84eaff - done!
> ionic config set app_id "fc84eaff" --json
[OK] app_id set to "fc84eaff" in ./ionic-communicata/ionic.config.json!
> ionic git remote
> git remote add ionic
[OK] Added remote ionic.
[OK] Project linked with app fc84eaff!
> git add -A
> git commit -m "Initial commit" --no-gpg-sign

Next Steps:
* Go to your newly created project: cd ./ionic-communicata
* Get Ionic DevApp for easy device testing:
* Finish setting up Ionic Pro Error Monitoring:
* Finally, push your code to Ionic Pro to perform real-time updates, and more: git push ionic master

In a nutshell the above process simply creates the application, connects this to Ionic Pro and sets up the Git repository for allowing the pushing of subsequently developed code for the application to Ionic Pro.

All we had to do was answer a few prompts and then sit back and allow the Ionic CLI to handle the various tasks and requirements on our behalf.

Nice and easy!

Now all we need to do is change into the directory of the newly created Ionic application like so:

cd ./ionic-communicata

Publishing updates

With the application now created and connected with Ionic Pro (courtesy of the SSH key pair that was established as well as the ionic start command with the --pro-id flag value) we can now commit code, when and where required, from the Ionic CLI with the following command:

git push ionic master

You'll then be prompted for the passphrase of the SSH key pair that was created for you earlier in this tutorial.

Once entered the code push will be triggered and you should see a realtime build process taking place for the application within your Ionic Pro account as demonstrated in the following screen capture:

Ionic Pro build process being executedAs Ionic Pro uses Git for code management you can of course add messages for each commit that you make.

That pretty much concludes what we needed to cover in this first part of the tutorial.

In part 2 of this tutorial we'll begin development of the ionic-communicata application, integrating the library into there, to create a functional, realtime chat application that will then be converted to a PWA in the final part of this tutorial series.

In summary

Over the course of this first tutorial of a three part series we've familiarised ourselves with using Ionic Pro to connect a newly created Ionic application for the purposes of project management (as well as gain subsequent access, where required, to Pro features such as Ionic Monitor, Deploy and Package).

Hopefully, if you're new to Ionic Pro, you can see just how powerful and effective the various features of this BaaS are for Ionic app developers in terms of the following benefits:

  • Creating and project managing applications through one centralised location
  • Sharing app builds with team members, other developers and or clients
  • Diagnosing bugs and issues with application code at the web layer
  • Generating native build wrappers for iOS & Android

Granted we've only skimmed the surface of some of these in the above tutorial but, nonetheless, you've probably gained a pretty good idea of just how useful Ionic Pro could be within your own projects (and/or those of your development team).

More than anything else though I wanted to share with you how easy it was to connect your applications with Ionic Pro - and set that up for further development with the next tutorial in this series.

If you enjoyed this tutorial then feel free to share your thoughts, reactions and suggestions in the comments section below.

If you liked what was written here then please consider signing up to my FREE mailing list to stay updated on further articles and e-books that I have in the pipeline.



Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.