Meteor JS and other Guide

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

Tag: Meteor

How To Build Meteor Apps With Mantra JS – Part I

INTRODUCTION

In this tutorial, we will be creating a very simple and the most basic ‘Todos’ app with Meteor. However, this one will not be the same as what Meteor’s Todo Tutorial shows you. In fact, it will be very different in structure and architecture. We will be using Mantra JS as our application code architecture.

Mantra JS is not a JavaScript framework like Meteor as I’ve mentioned, it is an application architecture for Meteor JS. You can use it with a non-Meteor project, though. But ini this guide, we will just be using Meteor.

PRE-REQUISITES

Before we start coding, you need to have a prior knowledge of developing meteor apps as what we are about to build is still a meteor app that follows the Mantra specification. You would also need a good or basic understanding of ES6 (EcmaScript 2015).

As javascript continues to grow, ES6 is not exactly the latest implementation of JavaScript, but has become one of the standards and is now beginning to climp up the charts in terms of usability, and bing aligned to the JavaScript environment. ES6 still hasn’t been implemented yet on all browsers, but developers believe that this is where it’s all going to in the future.

If you don’t have a prior experience with React, you can learn the basics while doing the Meteor Tutorial, or you can read directly from Facebook’s official documentation. There are tons of websites where you can watch or read good tutorials like Pluralsight or even from YouTube. You just have to do the hard work on searching.

You might want to learn the basics I’ve mentioned above for you to have a smooth learning experience especially if you’re a beginner looking to start with developing apps with Meteor.

WHAT IS MANTRA?

One thing we’ve noticed is that Meteor JS does not really have a common way of structuring the code. Of course, there’s nothing wrong with having multiple ways to structure your code. Because of this, though, some developers find themselves confused what really is the proper way of structuring their code. Some might end up just coding without realizing that the path they took might not last for long. As developers, we would like to follow a few protocols to help us align our coding environment, especially when we’re working with teams, and make the development a lot faster and organized.

Mantra solves this confusion for us. It gives us a set of standards that will help us architect our Meteor application code and of course, to help developers have a common base code that everyone can follow.

FILE STRUCTURE

Mantra JS implements a way of structuring your files. Below is a draft of how our folder structure is going to look like when we create a new meteor app with mantra specification:

 

 Look here for more info on file structuring on mantra.

Now, we will be placing our client code in the /client folder. and server code in /server. Notice that we have a /core directory under /client/modules directory. This is called a ‘module’ and mantra requires us to create at least one module for an app. Personally, I like to create one module per feature. That way it allows me to locate and debug my code much faster, and it’s a nice way to organize your codes, too.

Core module is just a simple module. However, it loads first before any other modules. This is where I put the core routes and compnents like navigation, layout, header, and footer.

Inside each modules, we will see a few more directories which handle the flow of data, routing, rendering of components, business login, and the entry point of each module.

These directories are the following:

 /components – this is where we store our React JS code for our app.

/actions – this is where we put the business logic for our app.

/containers – this is responsible for passing along the data, to the component for presentation.

/libs – this is where we store miscellaneous code which we use within that module

index.js – this is the entry point of the module. This imports the routes and actions for the module

I believe that it may be difficult for some to keep track of these files especially for those who are just beginning to understand Mantra. I, too, find it difficult even until now to remember and update every single entry point for each module every time I create a new component or write new logic that requires importing to a certain entry point.

Luckily, we have Mantra CLI which takes care of modules, collections, publications, containers, actions, and components creation. We can even create a new Meteor app which already has these files included with all the basic configuration. How awesome is that?

All we need to do is install mantra-cli:

 npm install -g mantra-cli

After that, just type:

mantra create <yourAppName>
cd <yourAppName>

Like this:

mantra create my-mantra-app

cd my-mantra-app

 

 

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 &lt; &gt; and the port.

Now, go back to Heroku &gt; Personal Apps &gt; 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.