Angular + Cloud Services = Dream Team for Small Projects
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.
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
- Platform for backend logic
I need a bit of server-side logic (e.g. persistantly store registrations, send email notification, check CAPTCHA, etc.).
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:
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.
Azure Websites, what else? In my opinion the greatest PaaS offering for web sites and apps on the planet.
AngularJS is my framework of choice. It makes developing of the client logic a piece of cake.
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.
No need to build one yourself. Google is offering reCAPTCHA for free.
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.
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.
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.
- 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.
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.
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.