A few months ago I made an online Code Editor app called Circuit Space that I use in the Web Design and JavaScript Game Design classes I teach for kids. I deployed it on a free Heroku account, which can only be active 16 hours a day. I decided to take it up a notch and switch over to AppFog hosting on the CenturyLink Cloud. I also ported the backend over to the Orchestrate cloud database service. Here's a short overview of my app and an explanation of how I switched everything over.

Circuit Space Splash

Before We Start

If you don’t have a CenturyLink Cloud account yet, no problem. Head over to their website and sign up for a free trial. You’ll need that for access to AppFog and Orchestrate.

App Development

Circuit Space has home pages for every user, with HTML, CSS and JS tabs where you can write your code and see the rendered results. Meteor is an open source platform for building Web and mobile apps in JavaScript. It's awesome and easy-to-use. Let’s get started!

Meteor Logo

  1. Meteor is built on top of Node.js, so I used the Orchestrate Node.js client library. Luckily, there is a great Meteor package for adding Node modules: Meteorhacks:NPM.

    meteor add meteorhacks:npm
  2. Adding this package creates a packages.json file inside your app, where you can add as many node modules as you want. I just needed the one:

     "orchestrate": "0.4.7"
  3. I converted all my backend functions, which save and load user data, from MongoDB to Orchestrate. The Orchestrate API has very handy functions for getting and receiving data from your database.

    • PUT creates a new document, and a new collection if one does not already exist.
    • MERGE updates a document.
    • GET retrieves one document from the specified collection.
    • LIST retrieves the entire collection.
  4. Here are some example functions from my app which use all four of these methods:

    //the variable 'db' is used to access our Orchestrate database. We will create this variable later.
     //to create a user (called from Accounts.onCreateUser)
     createUser: function(username) {
       db.put('users', username, {
         "html": '',
         "css": '',
         "js": '',
         "icon": 'eye',
         "iconcolor": 'black',
         "message": 'I love to code!',
         "theme": 'blackboard'
     updateUser: function(html,css,js,username) {
       //merge will update only the specified fields
       db.merge('users', username, {
         "html": html,
         "css": css,
         "js": js
     loadUser: function(username) {
       //nice async utility provided by meteorhacks:npm
       var code=Async.runSync(function(done) {
         //gets one document from the "users" collection
         .then(function (res) {
         .fail(function (err) {
           console.log(err); // prints error
       return code;
     loadAllUsers: function() {
       var users=Async.runSync(function(done) {
         //gets ALL users, to display on the "members" page
         .then(function (res) {
         .fail(function (err) {
           console.log(err); // prints error
       return users;
  5. I called these functions from different places in the app using Meteor.call(). When using data from your database to dynamically render your app view, it is essential to do so from within the callback of Meteor.call(). This way, the rendering will only take place after the request to Orchestrate has successfully returned. For example:

    //the three arguments here are the name of the Meteor method, the username for the page being rendered, and the callback function
    Meteor.call('loadUser', this.data, function(error, results) {
     var r=results.result;

App Deployment

Deploying a Meteor app on AppFog takes a bit of patience. But both Meteor and AppFog are great time-savers, so it is well worth the trouble.

Before you can deploy anything to AppFog, you need to sign up for a CenturyLink Cloud account and enable AppFog for your account. To get a good understanding of AppFog, we recommend reading the Getting Started Guide.

Now you can sign into the CenturyLink Cloud and provision an Orchestrate database for our app. The CenturyLink Cloud uses Cloud Foundry to manage application deployment.

CenturyLink Cloud Login

  1. Download and install the Cloud Foundry command line interface (CLI) here.

  2. Login to the Control Portal.

  3. From the Navigation Menu on the left side of the screen, click Services > AppFog.

  4. Select a region. Then, click create space to make a new space for you to host your app.

  5. Copy and paste the line of bash code that is provided to login via Cloud Foundry.

  6. You will be prompted to enter your password and choose what space to install your app in (Dev, Prod, or QA).

  7. After answering these questions you are logged in to the CenturyLink Cloud.

    Cloud Region

Provisioning Orchestrate

Run the command cf marketplace to see what services are available for your app. You will see a service listed called Orchestrate.

  1. To provision an Orchestrate database for your app, run these two commands:

    cf create-service orchestrate free database-name
    cf bind-service app-name database-name

    The first command creates a free Orchestrate database (which can have any name). The second command binds that database to your app.

  2. To use this database in our app, we need to check our app's environment variables to find its API endpoint and API key. Enter the following command:

    cf env app-name
  3. This command prints a JSON object to the terminal window containing the information we need. Look under VCAP_SERVICES: orchestrate: credentials and you will see two variables named:

  4. We can initialize the Orchestrate API in our app by adding the following Javascript code, which runs only on the server. Use the values of the two environment variables.

    if (Meteor.isServer) {
      Meteor.startup(function () {
         var token = "ORCHESTRATE_API_CREDENTIALS";
         var orch = Meteor.npmRequire('orchestrate');
      orch.ApiEndPoint = "ORCHESTRATE_API_HOST";
      db = orch(token);

App Deployment

Now we are truly ready for deployment! The first challenge is to convert the Meteor app to a regular Node.js app.

Converting the Meteor App

That's where the NPM package Demeteorizer comes in handy. You may have to use a specific version of Node.js to run Demeteorizer. I did. For that you can use Node Version Manager (NVM). Also, make sure to set your PATH to the correct value.

  1. Here are the terminal commands I used:
    npm install -g demeteorizer
    npm install -g nvm
    nvm install 0.10.36
    nvm use 0.10.36
    export PATH=./node_modules/.bin:$PATH

    Using the Demeteorizer

  2. To use the Demeteorizer, navigate to your app's directory. You can specify a path for the converted app using the -o flag.
  3. When the process is complete, navigate to that directory and run npm install.
  4. I also ran npm shrinkwrap, which locks down the versions of all dependencies. Here are the commands:
    demeteorizer -o build
    cd build
    npm install
    npm shrinkwrap

Installing the App

  1. Now install your app with one line:
    cf push app-name

Setting the Root Environment Variable

  1. Your app uploads, but doesn't start up. If you check the logs with cf logs app-name --recent, you will see an error saying that the ROOT_URL environment variable must be set, which is required by Meteor.

  2. Cloud Foundry supplies the following method for this:

    cf set-env circuitspace ROOT_URL http://app-name.uswest.appfog.ctl.io
    cf restage app-name

That's it! You're done!

Navigate to the URL and see your app in action!

Circuit Space Logo

By the way, my AppFog version of Circuit Space is hosted here.

What's Next?

Sign up for our Developer-focused newsletter CODE. Designed hands-on by developers, for developers. Keep up to date on topics of interest: tutorials, tips and tricks, and community building events.

We’re a different kind of cloud provider – let us show you why.