header
Getting an application written is the first challenge, however having proper tests, running those tests in a continuous integration pipeline as well as deploying the application to your cloud host can be a task to setup.

Here is a quickstart to create an application using the angular-cli, using codeship to build and run the test using the angular-cli and the push to a website on Azure.

Using the angular-cli we can quickly create an application by executing the commands...

ng new quickstart-ng-cli
cd quickstart-ng-cli
ng serve

Once that is scaffolded out, create your GitHub repo and check in the source.

For a full angular-cli walk through look at my post Angular 2: A Re-Quickstart using the CLI

Codeship

Go to codeship.com and login with your github account.

Create a new project, and link your github repo just created.

Next, configuring the tests setup.

Select "I want to create my own commands", and use the following script.

#install node version, 4.x is required for the angular-cli
nvm install 4.1

#install angular-cli
npm install angular-cli 

#run npm install for your project dependencies
npm install

Under that script is the "Test Pipelines", where the script is setup to run the tests.

#serve the application adding '&' to run command in background
ng serve &

#start end to end tests using protractor
ng e2e

#if all of the tests pass, then build the production assets
ng build -prod

Click Save and go to dashboard.

At this point, your repo should be able to be cloned built and test run. You can trigger the build be doing a commit.

testsrunning

Publishing to a Azure Website

For getting started with Azure, go to http://azure.com

Setting up the Azure Site

Create a new web app
new site

Configure it to use a Local Git Repository. We'll use this to publish to from Codeship.
localgit

The git clone url is in the Summary or Details of the application, this is the address we will need when setting up the Continuous Deployment script.
details

Finally, setup the username and password for the site in the deployment credentials sections.
credentials

Once all of these steps are complete, the Azure website is setup and we can go back to Codeship to create the Continuous Deployment Script.

Codeship

Select the "Set up Continuous Deployment" option.

There are a number of choice of deployment options here, but not Azure. So in this case we will be selecting a $ Custom Script.

Use the following script.

#Set your git user information 
git config user.email "[email protected]"
git config user.name "Your Name"

# $AZURE_REPO_URL needs to be set in your projects Variables section
# and include both username and password, e.g: https://username:[email protected]:443/site.git

# Clone Azure repository
git clone $AZURE_REPO_URL ~/azure

# change into the local azure directory
cd ~/azure

# delete local repository azure contents
rm -rf *

# Copy /dist folder contents (our application)
cp -rf ~/clone/dist/* .

git add -A
git commit --all --author "$CI_COMMITTER_NAME <$CI_COMMITTER_EMAIL>" --message "$CI_MESSAGE ($CI_BUILD_URL)"

# Push changes to Azure
git push origin master

There is an ENVIRONMENT variable that needs to be set in Codeship for this project. You will need to set the AZURE_REPO_URL for the Azure website.

env

The format for the url will be:

https://username:password@site.scm.azurewebsites.net:443/site.git

If you have any special characters in your password, be sure to escape them with \ .

Testing Deployment

Select your project (top right of the screen), and you'll see the list of the builds. Trigger the build again by clicking the circular arrow. and then selecting/clicking the "row" of that build to see the output.

Once the build starts, the output from the build and test will show in the console, and any Azure related commands will echo as well as remote:

deployment_script

If you go to the Azure Portal and navigate to

yourapp > Settings > Deployments > Deployment Details

and select a log, you'll see the same info that was in the codeship output.

azure_log

When the deployment is complete, click on the website url and you'll be presented with the application.

quickstart

Enjoy!

Github repo for these : https://github.com/spboyer/quickstart-ng-cli