StrongLoop, Ionic, and IBM Bluemix

This post is more than 2 years old.

Over the past few weeks I've been digging deep into StrongLoop and rather enjoying the heck out of it. As I said in my earliest post - I'm not necessarily a fan of tools generating code for me or lots of "automagical" stuff at the framework level, but after working with the LoopBack framework and models I got over it pretty darn quickly. I'm definitely sold on the concept and am exciting about digging into the other parts of StrongLoop's offering. But before I went too much further in that direction, I wanted to write up a complete example that covered a fully functioning server and mobile app running on Bluemix. To the end I've created a project and a set of videos to help guide you through the process. Let's get started!


Getting the Code and Testing

You can find all of the code on GitHub: While this will give you the raw code, obviously it won't give you all the tools you need to run through everything. For the server-side, you'll need:

For the client-side, you'll want:

That's a lot, but I assume if you are a developer you probably already have Node and hopefully you have Cordova done too. There are no requirements for editors but I strongly recommend Visual Studio Code. Ok, so let's get started!

An introduction

In this video, I go into detail about what is being built and what components are being used. To be honest, this blog post itself explains most of that so I won't be offended if you skip this, but I also demonstrate the final app so you can see everything come together.

Server-Side Setup

In this video, I walk you through creating the Node.js application using the StrongLoop command line. I then show StrongLoop Arc Composer visually designing a simple model. I then show you the API in action and quickly create a few objects to test that everything is working.

Building the mobile app in Ionic

In this video, I create the application with Ionic. I don't walk you through every line of code, but rather show the completed source code and explain how I did it. Angular's $ngResource made this incredibly simple. Shockingly simple actually.

Deploying to Bluemix and adding Cloudant

In the final, and longest, video, I walk you through pushing the application up to Bluemix and then adding Cloudant to the mix. As I said, this is the longest part, so let me know if anything isn't clear.

Wrap Up

All in all, you've got about 20 minutes of video, and in that time a server is created and hosted live and a front end application is setup to speak to that server via an API. That's power. Incredible power. Obviously I'm pretty biased towards all the technologies used in the stack here but frankly I think I have reason to be. They kick butt. I hope you think so as well!


Just a quick FYI - after posting this article, I discovered that the StrongLoop folks actually had a four part series on the same topic! I haven't read it yet, but part one is here: Part 1: Ionic & LoopBack Frameworks – Building a REST API.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by luca posted on 5/3/2016 at 1:05 PM

Hi, all the videos are cut on the right side (I am using Chrome on Win7)

Comment 2 (In reply to #1) by Raymond Camden posted on 5/3/2016 at 1:10 PM

Interesting. You are right for sure. Can't really fix it and you shouldn't be missing anything, but I'll keep an eye out for that next time.

Comment 3 (In reply to #1) by Raymond Camden posted on 5/3/2016 at 1:11 PM

Oh - it's just the blog template. If you click to view it on Youtube itself, they are fine.

Comment 4 (In reply to #2) by luca posted on 5/3/2016 at 5:10 PM

thanks, I am viewing on youtube now!

Comment 5 by Sanaz posted on 5/13/2016 at 3:03 PM

Hi, I've developed an app in Ionic and now want to push and deploy it on bluemix. I looked at your video, but I think a step is missing. How do you go with modifying www folder to the right format for bluemix (which is taking common, client, serve). I've tried to follow some mobile first steps, but doesn't seem to be enough for bluemix. Any suggestions on how to change the ionic code and make it suitable for bluemix?


Comment 6 (In reply to #5) by Raymond Camden posted on 5/13/2016 at 5:10 PM

I'm confused - the www folder, the Ionic part, is for the mobile app. It doesn't go to Bluemix. It gets compiled into native apps and sent to the various app stores.