DocsPipelines for ApplicationsApplication tutorials
Ember.js application: Build and deploy

Ember.js application: Build and deploy

Sections

In this tutorial we will go through how to automate the build and deployment of an Ember.js App. We will be using the Quick Start Example from the Ember.js documentation.

Before you begin

Before we begin, make sure to have the following:

  • A server to deploy to
  • An Ember.js Application that is ready to be deployed. Please consult the Ember.js documentation for help.

Step 1. Create NGINX config file

To ensure that our application is served correctly, we need to create an NGINX config file. We are going to call this file emberConfig. Below are the contents of emberConfig:

server {
  listen 80;
  root /distelli/envs/<b>Pipelines Environment Name</b>/dist/;

  location / {
    try_files $uri /index.html;
  }
}

You will need to replace “Pipelines Environment Name” with the name of your environment. Remember what you have named your environment here, as we will create the environment in Pipelines for Applications later on. I named my environment Production, so my root section looks like: /distelli/env/Production/dist/.

Step 2. Push files to a repository

To build and deploy our application, our application needs to stored in a source control repository. Create a GitHub or BitBucket repository to store your code (I am using a GitHub repository for this tutorial).

Create a repository and then push your code to that repository.

For more information on how to create a repository:

Step 3. Set up your server

If you do not have a Pipelines account, sign up for one now. To add your server, follow these steps:

Note: You will need remote access to the server you are deploying to.

The next step is to set up our server to serve our Ember.js app. For this tutorial, the only thing we need to do is install the Pipeines agent on your server. For demonstration purposes, I am using an Ubuntu 14.04 server.

Install the Pipelines agent on your server

To be able to deploy your application to your server you will need to install the Pipelines agent. You will need remote access to your server to complete the installation.

Note: This installation requires root (administrator) permissions.

To install on Linux or macOS X you can use either curl or Wget with one of the following syntaxes:

wget -qO- https://pipelines.puppet.com/download/client | sh
curl -sSL https://pipelines.puppet.com/download/client | sh

To install on Windows, copy and paste the following PowerShell command into a command (cmd) window.

powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://pipelines.puppet.com/download/client.ps1'))" & SET PATH=%PATH%;%ProgramFiles%/Distelli

Complete the install

To complete the install of the agent, you must issue the sudo /usr/local/bin/distelli agent install command.

sudo /usr/local/bin/distelli agent install
ServerA:~$ <b>wget -qO- https://pipelines.puppet.com/download/client | sh</b>
This script requires superuser privileges to install packages
Please enter your password at the sudo prompt

[sudo] password for bmcgehee: 
    Installing Distelli CLI 3.51 for architecture 'Linux-x86_64'...
    Downloading https://s3.amazonaws.com/download.distelli.com/distelli.Linux-x86_64/distelli.Linux-x86_64-3.51.gz
To install the agent, run:
    sudo /usr/local/bin/distelli agent install
ServerA:~$ <b>sudo /usr/local/bin/distelli agent install</b>
Distelli Email: jdoe@distelli.com
      Password: 
    1: User: jdoe
    2: Team: janedoe/TeamJane
Team [2]: <b>1</b>
Server Info: https://www.distelli.com/jdoe/servers/12345678-4765-ac42-bd7a-080027c8277c
Starting upstart daemon with name:  

For more information on installing the agent see Installing the Pipelines agent.

Step 4. Create a new application

In the Pipelines for Applications web UI, click Applications, then click New App.

Create a new Distelli Application

Select the repository type where you are storing your applications files.

Name Your Distelli App

After we click the button to connect to our repository, we select the appropriate repository that contains our files.

Choose Your Distelli Repo

Select the appropriate branch for your deployment. I only have a master branch, but you can deploy any branch from your repo.

Choose Your Distelli Repo's Branch

Next, we are prompted to set our build steps. Leave this section blank for now. We will set our build steps after our application has been created.

Distelli New App Build Steps

The final step is select our Build Image. In this case, we are going to select “Distelli Javascript (Docker)” for our Ember.js App. We want to use this Build Image because it has many popular Javascript tools pre-installed, therefore speeding up our build time. Make sure the Auto Build checkbox is enabled, and click Looks good. Start Build!.

Start Distelli Build

This will kick off a build of your application, but we have not set our Build and Deploy Steps, so we will ignore this specific build. After we have set our Build and Deploy Steps we will manually kick off a new build of our application.

Configure the build and deploy steps

Once your application has been created, navigate to your Applications page and open your newly created application.

Click Manifest.

Manifest Tab for Distelli App

Expand the Build Manifest section by clicking on the plus sign. This is where we are going to configure the commands to run during our deployment.

Scroll down to your PreBuild section and enter the following:

nvm install 0.12
npm install ember-cli@2.4 bower

Ember.js PreBuild Commands

Scroll down to your Build section and enter the following:

nvm use 0.12
npm install
bower install
ember test
ember build --env production

Ember.js Build Commands

Scroll down to your PkgInclude section and enter the following:

dist/*

Ember.js PkgInclude

Save your build manifest by clicking the Save button at the top of the build section. Expand the Deployment Manifest section by clicking the plus sign. This is where we are going to configure the commands to run during our deployment.

Scroll down to your PreInstall section and enter the following:

sudo apt-get update
sudo apt-get install nginx -y
sudo rm -rf /etc/nginx/sites-enabled/default

Ember.js PreInstall Commands

Scroll down to your Start section and enter the following:

sudo rm -rf /etc/nginx/sites-available/emberConfig
sudo mv emberConfig /etc/nginx/sites-available/emberConfig
sudo ln -sf /etc/nginx/sites-available/emberConfig /etc/nginx/sites-enabled/emberConfig
sudo service nginx restart -y

Ember.js Start Commands

Rebuild the application

Because we changed our deployment steps, we need to rebuild our application. To trigger a new build, click the hammer (Build Application) icon in the upper right corner. This triggers a build of your latest code, build steps, and deployment steps.

Navigate to your Builds page and click the active build to watch it progress. Once your build is complete, a green box indicates that your build was successful.

Successful Ember.js Build

Step 5. Deploy application

Now that we have successfully built our application, we are ready to deploy to our server. On the Builds page click New Deployment.

Ember.js Distelli Build

When you click the button, you should be directed to the deployment page. The first step is to select the Deploy a Release option.

Deploy Distelli Release

You are prompted to select the application you want to deploy. Select the application we created earlier in the tutorial.

Select Distelli Application for Deployment

Then you are prompted to select the release you would like to deploy. For now there should be only one release for deployment.

Choose Your Distelli Release

The last step in our deployment is to select the environment you want to deploy to. First you will need to create an environment by enter a name and selecting the Add Environment button.

Important: Remember to use the same name you used in your NGINX config file.

Select Distelli Deployment Environment

Next select the Environment you just created and click All Done.

Select Distelli Deployment Environment

Now you need add your server. Click Add Servers to get started. Select the server you configured earlier in the tutorial, and add it to your account. Once you have added your server, close the Add Servers panel and continue with your deployment. You are shown a final option to set your delay between deployments on your servers and a Start Deployment button.

Start Your Distelli Deployment

Click Start Deployment to begin your deployment. A deployment page opens, where you can view the progress of your deployment. Click log on the left side to view realtime streaming logs for the deployment.

Distelli Deployment Successful

You should now be able to point your browser to http://<-Your Server's IP Address-> and see your Ember.js app!

Ember.js Successful Deployment

You have now set up an Ember.js App with continuous integration and continuous deployment! Thanks for following along and happy coding!

How helpful was this page?
Puppet sites use proprietary and third-party cookies. By using our sites, you agree to our cookie policy.