Meteor JS and other Guide

A guide to some of the issues we encounter while developing an application with Node or Meteor JS

How to deploy Meteor Apps with CodeShip, Heroku and MongoLab

First of all, let us create a basic app with Meteor 1.4 (as of current writing version).

There are actually 3 stages that we will be covering in this guide, that is from creating a new Meteor app to deploying it to Heroku.

3 Stages:

1. App Creating with Meteor JS.

2. Continuous Integration with CodeShip.

3. Build and Deploy our app to Heroku.

Creating a new Meteor App

Note: If you want to learn more about Meteor and how to create a Meteor app, you can follow their official tutorial here.

Type the following command to create a new meteor app:

 meteor create sample-app 

Optional:

After Meteor has created our new app, we can go inside our app root directory and run it, like so:

cd sample-app
meteor run

That is, if you need to run the code, but for this guide, I’m only gonna show you how some things work with Meteor, Codeship, and Heroku.

Continuous Integration with CodeShip

You probably have heard of the term Continuous Integration (CI) many times and have wondered what it is. Well, to put it simply, CI is how a team of developers work on a single project by centralizing their code base using Git or other version control sources and automate their testing and build.

This makes it easier for developers to code without worrying too much about the quality of their apps. CodeShip does the exact same thing. The only thing wee need to do is sign in to CodeShip, setup our Testing and Deploy environments and we’re good to go.

By the way, if you want to know more about how Git works, you can have a look at this GitHub Tutorial.

For this tutorial, we are going to use BitBucket as our git client. Just go to signup if you don’t have an account yet, but for those who are already familiar with BitBucket, you can skip this part.

This is what you will see on the screen if you are still signing up for a new account. First, you provide a valid email address and click ‘Continue’.

b45e0-screenshot2bfrom2b2016-09-242b22253a56253a37

If you have entered a valid email address, you will be redirected to the next page which is actually entering your account info. Like this:

36545-screenshot2bfrom2b2016-09-242b22253a58253a57

If you have successfully signed up, login to your account and create a new Repository:

e844a-create2bnew2brepo

b2054-create2bnew2brepo2ba

Now, let’s go back to our Meteor app, in our terminal window, let’s connect our Meteor project with our newly created git repository. To do so, just type the following:

 git init
 git remote add origin git@bitbucket.org:ickyrr/sample-app.git

We can check if we successfully connected our meteor project with the git repo.

 git status

71646-screenshot2bfrom2b2016-09-242b23253a18253a12

Okay, so our repository has now recognized our Meteor project, let’s actually save it to our repo.

 git add .
 git commit -m "my first commit"

Here’s a sample output after you’ve done your first commit:

And finally, let’s push the commited changes:

 git push origin master

Here’s your sample output after pushing your changes to the repository:

a73a5-push-output

Now, let’s go back to our source files to check if we have successfully uploaded our Meteor app code to our git repository. If you did it right, it will show you the exact same source code files you have on your local machine.

03441-repo-source-file

Now, we may have been sidetracked there for a moment, but let’s go to our CodeShip account and integrate our git repository so we could start our Continuous Integration.

Go ahead, and create a new project. The command is located at the top left of the page. Click on ‘Select Project’ and ‘Create new project’. The screenshot below will show. Choose ‘BitBucket’, the one on the right and follow the instructions bellow:

97a60-connect2bscm

 

fdb15-choose2byour2brepository

On the ‘Configure Project’ screen, select ‘NodeJs’ on the dropdown you see with the ‘I want to create my own custom commands’ and save the changes.

To trigger a test, let’s commit to our git repository once more and watch the test progress. To do that, make a ‘README.md’ file, commit, and push. It’s not necessarily the ‘readme’ file that we have to update or create, but just a little change on the code to trigger the test. Let’s take a look at our

CodeShip dashboard. Click on ‘Running’ to see the test details.

a7e83-sample-test

Deploy to Heroku

Once the test is completed, we would want to build our app and deploy it to a domain. Heroku has a free subdomain where we can deploy our Meteor app to.

First, create a new account on Heroku. and create a new app. Click on the ‘New’ located at the upper right of the ‘Personal apps’ page and click on ‘Create new app’.

You will be redirected to a new page, just input the details like the ‘Name’ and you’re good to go. After creating a new app, you will be routed to a page that will look like this:

062dd-after-create-app

We are going back to our CodeShip dashboard to setup our deploy environment for Heroku.

Click ‘Project Settings’ at the upper right of the screen and choose ‘Deployment’. When you are redirected to a new page, just select on ‘branch is exactly’ on the left dropdown, and type ‘master’ on the right side input as the branch that we want to deploy is master. Click okay, select heroku and you will see a page similar to this:

97695-configure-pipelines

Enter the exact Heroku application name, if you have been following what I’m doing, our application name is ‘meteor-sample-app’ but our application URL might differ. But in my case, it’s https://meteor-sample-app.herokuapp.com.

Don’t forget to click on ‘More Options’ and enter your Heroku API for all of this to work.

Now let’s setup our MongoDB connection to Heroku. We will be using MLab and create a new database. After creating a new database, create a new database user account to handle authentication with Heroku.

Copy the Mongo Url that MLab will provide you, here’s an example:

 mongodb://:@ds030101.mlab.com:30101/

Note: You will need to replace with the actual database username, with the database password, and dbName with the actual database name. The URL that I’ve provided is all just random, so you will need to change the ones with the < > and the port.

Now, go back to Heroku > Personal Apps > meteor-sample-app(depending on your app name) and click Settings tab, click ‘Reveal Config Vars’.

You can see that there are two columns of input, on the left, are the variable names, for our project to be deployed properly, we need to include ‘ROOT_URL’ and ‘MONGO_URL’ config variables.

ROOT_URL is the url of the app where you want your app to run(make sure it’s the one you created using heroku) in my case it’s https://meteor-sample-app.herokuapp.com.

MONGO_URL is the Mongo connection we are going to use so we can control our data from server to client and vice versa.

After you have provided the above information, let’s go to setting up our build pack for Meteor. Now as of the current writing of this guide, Heroku does not support Meteor app specifically but can run NodeJS which luckily, Meteor is a Node JS based framework.

Scroll down to the `Build Packs` section and click on ‘Add Buildpack’. Instead of selecting from one of the options, let’s input the following git URL on the textbox:

 https://github.com/ickyrr/meteor-buildpack-horse.git

This is my GitHub forked buildpack from the original Meteor Buildpack Horse.

Save the changes and make another change on our project repository on BitBucket to trigger the build and deploy.

Just wait for the build to complete. If the build failed, take a look at the Heroku logs to see what has gone wrong, otherwise, your deploy will turn green and you can visit the app you have created.

You will see something like this:

screenshot-from-2016-10-03-230712

 

Voilà! There you have it! You Meteor App deployed to Heroku with the help of CodeShip.

 
Feel free to reach out if you have suggestions.

4 Comments

    • meteorcoder

      September 29, 2016 at 10:31 am

      Hi thanks for letting me know..i visited my site earlier and everything seems to be working fine. Are you still seeing them broken?

  1. Y ME NO SEE IMAGES? PLEASE FIX ASAP. I DUN LIKE IT.

  2. Nice tutorial, although I was not able to see the image but somehow I got the whole thing set up. 🙂

Leave a Reply

Your email address will not be published.

*