Given that you have to develop a full lifecycle of a web application, where will we start? If working in a company, where there are processes for developing and releasing products, the story might be different. But what if we want to develop our own pet projects, a web application, how could we do that? What is the minimum cost?

Asking a web developer, they might come up with many things, many pieces. They are dots. The question is how do we connect the dots?

As a developer, most of the time I play around with business code; solve business requirements with domain logics. In short, they are none-infrastructure code. When started my learning journey this year, I wanted to play around with the infrastructure.

After being able to build a minimal ASP.NET Core web application, I learned from Scott Allen Developing with Azure course. It is such a wonderful course as always. I decided to try my own with the newest .NET tools I have at hands. Try-and-write is a good way of learning. This makes sure that I get the best value out of my time.

Note: This is a long post. I write it while I experience. Write on the go.

Let explore and find the answer for the questions.

How to build a product from your laptop and deploy to cloud? How much does it cost? How to connect the dots?

Overview

I will need these tools/components complete the work

VS 2017 Community Edition + .NET Core 1.1: To code the application. But not required. Because with .NET Core you can code in notepad and it still works.

GitHub Account: I want to host my code on GitHub. Obviously, it is not a requirement. But I want to try out. Alternatively, you can host code on Visual Studio Team Service.

Visual Studio Team Service (VSTS): To host code (if not hosted on GitHub), build and release.

Azure Account: To host the web application.

We, however, can deploy directly from VS 2017 or Powershell to Azure. But I will not explore that option in the post. Because it rarely happens with real projects.

I want to setup this flow – I like to draw on paper (even it does not look good 😛 )

VS and GitHub

That should be simple. Download the GitHub Extension for Visual Studio here. Follow the instruction and you have your visual studio connected with your GitHub account. Mine is here, my country town has many coconuts.

GitHub to VSTS

Next, I want to make a build in VSTS which will build the code hosted on my GitHub account. But, first I want to introduce you the Visual Studio Team Service (VSTS).

Take a look at its pricing scheme. You will choose the Free model. With free model, you have

Which will you pretty much everything you need to develop a pet project with your friends. Explore more when you have time. Here I want to pay attention to the build capacity.

If your build and deploy take 2 minutes, you have 120 builds per month; or 4 builds per day. That should be enough for a personal project. I suggest you create your own account if you have not had yet.

I have created a “Production” project. I was supposed to host my code in production (or something like that). But now, I will use it to take advantages of build capacity. Which means the project has everything, except code.

Add a new build definition and choose the “ASP.NET Core (PREVIEW)” template. Once created, take a deep look at the generated build definition

At the minimum, we have the process definition with 6 steps

1. Get sources
2. Restore
3. Build
4. Test
5. Publish
6. Publish Artifact

Get sources

To build, we have to tell the build engine where to get the source code. I want to use build code hosted on GitHub. There are 3 steps involved

1. Connect to GitHub used a proper authentication method. I used Personal Access Token.
2. Specify the repository to get the code, I used thaianhduc/coconut.
3. And finally tell the branch: master

After setup, it should look like the above.

Because I have not had Azure Setup or Unit Test yet, I will disable some steps. They should be enabled later when I need them

For any step, you can click on the Control Options, and uncheck the “Enabled” checkbox.

The other steps (Restore, Build) use default settings. It will just work.

Test the Build

Should I enjoy the setup? Time to test the integration.

Pretty simple with just a single click

A dialog shows up. Simply click ok. We will not tweak any configuration value. Wait a few seconds then the build is triggered. You see a nice Console output. The console will tell you what is going.

Not everything is easy as it seems. I got an error message at the restore step

Let find out how to fix the problem. At this point in time, I depend on Google. We all depend on Google, do we? It turns out that many people having that problem. The solution is given here in the SO. In short, I have to use the Hosted VS2017 agent (instead of just “hosted”).

Azure Cloud

So far, I am half way to the cloud. Playing around with Azure is a bit of nervous because of Credit Card involved. I hesitated to play with it because I did not understand it.

Not anymore! Let’s go ahead and play with it (I was empowered with the course about Azure 😛 ).

All I need is a cheap app service. Maybe I can have a free account. For each app service, it is a good practice to have at least 2 slots: Staging and Production.

Login the Azure Portal and start creating a new App Service. Choose the default Web App from the gallery

Hit the “Create” and configure with minimum requirements.

There are a couple of concepts that I have to capture when working with Azure. I try to explain here in a way that I can understand. Hope the explanation also helps you.

First, take a look at the final result of my App Service

When visiting the Azure Portal, it looks confusing. There are so many items on the portal, many places you could click on. There are a bunch of documents out there showing you step by step how to create an App Service. I, once, read them and did not understand them. Of course, I could follow step by step; but with a blind eye.

There are 3 basic concepts we should understand: App Service, Resource Group, and App Service Plan.

Resource Group

Everything in Azure is a resource. Resources are organized in groups. By using group, we can handle many resources easily.

Resource group is a logical concept. You will not know or care where/how resources are deployed.

Imagine you practice developing a web application with Azure SQL. When you finish and do not want to keep them anymore, instead of going to each resource and delete, you could simply delete the resource group in one click.

App Service

It is a placeholder where you deploy your services. Think of App Service as your own computer without your maintenance. You do not have to install Softwares. You do not have to do anything at all.

However, you have to define a configuration applied to the service. Azure needs information to build a proper service instance. This is done at the first step. When you create a new App Service, Azure asks for a template, such as Web App, Web App + SQL Server, … By choosing a template, you define the configuration applied to the service. The beauty is that you have done with just a single click.

Each app service is given a unique URL (mine is: http://coconuttree.azurewebsites.net)

App Service Plan or Pricing Tier

Manage the cost. The service plan will tell you how much you will have to pay. You can choose the Free tier 🙂

 

So far, I have not had to pay for anything. They are all free. Clicking on the service URL to verify its existence. Well, so far it will display the default page generated by Azure.

I want to have 2 environments: Staging and Production. In Azure term, they are called development slots. Azure makes it super easy to create them. But, it seems with the free service plan, it is not allowed. I think it makes sense. You cannot ask too many things with a free service.

I will stick with the default deployment slot. The ultimate goal is to have a full cycle of development.

VSTS to Azure

From the concept level, deployment to Azure consists of 2 steps: Package the build result and Push the package to Azure. Ok! what does it means in the context of VSTS?

Go back to our VSTS build, and enable these 2 steps

By looking at each step configuration, we can guess what they do

1. Publish: will publish (by run the publish command) the web project to a place defined by {build.artifactstagingdirectory}. I do not know where it is. I just know there is such a thing
2. Publish Artifact: will take the output from the Publish step, create an Artifact name “drop” with type “Server”. I guess this step will take the input from Publish step, create an artifact “drop” which can be deployed to a server. Therefore, the output is a package which can be deployed to somewhere else, Azure for example.

So far, I just enable them and try to explain them base on my logical thinking of what they should be doing.

To deploy the build to Azure, I will look at the Release tab. As its name suggests, I think its job is to release a build into a production server. Let’s check it out.

Create a release

Click on create a new definition, you can choose among many options. Right there on the top, that is what I need: Azure App Service Deployment

Next step makes thing very clear for me. The release will take the output from the Build flow and deploy to Azure

Then you have to setup the connection with your Azure App Service. It is pretty straightforward.

So far so good. Let’s test things out.

Run the build, it looks ok, except

When I take a look at the Console (just curiosity), I found out interesting things. Btw I should able to fix it easy. As the message suggests, I add a web.config file to the project.

The result looks promising. I do not understand the output log. But seem it works as expected

Should the Release work? Try it out.

Access the Release tab, kick off a new release, here we go, a nice dialog. I will make some guess.

It takes the input from the last build, obviously. So far so good. Ok kick the build.

Bingo! It works. It just works. One of the nice things is that you can see all the logs. You know exactly what was going on

There are so many settings in VSTS that you can tweak. You can setup continuous integration (CI) with a checkbox.

At this point, I can claim the victory. My mission has completed. It is a long post. It is time to summary what I have accomplished.

Summary

First, let talk about the cost. It costs me nothing. I have accomplished these wonderful things with zero USD, 0USD.

I code my application in my laptop with VS2017 Community Edition. It has all the features I need to build a web application.

I host my code on GitHub. If I want to make my code private, I can host it directly on VSTS.

I use VSTS to define my Continuous Integration (CI) and Continuous Delivery (CD). I really like the idea of separating the build and the release. This allows me to build many times to ensure the code does not break. However, I do not want to release every time I commit code. Separation of Concern is a powerful design concept.

I use Azure Cloud to create an App Service to host my application.

At each step, I can customize to fit my needs. All those wonderful features cost me nothing.

I am so happy to get the job done. I hope it gives you some good information, well, to start, somewhere.