Setup Azure Websites & Add Domains – Node.js Express Sign-Up Site Tutorial on Azure Websites (Part 1)

As I mentioned in part 0 of the tutorial, It’s ridiculously easy to spin up a website on Azure. There are other tutorials on how to set up the site, but I’ll include a brief tutorial here for the sake of completeness. Setting up a custom domain for the site (i.e. www.ramenscafe.com instead of www.ramenscafe.azurewebsites.com) is also for some reason quite a hassle and the official tutorials did not work for me and many others, so I’ll explain how I managed to do it.

First things first, navigate to your Azure portal. Screenshot (105) - redacted

Press on the NEW button on the bottom left. Choose COMPUTE -> WEBSITE -> QUICK CREATE

Screenshot (106) - redacted

Choose a name for your site. You can later use this URL to access the site, in addition to any domains you add. For the Web Hosting Plan, choose the option to create one if there is none existing currently. Select the CREATE WEBSITE checkmark on the bottom right. Your site should be up before you can say half a mil for real.

Half a mil fo-

Half a mil fo-

Click BROWSE on the bottom to be redirected to your new website.

Screenshot (114)

As you can, there’s not much going on for now, just like when you first visit a site you launch on a traditional webhost. We’ll add content in the upcoming tutorials.

Add Domain to Azure Website

First, I’m assuming you purchased a domain already. If you haven’t, you can grab one at Namecheap for… cheap (yep, that is an affiliate link). If you’re looking for an exotic domain such as a .com.bd in my case or a .quebec domain, you might be better off contacting your national authority on web domains directly; Wikipedia will mention the regulating body for each domain (this might also be cheaper and less shady, as in my case). Go to your domain registrar’s settings page and go to DNS settings. If your registrar won’t handle DNS, you can use Namecheap’s freeDNS feature to use as a nameserver (I won’t go into detail here, but let me know if you need help with that).

Screenshot (112) - redacted

Ignore autodiscover, lyncdiscover and everything beneath it. These are records to configure Office365 domains.

Note, the exact instructions will depend on your registrar/DNS host. You should strive to make the records as much like this as possible. You’re going to have to add the domain records to the domain settings page. The first thing we add is our website’s IP on the @ record. Choose A (Address) for that, if it’s not set already. The TTL (Time-To-Live) will bet set automatically, but choosing 1800 otherwise is fine. for the www record put yourdomain.azurewebsites.net. . That double period was intentional. You will likely have to put a period after the .net for it to work properly, but this might depend on the DNS service.

These records alone will likely not be enough for your domain to function properly (depends on how finicky Azure is being). So we’re going to add two additional CNAME (Alias) records. Add an awverify record with URL awverify.yourdomain.azurewebsites.net. . Then add an awverify.www record with URL awverify.yourdomain.azurewebsites.net. . This is necessary for the www to work if entered in an address bar (without it yourdomain.com would work but not www.yourdomain.com). To add subdomains, do the same thing again, but this time add the name of the subdomain anywhere you see an awverify (check the ukil records in the picture to see what I mean).

Finally, go back to the Azure Portal and click on WEBSITES. Select the name of your website, (but don’t click on anywhere near the arrow on the website title, or it will take you to the website management page). The option to MANAGE DOMAINS should show up on the bottom. Click that. Check the picture before the last two to see what I mean.

Screenshot (110) - redacted

Now all you have to do is add www.yourdomain.com and yourdomain.com. A waiting animation should be played in the text box and if it’s successful, you’ll see a green checkmark. If you get a red x, then try exiting the page and coming back. I once had to refresh after several minutes for it to work.

Green checkmark indicates you have yet to fail in life.

Green checkmark indicates you have yet to fail in life.

And with that, you now your website up along with it’s own domain name!

Node.js Express Sign-Up Site Tutorial on Azure Websites (Part 0)

Recently, I’ve started focusing more on node.js development. While being harder (imo) than developing Windows or Android Apps and not as exciting as working with hardware, there are a range of advantages that compelled me to start developing for web. The primary reason is the ease of disseminating content through the web. Although the initial cost for me to fire-up and distribute a Windows Phone app is probably lower, in the long run, it’s a lot harder to get people to try it out. People are lazy and generally won’t bother downloading your stuff unless they really like you or have a good deal to gain by downloading your app. With a website on the other hand, people are usually a mouse breadth away from clicking on your link in a Facebook chat window. Better yet, if they’re not on a PC, they can still access the same content as everyone else, using that same link, on any device.

Why this is extremely useful is because it helps you win with things like hackathons or anywhere where you might be obliged to sell a concept. For the price of a domain, you can get a room full of people to visit your site during a demo. The investor you’re pitching will actually bother looking at your site, as opposed to using some demeaning tactic like saying she doesn’t have time to download your app.

Some of the other benefits include being able to use SEO or social marketing. It’s a lot harder to influence where your app shows up in an app store, when every app is given the same amount of screen space between a million others. On the internet, how popular your site is depends on how well you can game Google, Bing, Facebook and Twitter (apps themselves have to compete with sites in this domain, but honestly how often do you come across an app as opposed to a hyperlink?) No doubt there are millions of more potential competitors on the internet, but it’s a lot easier to SEO your up to a search engine’s front page than an app store’s.

To document my own learning, I will be writing up tutorials to show how you can create and launch your own website on Azure Websites. There are a lot of good tutorials on making a simple sample site with Express and Node.js and some other ones on Azure, but there isn’t any comprehensive tutorial to show you how to combine them and make an actual, useable website. Some things I’ll cover are domains, databases and styling your website.

Why Node.js?

There are several web stacks I could’ve picked from, such as the ever present LAMP stack (PHP w/ SQL), the startup perennial Ruby on Rails, Django or flask for Python, or even C#/ASP.NET (C# is my favourite language, if you didn’t know already). Asking which is better is evidently a shark vs. gorilla question. Node.js currently fits my needs better than other frameworks and is more convenient for me to use.

I first considered using LAMP, but I wanted to take advantage of the perks of the newer stacks, such as easy prototyping and package managers. PHP itself is now getting many of these upgrades via frameworks such as Symfony and Laravel. I came close to using Laravel, but couldn’t get it configured due to some server issues and eventually stuck to what I had working already (which was node.js). As of now, PHP (especially with Laravel) is probably the easiest to pickup. Examples of large sites using LAMP are Facebook (largely because it was made in the early 2000s when PHP was all there was and a revamp would be a very costly procedure to pursue). It does get the job done. Also begging a mention is the fact that most development tasks can be fulfilled by writing a WordPress plugin rather than making an entire site, drastically reducing the time required to deploy a product

Ruby on Rails was my other option. The main reason I decided not to follow through was because of its steep learning curve. Ruby on its face is easy to learn, but RoR takes work. RoR probably has the largest community right now and this shows with the wealth of plugins they have, aptly titled gems. Ruby also has some other perks such as scaffolding and out of the box CSRF protection. I didn’t end up using RoR because I wanted to put less effort in learning the basics.

I don’t use the python stacks mainly because I’m not a python fan, though my friends have had good results with Django on Google App Engine. C# I stayed away from because I wanted to get experience with other languages and to make it easier for me to find younger developers/get hired in non-enterprise. ASP.NET development is somewhat stigmatized, but it’s actually pretty neat. I won’t go in to detail in this post.

After eliminating all the other options, I was left with node.js. My two main reasons for using node.js was the excellent support now available on Azure and Visual Studio (check out Node Tools for Visual Studio) for node and the fact that node.js uses javascript, permitting me to use one language for all my web development. It’s pretty easy to pick up coming from C# or Java (as opposed to PHP or Ruby). Node.js also has a glorious package manager, npm, which is akin to sudo apt-get on Ubuntu. Where node.js really shines is multiple concurrent connections to the server/high IO traffic, such as in a chat application or maybe even a 2D browser MMORPG. This isn’t currently too important for me, but I wanted to learn how to develop with it for when it will be important. For a quick tutorial on Javascript and node.js, check out learnyounode.

Why Azure Websites?

Azure Websites (and Azure in general) is great. After doing some mucking around, I found out that Azure supposedly initially had a very ugly GUI, but the Azure team (cloud was under Nadella at the time) fixed it and now, boy is it sexy! I never fathomed spinning up a server in mere seconds and this was probably the catalyst for me taking the leap to Web. The price is pretty competitive with Amazon Web Services (they’re both constantly dropping their rates, they’ll send you e-mails every week about it, literally) and although it’s not as cheap as hosting a dozen low traffic sites on a shared host (like I do with this blog), if you scale to a commercial load, the prices even out. Microsoft is also currently working to give students and startups a good deal of free hosting credits (Y Combinator companies for example, get 500k in Azure costs defrayed) so try to contact your local campus or startup Microsoft rep to hook you up.

The Goal: Proshno.com.bd

I wanted to start a site to offer a certain service in Bangladesh. Seeing as it’s going to take a while to launch the site, I wanted to put up a beta sign-up page on the domain so I could drum up some interest for the brand. The site is currently pretty basic, but it encompasses a host of technologies to carry out its objective. A user can sign-up with their e-mail and pick an option from a form. If they sign-up with a proper e-mail, their details are entered on a database and an e-mail is sent to my inbox. As opposed to redirecting, the page uses AJAX to confirm or deny the sign-up on the same page. The routing and closer to metal stuff is taken care by node.js and the Express(.js) web framework. Sendgrid deals with e-mails and Azure tables stores our database results. The site is responsive thanks to bootstrap, but currently has some graphical bugs on certain devices.

Initial pre-functional mockup of the Proshno Sign-Up Page.

Initial pre-functional mockup of the Proshno Sign-Up Page.

I’ll put the first tutorial up shortly. For now, it would be wise to download node.js and familiarize yourself with Jade (a cool way to write HTML) and Stylus (a cool way to write CSS) if you haven’t already.

EDIT: The next tutorial in the series can be found here.

The 7 Habits of Highly Effective Aspiring Programmers

I was sitting in front of my Surface, doing absolutely nothing, when I thought I came up with a brilliant idea for a blog post title. After vainly musing to myself about my good fortunes for 30 minutes, I came to another brilliant conclusion. I went to bing to confirm it. Here’s a glimpse of what I saw:

There were more than seven results.Well turns out I’m not the Haruki Murakami of creative titles as I’d like to believe. I’d hate to surrender this perfectly good opportunity to write however, so I’m going to slightly amend my original title and discuss a topic that I am more apt write about. It’s not that bad, because Stephen Covey’s son Sean did the same with his father’s book.

By chance, this is a topic I should be writing about anyway. A lot of younger students who are interested in pursuing a career in software development ask me frequently on what exactly they should do to prepare. Likewise, I get a lot of adults asking me how they can pick up programming (well usually it’s because they want me to build their ‘brilliant’ app idea and I tell them how they can do it themselves) I know that everyone has their own way of learning how to program; I’m personally tempted to just tell people get a copy of Visual Studio and make a calculator, using Stack Overflow to fill in the gaps. Evidently however, there’s no one stop shop to learn programming, even resources like Microsoft Virtual Academy and SO can’t solve all your problems (and please, don’t mention a college degree). If they could, what would be the point for you to become a programmer? The purpose of a programmer isn’t to merely follow instructions, but to create instructions for tasks that we have yet to accomplish.

Thus, it’s with this in mind that I’ve come to suggest certain ideals to aspiring programmers. I don’t think they’re all absolutely necessary. There are legendary programmers who pulled it off without having a mentor, without having a decent computer and without helping anyone else in the process. But can you really name any who pulled it off without following at most, two of these points? I can’t think of any. These recommendations are going to provide you a footing from where to launch yourself in epic world of computer programming. Without further ado, I present the 7 habits of highly effective aspiring programmers.

  1. Procure more mentors
  2. Put your money where your mouth is
  3. Prove yourself (challenge)
  4. Don’t fear the technology
  5. Delve into everything
  6. Mend your Mind, Soul and Body
  7. Programming is just a means and not an end

I know that it might be tempting to look at the list and say “Well golly Mansib, some of these are essential to any career.” That’s definitely true. We’re all doing all of this to some extent already, but it’s a question of what extent. Before you were doing it unconsciously and not actively. Now that you know, hopefully you’ll pull all the stops.

I’ll post a detail analysis of each habit on a period basis. Stay tuned 🙂