How-tos

Deploy to Bluemix button example

Share this post:

The Deploy to Bluemix button is a great way of getting users started with your sample application. In this blog, I will cover a brief introduction to deploying applications on Bluemix, how to create a Deploy to Bluemix button for your own application, and the steps that take place when a developer clicks on the button.

Quick review of applications in Bluemix

When you deploy an application to Bluemix, you have to keep in mind what is actually being deployed. For a mobile app, Bluemix builds and deploys an artifact that represents the mobile app’s backend. This is usually a server written in Node.js or Java. Along with the server, you can also instantiate and bind any Bluemix service from the catalog your application requires. The idea is to have your mobile application talk to this server and then have the server talk to the instantiated services. A Bluemix application is the combination of this server artifact, the collection of required services, and the mobile/web application.

The Deploy to Bluemix button makes it easy for new developers to get started with your application by automating the following:

  • Creates a Bluemix application in the user’s account
  • Instantiates all of the required services and binds them to the created application
  • Deploys the server component on the user’s Bluemix account
  • Creates a IBM Bluemix DevOps Services project on the user’s account with a clone of your repository’s master branch.

Steps to enable the one-click “Deploy to Bluemix” button

For the following instructions, we have the assumptions below:

  • You have a public GitHub repository that has a README and the iOS mobile application source code
  • You have a Bluemix application that uses a Node.js server and a number of Bluemix services. There is no compilation step for your server
  • You wish to add a Deploy to Bluemix button to your README file.

We’ll use the BluePic iOS app as an example of how to create a button. This app uses four Bluemix services and has a Deploy to Bluemix button in its README for developers to use. Try it! You’ll see how one click on this button will handle everything.

There are three main components to get the Deploy to Bluemix button working:

BluePic repository with main components in red

Step 1: Place the button

The first component is the actual Deploy to Bluemix button in your README.md file. Use the following code snippet to create and place the button in your README file by replacing YOUR_GIT_URL_HERE with your repository’s URL. Note: your Git repository must be public.

HTML:

<a href="https://bluemix.net/deploy?repository=YOUR_GIT_URL_HERE"> <img src="https://bluemix.net/deploy/button.png" alt="Deploy to Bluemix"></a>

Markdown:

[![Deploy to Bluemix](https://bluemix.net/deploy/button.png)](https://bluemix.net/deploy?repository=YOUR_GIT_URL_HERE)

Your README should now have a button like this:

Deploy to Bluemix

Step 2: Add and modify your manifest.yml file

A manifest.yml file placed at the root of the repository specifies which services the app needs. To begin, go to your Bluemix app’s Application Overview page:

Start Coding

Once you’re on this page, open the Start Coding tab and click Download Starter Code:

Download Starter Code

Unzip the folder and locate the manifest file:

Contents of zip file

Modify manifest.yml with the following edits:

  • Add a declared-services field at the top of the file
  • Copy and paste all the entries of services into declared-services, each in its own line
  • For each service under declared-services add a label and plan field. This information can be found by going to the Application Overview and opening the credentials section of each service entry. For example, this is where it would be for the Mobile Client Access service:Service credentials section, label and plan fields boxed in red
  • Edit the path field; it should point to the directory where your server component is located. For our example, the value should be ./NodeStarterCode.

Once finished with the edits, ensure that this file is at the root of your repository. In the end, you should have something like this:

BluePic Manifest

Step 3: Add the server files/folders

The third and final component is the server code that gets deployed to Bluemix. Create a NodeStarterCode folder at the root of the repository. In it, paste all your Node.js server files/folders of your Bluemix Application.

That’s it! At this point your README should have a button for new developers to utilize!

Try your new “Deploy to Bluemix” button!

The following steps will take place once a developer clicks on the button:

  • The master branch of the specified repository will be cloned into new private Bluemix DevOps Services project under the user’s account
  • If a build file was provided, it will be automatically detected and executed. Our example used a server that didn’t require a compilation step so this step is not covered in this blog
  • The manifest file is used to initialize/bind the required services and deploys the application to the user’s account.

Now you can create and put these buttons on any README or webpage desired!

References

Add Comment
One Comment

Leave a Reply

Your email address will not be published.Required fields are marked *


Vivian

This was really helpful.

Reply
More How-tos Stories

Expose Auth0-enabled OpenWhisk actions with API Connect

Serverless computing platforms give developers a rapid way to build APIs without servers. OpenWhisk supports automatic generation of REST API for actions exposed by API Gateway. When the capabilities provided by the API Gateway do not cover all usecases you have for an API - such as publishing it in a developer portal or performing advanced mapping, transformation, validation, you can migrate to the API Connect service.

Continue reading

Site Reliability Engineering, the cloud approach to operations

Successful delivery of cloud applications requires more than a focus on agile development. Operations is also essential to maintaining user satisfaction, access and to scale with growth. Cloud operations is different to traditional approaches to operations.

Continue reading

Spring Cloud application with Zuul Gateway on Bluemix Kubernetes

In this post, we'll create a simple Spring Cloud application that demonstrates the Zuul library. Zuul acts as a gateway to other microservices, and provides routing and filtering functionality, among other things. We will build on a project from the Spring guides, and deploy it to Bluemix Kubernetes.

Continue reading