__4 “CD Is Working, Let’s Get a Site Live with Loopback!”

Since it has been more than a few weeks let’s do a quick recap of the previous posts in this series.

  1. Introducing the Thrashing Code Team & Projects” – Know who’s working on what and what the projects are.
  2. Getting Started, Kanban & First Steps for a Sharing App” – Getting the kanban put together and the team involved.
  3. Starting a Basic Loopback API & Continuous Integration” – Getting the skeleton of the API application setup and the continuous integration services running.
  4. Going the Full Mile, Continuous Delivery” – Here the team got the full continuous delivery process setup for ongoing development efforts.

In this article of the series I work with some of my cohort to get initial parts of the application deployed to production. For the first part of this, let’s get some of the work that Norda has done into the project and get it running on the client side.

Client Side

client directory of the loopback project.

client directory of the loopback project.

The first thing I needed was to get a static page setup. This page would then be used to submit an email to the server side that would then deal with whatever processing that I would have for the email message confirmation and related actions.

In Loopback, it is very easy to setup a static page. I just needed a simple index.html page so I created an empty one in the client directory of the project.

The first thing I did was literally put an index.html file with the words “this should work” in the client directory of the project. But after some tweaking and adding in Norda’s work the team ended up with the following.

The next thing to do is setup the Loopback.io framework to host a static site page.

Static Page via Loopback.io

This part of the article is taken pretty much straight out of the static page hosting Strongloop Loopback.io Documentation.

Applications typically need to serve static content such as HTML and CSS files, client JavaScript files, images, and so on.  It’s very easy to do this with the default scaffolded LoopBack application.  You’re going to configure the application to serve any files in the /client directory as static assets.

First, you have to disable the default route handler for the root URL.   Remember back in Create a simple API (you have been following along, haven’t you?) when you loaded the application root URL, http://localhost:3000/, you saw the application respond with a simple status message such as this:

{"started":"2014-11-20T21:59:47.155Z","uptime":42.054}

This happens because by default the scaffolded application has a boot script named root.js that sets up route-handling middleware for the root route (“/”):

server/boot/root.js

module.exports = function(server) {  // Install a `/` route that returns server status
  var router = server.loopback.Router();
  router.get('/', server.loopback.status());
  server.use(router);
};

This code says that for any GET request to the root URI (“/”), the application will return the results of loopback.status().

To make your application serve static content you need to disable this script.  Either delete it or just rename it to something without a .js ending (that ensures the application won’t execute it).

Define static middleware

Next, you need to define static middleware to serve files in the /client directory.

Edit server/middleware.json.  Look for the “files” entry:

...
  "files": {
  },
...

server/middleware.json

Add the following:

...
  "files": {
    "loopback#static": {
      "params": "$!../client"
    }
  },
...

These lines define static middleware that makes the application serve files in the /client directory as static content.  The $! characters indicate that the path is relative to the location of middleware.json.

Add an HTML file

Now, the application will serve any files you put in the /client directory as static (client-side) content.  So, to see it in action, add an HTML file to /client.  For example, add a file named index.html with this content:

/client/index.html

<head>
    <title>LoopBack</title>
</head>
<body>
    <h1>Whatevs</h1>
    <p>
        Some static content...  but just look at the big HTML file below!  🙂
    </p>
</body>

Of course, you can add any static HTML you like–this is just an example.

Graphic Assets

Norda setup the project with a number of assets for the current page creation as well as future pages the site will need. The theme is a high quality theme, with the Coder Swap Logo added at respective key locations. The following are the graphics assets included in the project under the client directory here.

The key files that are included that will be used for our first site we deploy are the various favicon, logo, and related images. You can see those in the root of the client directory. There are a whole bunch of them because of the funky mobile design requirements.

Index.html

The first page I’ve setup is a simple sign up page, with no real functionality. Just something to get started with to build off of. The code for that page looks like this.

<!DOCTYPE html>
<html>
<head>
    <title>
        Code Swap - Notify Me!
    </title>
    <link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700" media="all" rel="stylesheet"
          type="text/css"/>
    <link href="stylesheets/bootstrap.min.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="stylesheets/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="stylesheets/se7en-font.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="stylesheets/style.css" media="all" rel="stylesheet" type="text/css"/>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png">
    <link rel="apple-icon" sizes="114x114" href="apple-icon-114x114.png">
    <link rel="apple-icon" sizes="72x72" href="apple-icon-72x72.png">
    <link rel="apple-icon" sizes="144x144" href="apple-icon-144x144.png">
    <link rel="apple-icon" sizes="60x60" href="apple-icon-60x60.png">
    <link rel="apple-icon" sizes="120x120" href="apple-icon-120x120.png">
    <link rel="apple-icon" sizes="76x76" href="apple-icon-76x76.png">
    <link rel="apple-icon" sizes="152x152" href="apple-icon-152x152.png">
    <link rel="apple-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
    <link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
    <link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
    <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="mstile-144x144.png">
    <meta name="msapplication-config" content="browserconfig.xml">

    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    <script src="javascripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="javascripts/modernizr.custom.js" type="text/javascript"></script>
    <script src="javascripts/main.js" type="text/javascript"></script>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
</head>
<body class="login2">
<!-- Registration Screen -->
<div class="login-wrapper">
    <a href="./">
        <img width="100"
             height="30"
             src="images/logo-login@2x.png"/>
    </a>
    <form>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-envelope"></i>
                </span>
                <input class="form-control"
                       type="text"
                       value="Enter your email address">
            </div>
        </div>
        <input class="btn btn-lg btn-primary btn-block"
               type="submit"
               value="Register for updates!">
    </form>
</div>
<!-- End Registration Screen -->
</body>
</html>

As you can see a bulk of the page is favicon and logo related nonsense while about a 1/3rd of the screen is actually the HTML for the form itself. What that looks like when rendered is something like this.

The registration page.

Once that page is up we can then commit to the production branch as outlined in the previous blog entry.

btw – If you’re curious (especially if you’ve read the intro blog entry about the mock team), you might be wondering where and who and how did I create this gorgeous theme? Well, I didn’t, I actually purchased this sweet theme from Theme Forrest. The specific theme is se7en.

__3 “Going the Full Mile, Continuous Delivery.”

In the last few issues of this series, the team has done the following:

  1. Introducing the Thrashing Code Team & Projects” – Know who’s working on what and what the projects are.
  2. Getting Started, Kanban & First Steps for a Sharing App” – Getting the kanban put together and the team involved.
  3. Starting a Basic Loopback API & Continuous Integration” – Getting the skeleton of the API application setup and the continuous integration services running.

In this issue of the series Keartida is continuing with setup and configuration of the next step, getting to a basic continuous delivery of services with a basic AWS Elastic Beanstalk setup.

AWS Elastic Beanstalk

Let’s talk a little bit about the solutions and working with teams in the solutions before diving into Keartida’s efforts. With each of the SaaS solutions that I’ve pointed out in the last couple of entries each has a specific connection, integration, or reliance on Github. This is, of course perfect so that each part works seamlessly together. AWS has it’s own user management system which also needs to be taken into account.

In CodeShip

It’s easy to add members to a build, which I covered in the previous entry in this series.

In Waffle.io

Waffle.io actually is pretty simple. Simply sign in with your github account and you’re in with an account. But to access certain projects one does have to setup and share the respective kanban boards. The way to do this with Waffle.io is to actually setup users based on the github permissions setup for the user for the particular project.

In AWS

To get users setup in AWS is a little differently. What we need to setup a full build and delivery of the application to AWS is to get the user’s key pair. Let’s take a look at setting up a group and a user in Amazon for this purpose. In this case I am going to create a user for deployment purposes.

On the main AWS Dashboard here, click on Identity & Access Management.

AWS

AWS

On that page there are several options listed on the left hand side. Click on the Groups and then click on the Create New Group button. After that a wizard will come up.

Groups

Groups

Enter the group name and click next.

Group Name

Group Name

In the Attach Policy step, slect the S3 Full Access and Elastic Beanstalk Full Access policies for this account.

Selecting Policies

Selecting Policies

Once the appropriate polices are selected to be attached, click on next step, review and then add the group. Then select the group that was just created and click on the

Add Users to Group

Add Users to Group

Once the appropriate user is added, then the parts to wrap up the delivery part of the deployment are all set. Back to what Keartida was working on!

Keartida Deploys coder-swap

First step, Keartida logged into the AWS management console.

AWS Management Console

AWS Management Console

Since this is the first Elastic Beanstalk Application that Keartida has deployed, when she clicks on Elastic Beanstalk this screen appears.

Welcome to Elastic Beanstalk

Welcome to Elastic Beanstalk

From here, she selected Node.js from the drop down and Launch Now. From there a quick wizard appears and let her enter the name of the application and a description.

Creating the first Node.js Application

Creating the first Node.js Application

The application starts being created.

Creating the Application.

Creating the Application.

When this is created, the funny thing is the wizard creates a application environment name that causes problems. Keartida and I found this out the hard way, and figured out it is best to just delete this application and create an application and an environment name that works better.

Deleting the Application With the Odd Naming

Deleting the Application With the Odd Naming

So this time going back she created the application space specifically and went through the various steps to create the application.

Creating the New Environment in the new Application Space.

Creating the New Environment in the new Application Space.

Creating a new environment.

Creating a new environment.

Creating a load balanced, auto-scaled elastic beanstalk application

Creating a load balanced, auto-scaled elastic beanstalk application

Basic Settings

Basic Settings

More Settings.

More Settings.

Keep clicking next and then…

Then let the beanstalk start.

Then let the beanstalk start.

Now that this is started Keartida logged into CodeShip to setup the final deployment steps for good builds to deploy directly to this beanstalk application.

CodeShip Builds and Where to find Deployments

CodeShip Builds and Where to find Deployments

Once Keartida clicked on Deployment she had options to pick what to deploy to. One of the options is of course Elastic Beanstalk.

Selecting a Branch and What to Deploy To

Selecting a Branch and What to Deploy To

Selecting Elastic Beanstalk to deploy to

Selecting Elastic Beanstalk to deploy to

The next screen provides options to select branches of the build to deploy with and related information.

Set the Elastic Beanstalk Parameters

Set the Elastic Beanstalk Parameters

Keartida set the key ID and access key. After that she selected the US West 2 data center, the environment and application names, and the S3 bucket. She retrieved the S3 bucket name by navigating into the S3 service and finding the name on the management console as shown.

S3 Buckets

S3 Buckets

Once all the parameters were entered Keartida then clicked on create and CodeShip then shows the settings saved as shown below.

Saved Settings

Saved Settings

After that Keartida created the production branch and pushed it to github. There the build started as shown and began the deploy to AWS Elastic Beanstalk.

Beanstalk Deploy starts after the build

Beanstalk Deploy starts after the build

Finally once the deployment is detected to have successfully been pushed out and launched in AWS Elastic Beanstalk a message will appear and the build will go green.

Deployment Successful!

Deployment Successful!

Now, after Keartida completed this it’s time to really dive into the workflow of development. Next up, we’ll get a basic site and API services up and running.

__2 “Starting a Basic Loopback API & Continuous Integration”

In this article Keartida is going to dive into setting up a basic Loopback API project and get a build of that project running on a continuous integration service. In this example she’s going to get the project setup with Codeship.

Prerequisites:

  • Be sure, whichever system you are using, to have a C++ compiler installed. For Windows that usually means installing Visual Studio or something, on OS-X install XCode and the Developer Tools. On Ubuntu the GCC compiler and other options exist. For instructions on OS-X and Linux check out installing compiler tools.
  • Ubuntu
  • OS-X
  • For windows, I’d highly suggest setting up a VM of Ubuntu to do any work with Loopback, Node.js, or follow along with this material. It’s possible on Windows, but there are a number of things that are lacking. If you still want to make a go of using Windows, here are some initial setup steps here.

Nice to Haves:

  • git-flow – works on any bash, handles the branching and merging. Very nice scripts to have.
  • bashit – Adding more information to the bash prompt (works on OS-X, not Ubuntu or Windows Bash)

Continue reading

__1 “Getting Started, Kanban & First Steps for a Sharing App”

This is the first (of course the precursor to this entry was the zero day team introduction article) of an ongoing series I’m going to put together. I’m going to write this series from the context of a team building a product. I’ll have code samples and more as I work along through the material.

The first step included Oi Elffaw having a discussion with the team to setup the first week’s working effort. Oi decided to call it a sprint and the rest of the team decided that was cool too. This was week one after all and there wasn’t going to be much else besides testing, research, and setup that took place.

Prerequisites

Before starting everything I went ahead and created a project repository on github for Oi to use waffle.io with. Waffle.io is an online service that works with github issues to provide a kanban style inferface to the issues. This provides an easier view, especially for leads and management, to get insight into where things are and what’s on the plate for the team for the week. I included the default node.js .gitignore file and an Apache 2.0 license when I created the repository. Github then seeds the project with a .gitignore, README.md and the license files.

After setting up the repository in github I pinged Oi and he set to work after the team’s initial meet to discuss what week one would include. Continue reading

__0 “Introducing the Thrashing Code Team & Projects”

In the coming months as I put together technical training material, I’ve created a fictitious team that is made up of the following members. I’ve detailed their roles and provided photos of these individuals, that act as NPCs in creating projects for the training material. To add character to the narrative I’ll be discussing these roles as if from the perspective of these NPCs that are filling the particular roles.

Meet…

Continue reading

Nordic.js and .NET Fringe

Ok, so many of the conferences out there you’re going to get fed the company line. You’ll probably experience some odd behaviors and people pushing product on you. If you’ve got the same feeling about conferences as me, and you’d like to experience these things at a conference:

  • A diverse audience of many different people from many different places.
  • You’d like to talk to others that are passionate about the future direction of technology and what we can create with that technology!
  • Listen and watch presenters provide insight to technology, ideas, and spaces that I don’t regularly get to hear about or discuss.
  • Meet many new friends, build my cohort of coders, and learn from each other.
  • Have a good time, relaxed, and not under the pressure of being sold things.

…then these conferences are for you. Seriously, I wouldn’t and won’t ever direct anybody to corporate conferences anymore except maybe in super rare occasions. The conferences to attend are the grassroots, community organized conferences like these two! There are too many other truly awesome conferences where the future is being discussed and made RIGHT NOW! There’s a few lined up that I’ll be attending and am currently working with as an organizer. Here’s the top two RIGHT NOW!

Continue reading

Update 2 – Speaking at Node Summit and Node.js Club SF

I’ll be puddle jumping down to San Francisco on the 9th to teach a workshop at Node Summit titled “Node Continuous Integration to Delivery” and then I’ll swing into the Node.js Club SF to give a short (45 minute) deep dive into who, what, where, when, and why of “Node Continuous Integration and Delivery”.

Here’s a short description of the workshop, “In this workshop I’ll show the steps to get from minimal project, to fully deployed web site with a fully integrated and operative continuous integration and delivery pipeline. I’ll also dive into some basic practices around test or behavior driven development within JavaScript to build a full server to client website and have that website deployed, tested – on both client and server, and deployed auto-magically to a live site. During this workshop I’ll break this out into segments, so that over the course of the workshop there will be time to stop, ask questions, and then move to the next stage of the project.

As I get more specific details about this, I’ll add them to this post. But currently check out Node Summit and Node.js Club SF for more information.

UPDATED January 21, 2015 @ 4:16pm

I’m now listed on the speakers section of the Node Summit Conference Site. The workshop I’ll be providing will be on Monday the 9th, the day before the actual conference from. My workshop will be 3-5pm, in the Fisher East Banquet Room in the event location at:  Mission Bay Conference Center at UCSF, 1675 Owens St, San Francisco, CA 94158

If you’d like to sign up for Node Summit and get 25% off of the registration fee, then follow this link to register for the conference!