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.

Procure more Mentors – 7 Habits of Highly Effective Aspiring Programmers (Part 1)

This is arguably one of the most important pieces of advice I can give out, if not the most important. Looking years back, I now realize that mentors have been a more important part of my technological education than I would have given credit to in the past. They include one of my best friends who first demoed his Liberty BASIC duck shooting game to me in elementary (first exposure to code, honestly thought programming was a bit gimmicky), a classmate in grade 6 who extorted money from me by fooling me into believing he hacked and stole my RAM and processor speed via the Internet (started my interest in malware removal), a father’s friend’s son who would try to sell me computers and to whom I’d ask about general computer stuff (taught me how to discuss technology articulately), a diabetic math professor who I got to look at my torrented PHP game site code (taught me I had to learn how to code for real, tweaking variables and being a script kiddie wasn’t going to get me anywhere. Also my first exposure to Linux) and a physics professor for whom I coded for in the summer (became a fan of vim and the unix shell, also learned the importance of programming in other disciplines).

The primary benefits of mentors are obvious; they show you how to do stuff. Books also do that, but they fail in certain ways (which I’ll describe shortly). The slightly less acknowledged benefit of mentors is that you can go to a mentor for pretty much anything. It’s typical to ask them about programming and computer stuff, but mentors have a lot more goodies in store than that. Being somehow affiliated with the field of technology, they are bound to be connected to other people like themselves, often much more talented than they are. They have trotted the same path you have and will help you avoid all the mistakes they made initially (heh.. just ask me what NOT to do). Mentors are often also the best types of friends you can have. Your mom and your boyfriend might not relate to why you’re frustrated about trying to run a loop invoking callbacks, inside a callback that returns to your node.js/express router, only to receive an nondescript 503 error on the console, but mentors certainly do, probably more than you. Some mentors will even give you cash and food, if they like you enough (think Y Combinator).

Mentors themselves seek ambitious amateurs, because 1. ambitious people get around and will one day be in a position to return the favor 2. teaching is the most efficient way to retain and perfect your knowledge 3. mentors are nice people and were once in your position. How can you pretend to be experienced in your field when you can’t help people with more basic stuff?

It might be tempting to think that the internet and books have all the knowledge you need to guide you forward. The truth of the matter however, is that written and recorded knowledge represents a mere fraction of all human knowledge, past and present. Oral tradition (and physical?) still dominates as our primary method of disseminating knowledge, largely due to the lower barrier of entry (e.g. many people don’t have good writing skills, initially time consuming, lack of interest, etc.) This is less evident at first, but becomes particularly important as you progress in your education. As you inch towards the pinnacle of your field, you’ll realize that less and less of your answers are online (not to mention that live acquaintances are inherently more trustworthy than arbitrary answers on SO). Things you might be working on may have only been discussed sparingly by a few select people in the world. Bugs you will encounter have only been dealt with by some random soul in Colorado.

Wisdom of the Ancients - http://xkcd.com/979

Wisdom of the Ancients – xkcd.com/979

Years later (ok im not that old), I have now surpassed all of these mentors and many more in programming capacity, to the point that many of them come to me seeking programming expertise. I know that makes me sound a bit prodigious, but really, it’s only natural for any aspiring programmer. Chances are, your first mentor wasn’t/won’t be a programmer by profession. One of Albert Einstein’s preeminent mentors, Max Talmey, was an ophthalmologist, of all things. Despite Talmey’s physics knowledge probably being limited to optics and elementary mechanics, he shared his passion for sciences with Einstein nearly every week for 5 years. The teenage Einstein’s mastery of math and physics soon surpassed Talmey’s. There’s evidently a limit to how much you can be taught by your coach, else your coach would be the best programmer already and that’s that. Just like Eugenie Bouchard parted ways with her childhood coach when she reached no. 5 in the WTA rankings, you too will need to drop your mentors when you reach a certain standing. The day you’re no longer able to surpass your mentors, you’re no longer an aspiring programmer, but just another career programmer (not to say you’re not ambitious in other areas).

1337: Part 1 - xkcd.com/342

1337: Part 1 – xkcd.com/342

Finding mentors is not difficult. The worst case scenario is that you find someone on the internet because you live in an isolated area. If that’s the case, look at the forums or discussions for sites like Codeacademy or Scratch. You can also try contacting the evangelism teams for companies like Microsoft or Google. Joining Facebook groups is also an extremely effective way of finding mentors. Even if you’re not isolated, do pursue this! To find them, just use regular search terms in Facebook’s search box. If you’re under 15, the best way to find people is probably by asking your parents, siblings and the school librarian. Stay weary of strangers! If you’re older (or perhaps more mature), you should try to meet as many career programmers as possible. Don’t just find one or two, some of them will have bad programming habits or may be misinformed and the best way to hedge against that is to see who’s different from the others (she’s either really weak or really talented). The reason I mention age is because the younger you are, the more people will be afraid to work with you. It’s understandable, they typically have more to lose than do to gain with younger mentees. As you’re older, you’ll fit in more at a university setting, where you’ll be able to meet with older students who have similar ambition. A great place to meet competent mentors are hackathons and workshops. You’ll get immediate experience points just for working with them. Don’t be afraid to join them just because you’re not as good. If you don’t want to dragging down a pro team, ask if they mind taking a newbie along. You don’t have to be on the BEST team, just one that is better than what you are now.

Having written all this, it begets the questions of how I’m currently managing my mentors and whether I’m currently mentoring anyone. I couldn’t begin discussing this without first mentioning Rudi Chen. Rudi’s the reason I’m here today talking about code, instead of talking about something like 7 Habits of Highly Effective Aspiring Med. Students. Rudi first found me on Facebook after hearing about me trying to compete in the Imagine Cup. He in turn recruited me as a mentor for Microsoft at my school and the rest is history. Whenever I have a career question I turn to him. He’s also very talented in other areas, so I ask him for help on things like Image Processing/Computer Vision. Rudi’s actions further introduced me to other talented individuals, such as Steve Woz reincarnate Louis St-Amour and evangelist extraordinare Sage Franch. Just in the last couple of weeks, Louis saved my ass at a hackathon via Skype and Sage helped me present a case to Microsoft for the need of two Kinect hackathons in Montreal. There’s also the professors I work with at the Montreal Neurological institute, Dr. Villiers-Sidani and Dr. Voss. Although I am more proficient than them in programming, they’re more experienced than me in regards to hardware and now our project is getting me up to par on circuits and electronics.

In terms of my mentoring, there is this blog where I write sometimes… 😉 A few students I recruited while I was in CEGEP (Pre-university schooling in Quebec) for the school technology club I started, work with me actively to advance their programming skills. They themselves are starting to become mentors. I also tutor a lot. I guess it’s not as benevolent as just straight up helping people, but teaching semi-professionally allows you to practice your craft while being held to a higher standard. In addition to all this, there’s the CS homework I help people with for the heck of it. There’s a lot of this, but I don’t mind at all. In fact, I encourage people to let me help them. They’re really helping me. I never had a formal education in programming so it’s nice to see how I would fare academically. Sometimes there are people who try to take advantage of this however, so it’s important to be weary.

If you need a mentor (which you do), why not start by asking here? Every great programmer made some friends.

The next article in this series: Put Your Money Where Your Mouth Is and the prior: The Seven Habits of Highly Effective Aspiring Programmers