TeamCity on Azure Windows Server

You’ve recently installed TeamCity on your Azure Windows Server and would like to access the TeamCity page from a remote computer. However, you are getting a timeout error when you try to access this page from the remote computer. What gives?

Firstly, let me just point you to these two resources for getting started with Azure Windows Server and TeamCity installations.

For the Windows Server setup, there is a tutorial video that you can watch on the Azure Portal. Navigate to: https://portal.azure.com/ and you will see the following on your dashboard.

azure-dashboard

Once you select Virtual Machines you see the tutorial to get started with Windows Server on Azure.

Next, for TeamCity installation instructions, this can be found on the main website here:  https://confluence.jetbrains.com/display/TCD10/Installing+and+Configuring+the+TeamCity+Server

Once you’ve installed TeamCity, you’d like to access it from a remote computer, as mentioned previous, however, you can’t because the web page keeps timing out. I experienced the same problem and below I’ve got the solution for you to save you some headache (as I had).

While searching around for why this was happening, I found this article here: http://www.danmusk.com/setting-up-teamcity-8-on-an-azure-virtual-machine/. It seems extremely promising, until I realized that it appears to be out of date, and Microsoft have made some major changes to the way that they have the UI structured to achieved what is mentioned in the article.

In a nutshell, what we need to do is configure the port to be accessible from a public facing computer (i.e. the remote that you are trying to connect from). From the Azure environment, this is handled slightly differently than a traditional server where you would just configure the router/hub/switch and the server’s firewall settings. Once you know where to find the configuration, it is much simpler than doing it the traditional way (as one would hope for cloud hosted solutions).

Let me walk you through the steps to get this configured.

Please note that this “tutorial” is for the UI version of Azure as at April 2017. If you are reading this in the future and do not see any of the components that I am talking about, Microsoft may have changed the way that you need to navigate to the setting in order to get this configured. Hopefully, the explanation that is provided here is enough to help you regardless of the UI.

On your dashboard you should see the followingazure-dashboard-2

Note the Network Security Group. This is the one that you need to click on.

Once there you will see a overview page similar to the one below (note that the TeamCity line will be missing in your case, since it has not been set up yet). (Click on the image if it is too small)

nsg

From the side menu, select Inbound Security Rules and you will see an option to add a new Security Rule.

nsg-new

Once you select Add, you will be able to fill in the details that pertain to your TeamCity instance. Enter the port number that you used when installing TeamCity and you will now be able to connect to your TeamCity instance from a remote computer.

Let’s Encrypt (using certbot) tutorial

Let’s Encrypt is a free, automated, and open Certificate Authority. It’s goal is to get all web pages on the internet, encrypted (using HTTPS/SSL). When web pages are sent via HTTPS, the contents cannot be modified in transit, ensuring that the receiver of the content receives the intended information. There are also other benefits of using HTTPS which you can read about here.

I have written a tutorial on how to get your site set up and using HTTPS/SSL on my wiki site, which you can find here.

The reason I have posted the tutorial on the wiki instead of directly here is to allow quicker navigation between tutorial headings. WordPress does not allow this in it’s design but the wiki platform does.

You can use this platform to provide any comments you might have regarding the tutorial

Ensure gitignore ignores files correctly

Introduction

In this tutorial we’ll take a look at how to get gitignore to ignore files correctly when it seems that it is not ignoring the files that you have specified in the .gitignore file.

Let’s examine why this would happen.

gitignore will only ignore files that are not currently under source control. This means that if a file was committed before it was added to the .gitignore file, it will continue to track the changes of this file.

This is the basic principle of how gitignore works.

It is good practise to always update your .gitignore file before you commit any files that you do not want or need under source control. These files are commonly binaries, executables or any generated files that are automatically created when you build a project.

There may be cases where unwanted code is checked-in by mistake with the inital commit or subsequent commits. This is when our described problem will arise. No matter how many times you try to specify the file in the .gitignore file, it will always remain in the staging area.

Prerequisite Knowledge Assumed

The below resolution example makes use of the following software’s

  • git
  • git extensions

If you are unfamiliar with git extensions, there is a section right at the bottom that contains just the git commits that are required to resolve the problem.

Resolution

Steps that are required to resolve this problem:

  1. Remove the files that you do not want tracked by source control, from git
    1. You can do this by running “git rm -r –cached file/s
  2. Commit these removed files
  3. Update .gitignore file
  4. Commit .gitignore file

Let’s walk through the following example to expand exactly what you need to do for each

You’ve got a new repo that has just been created. You’re super excited about your new repo and this is the view that you have in git extensions:

When you go to commit you see the following:

From here you decide to stage all the files without adding the files in the bin folder to the .gitignore file.

So you stage all the files and hit commit.

Changes have now been made to your normal.code file and as a result the auto.gen file has been updated. When you go to the commit screen you now see the following:

At this point you realise that you don’t want the auto.gen file or any files from the bin directory to be committed to source control. When you try to add the bin directory to the .gitignore file it doesn’t seem to work, since the staging area looks like the image below:

Point 1 implemented

This is where you will need to implement point 1 (as discussed above).

To do this, open git bash and navigate to the repo.

Once here, run the following command:

See image below:

As you can see, the two files in the bin directory were removed.

When we return to git extensions and refresh the staging area we see the following:

As you can see from the above image, the two bin files have been marked as “deleted“. The files have not physically been deleted. They have simply been removed from git’s tracking.

Point 2 implemented

Now we need to commit these removed files so that git will no longer track changes made to these files

After you have committed these files your git extension will look something like this:

Point 3 implemented

You can now update the .gitignore file to add any additional files that you would like to ignore. For the purpose of these example, we do not need to add any more contents to the .gitignore file as we have already specified all the bin files in the .gitignore file.

Point 4 implemented

You can now commit the .gitignore file and git will never track any files in the bin folder.

Simple git commands to resolve

If you are unfirmaliar with git extensions you can simply execute the following git commands to resolve the problem:

See the below images for the full example

How to use basic handlebars (handlebars.js)

Basic steps

In this article we will take a look at creating a basic handlebars file and making use of it in your html page. There are a few basic steps to use handlebars that we need to follow.

  1. Create the handlebars template file
  2. Get (or make up) data that will be used to populate the handlebars template
  3. Make sure to wrap the data in an opts where you can append the containerSelector (explained more below)
  4. Create a method that will do the injection of the data
    1. This method will also place the handlebars template onto your page

The code used in this article is simply for example purposes.

A full html page will be provided at the bottom for reference. For the sake of the example, all the code will be inside of the one html page; however you would likely want to have these components separated out as good coding practices dictate. When it comes to split out the code into different files, remember to include all the files in the main html page. An example will be shown at the bottom as well.

1. Create handlebars file

There are three things that can be noted here.

  1. We put an ID on the script tag – “handlebarsTemplateExample”. This will be used as our template selector which will be discuss below.
  2. We are creating HTML in the script tags (this is how handlebars works).
  3. We have this weird notation of “{{” and “}}”. These are variables which handlebars uses to bind information. Similar to AngularJS.

2. Get data for handlebars to inject

For this basic example we will simply make up some data. Ideally you would want to get this data from an ajax call or something similar.

3. Wrap data in opts

Since all of this is done in JavaScript it makes it easier for us to manage our code if we wrap all of our arguments into an “options” variable which is usually shortened to “opts”.

Opts is simply the parameters that we are going to be passing to the method. It is easier to say: “myMethod(opts)” if there are plenty of arguments that you want to pass to the method as opposed to: “myMethod(arg1, arg2, arg3….)”.

Making use of opts is also a better JavaScript practice as you can easily determine what each of the parameters are referring too. You can take a look at these two articles for more information on that (since this is a whole other discussion):

  1. http://stackoverflow.com/questions/12826977/multiple-arguments-vs-options-object
  2. http://stackoverflow.com/questions/4893642/javascript-passing-arguments-to-function

So let’s make the “wrapper”

In the above code block you will see that we have added templateSelector and containerSelector to our opts object.

  • templateSelector will be used to determine where we get our source from (i.e. the handlebars template)
  • conatinerSelector will be used to inject the result of the handlebars into a div on your page. This means that you would need to have a div (with an ID of “insertDataHere” (in this example) on your html page). You can see the full html page below if you are confused.

4. Create method to do handlebars injection

This is the final step to get your basic handlebars up and running. We will now make the basic handlebars injection method.

The code above is quite simple. Let’s break it down line by line.

This takes the html from the templateSelector and stores it in a variable called source. This would mean that it contains our html where we have defined: {{data.header}} and {{data.information}}.

Now that we have the basic handlebars “template” (inside source), let’s create the actual handlebars template by compiling the source. The result is stored in template.

This line is where the magic happens. Now that we have a compiled handlebars template we can send the template our data. The variable “data” must contain “header” and “information”. If it does not, these items will not be bound to the template. This matches the names that we gave our data injection variables between the “{{” and “}}” in our handlebars file.
Lastly we put our completed template (which is stored inside html as per the previous line; with its data injected in) inside of our div on the main html page.

You have now created a basic handlebars template and injected it into your html. Please see the below code for the full reference.

Full one page HTML

Remember you can also always download the files and not use the HTTP address for the script/s.

References to remember when splitting out files

Output

Here is a screen shot of the result

blog-handlebars-example

UPDATE/EDIT

Previously I had mentioned that you could extract the handlebars template out of the html file. Your external reference would look like this:

This will not work, because there is one thing that I forgot to mention. The extracted handlebars file needs to be inside of an HTML file. This is because a .js file does not register “<script>” tags.

This means that you would need to load the HTML page into your other HTML page. This is just a simple way of extracting the handlebars file out into another file; it is however not the most pleasant way of doing it. For the simplicity of this tutorial I would recommend that you rather keep the handlebars script in your HTML file and not split this into another file.

If you do wish to split it into another file this is how you would do so:

Furthermore, in your HTML page you will need to add the following