Angular + Cloud Services = Dream Team for Small Projects

12 March 2015 - AngularJS, Azure

For one of my private hobbies (keeping honey bees), I recently needed a simple registration form. It should just ask for a few data items, use a CAPTCHA to protect from spam, save the registrations in a DB, and send me a notification email. Within a few hours everything was up and running. In this blog post I share the code and describe the cloud components you can use to rapidly solve such a requirement.

Necessary Components

First, I made a list of components I would need to solve this problem.

• A nice URI
  I would need a domain name that is easy to remember.
• A web server
  A web server is necessary to serve the HTML/JavaScript/CSS files.
• Platform for backend logic
  I need a bit of server-side logic (e.g. persistantly store registrations, send email notification, check CAPTCHA, etc.).
• A JavaScript framework for some client-side logic
  Although the client-side logic is minimal, I still need a few things (e.g. mandatory fields, communitation with backend, etc.).
• A development environment for client- and server-side code
  I need to write, build, and deploy the code somehow.
• A CAPTCHA service
  This seems necessary to protected from unwanted spam.
• Persistent storage
  I want to persistently store registrations in some kind of database.
• Component for sending mails
  Whenever someone registers, I want to receive a notification email.

Important parameter: The project budget in terms of time and money is minimal, nearly nothing. It most not cost more than a few Euros and take a few hours to setup, implement, and put into production.

My Component Setup

The cloud is perfect for such projects. No need to setup server, buy expensive software, install heavy-weight IDEs, etc. The browser is all you need. Here are the components I used for my mini web app:

• Domain
  The web is full of hosting providers who offer domains for just a few Euros. In my case I picked an .at-domain at the local hosting provider World4You. PS.: I really hope that Azure will add DNS in the future.
• Web hosting
  Azure Websites, what else? In my opinion the greatest PaaS offering for web sites and apps on the planet.
• Server-side logic
  I am a big fan of ASP.NET and C#. However, for such small projects I really like Node.js = JavaScript on the server. Node.js works perfectly fine with Azure Websites (see previous point).
• Client-side logic
  AngularJS is my framework of choice. It makes developing of the client logic a piece of cake.
• Development environment
  Again, Azure Websites rulez. It comes with a feature-rich IDE for client- and server-side web development built in (VSO "Monaco"). All I need is the browser.
• CAPTCHA service
  No need to build one yourself. Google is offering reCAPTCHA for free.
• Storage
  There are dozens of options for persistent storage in the cloud. I decided to use Azure's new NoSQL option DocumentDB. It is fully managed. Therefore I do not have to waste time to install and configure servers.
• Mail service
  For our time cockpit product we have been using Mandrill for years. Its the perfect tool for the job.

That's the beauty of the cloud. No setting up servers, no installing software. Focus on the real problem, in my case the registration web app.

We are all set, let's start coding.

Note that the entire code can be downloaded from my GitHub Samples repository.

Client-Side Code

The client-side consists of the following pieces:

• HTML (see index.html)
  Note that I did not include the frameworks (e.g. Bootstrap, jQuery, AngularJS, etc.) in my project. I am getting the necessary files from various Content Deliver Networks (CDN) like Google Hosted Libraries.
• CSS (see index.css)
  Nothing special here.
• JavaScript
  The project is so small that I included client-side JavaScript directly into the index.html file. The JavaScript code is quite simple. The only thing that is worth while mentioning is the combination of AngularJS and Google's reCAPTCHA.

Server-Side Code

The server-side is also written in JavaScript using Node.js. In Node.js, you compose your application from various components using the Node Package Manager (NPM). My example uses the following packages (for code see also package.json):

• Express.js for handling web requests (i.e. the registration requests coming from the client) with body-parser for handling JSON in HTTP requests.
• Node client SDK for Azure's DocumentDB which makes it really simple to write data into DocumentDB from Node.js.
• Needle for making HTTP requests from Node.js (necessary to communicate with Google's web API for reCAPTCHA).
• Node client for the Mandrill mail service.

With that components, writing the server-side code was not complex. If you are interested, you find the code in server.js plus some configuration data in config.js.

Development Process

I created a skeleton for my app locally (using a text editor I have on my machine) and used Git to deploy it to Azure Websites.

If you are not familiar with this process, check this walkthrough in Azure's Node Developer Center.

Once I had the skeleton app in Azure Websites, I switched into the browser and used Visual Studio Online "Monaco" for the rest of the development work. Once you enabled VSO for your website, you can connect to it using the URL https://your-websites-name.scm.azurewebsites.net/dev/wwwroot/. Here is a screenshot of how it looks like (click to enlarge):

Monaco really works great for small web development projects. You have a nice editor with IntelliSense (not as good as Visual Studio but still ok), a console, output window, Git integration, auto-save, etc.

Summary

Granted, this example has very limited functionality. However, sometimes especially such small projects are a challenge. You don't have a large budget, it has to be in production within a few hours, no server resources, maybe even not your usual developer workstation. This sample should demonstrate that the cloud shines in such situations. Nearly all of the systems mentioned above offer free tiers for low-volume websites like mine. But still you get world-class services and a professional level of security.