Connecting your Azure Web App to a Database using Application Settings

You just built an application that connects with a Database on your local machine, but now you want to share it with the world. But you don’t want to share everything about your application with the world.

Azure web apps supports a number of different web platforms, but to effectively build while maintaining code on GitHub we need to keep configuration details of our app private including the connection string for our database.

In this case we’re going to be using a Node JS application connected to a Mongo Database hosted on a Virtual Machine.

Before we get started…
Do you have a MongoDB up and running?
Nope. – Read this post!
Yep! – Great keep going!

For reference, I’m starting with a chat application originally written by fellow evangelist Rami Sayar for an excellent Node Course he taught recently.

Prereqs:
Git
Azure Subscription
Connection string for a DB in Mongo – mine looks like this:
mongodb://40.83.182.555:27017/test

The Steps:
1. Clone or fork the repository
2. Create an App Service
3. Connect App Service to Repository
4. Add app settings in Azure Portal
5. Try it out!

1. Clone or fork the repository

The project I’m using for this demonstration is found here: Github
Now clone the project to your local machine, or fork it in GitHub.

Take a quick look at these files:
– package.json : checkout out the dependencies of the project, notice how we’re using the official mongodb driver
– mongoClientTest.js and dbTest.js : provide other examples/test files to run, just substitute your ip address of where mongo is being hosted to make sure you’re able to connect.
– app.js : this is the main file that will be run by Azure Web Apps (app.js or server.js will automatically be started by the cloud when deployed). Also, in app.js you’ll see we set ‘db’ using process.env app.set('db', process.env.DB ); – we’ll be using that in step 4.

Once comfortable with the files locally or in GitHub we’re ready to spin up our App Service in Azure.

2. Create an App Service

App Service is a PaaS service offered by Azure to make deployment of website/web services simple and easy to maintain, develop against, and scale.

To begin select the ‘Plus’ button in the upper left corner and select web+mobile, then select Web App:
selectnewwebapp

Now configure your web app:
configurewebapp

You may have to create a app service plan and resource group if you haven’t created one yet, for more info on this portion of the architecture click here and here

You’ll see this icon on your dashboard while the resource is spinning up:
deploying

Once running the portal should automatically take you to that resource, if not you’ll see it on your dashboard:
mongoappondashboard

Here’s the overview pane and the items we’ll be using in the rest of this tutorial highlighted:
webappoverview

3. Connect App Service to Repository

Now that we have an app service, let’s connect it to our repository.
There are a number of options for deployment.

In this case we’re going to deploy from GitHub, but we could have also used a local repository by adding Azure as a remote repo.

Azure will detect changes made to the repository on GitHub and redeploy the project. This makes deployments during hackathons super easy.

Select Deployment options from the overview pane -> Choose Source -> GitHub:
deployfromgithub

Note: You can also select Local Git Repository if you’ve liked to keep your code off of GitHub and add Azure as a remote repository git add remote azure "http://git.asdfgafdgasdfgasdf" – will be displayed in overview portal once initialized.

You’ll then be asked to login to GitHub so it can access the list of your repos.
Select your forked repo or the cloned repo you’ve committed to GitHub:
authrorize-andselectyourproject

Once selected you’ll see a notification in the top right corner with a loading bar for the deployment:
waitingfordeployment

Once that’s finished, you have code ready to roll in the cloud.
Azure has automatically installed the packages listed in your package.json and found the file named server.js to deploy. Next let’s configure it to talk to Mongo!

4. Add App Settings in Azure Portal

Now we have a project connected and deployed on Azure, but it won’t store the data anywhere, because a connection string hasn’t been included in the environment variables (aka application settings).

To add our monogodb to the project we just need to include the variable name and the connection string.
In our project, as noted before, we set db using process.env.DB

Select application settings and scroll down to until you see app settings then enter into the two empty fields “DB” and the connection string mentioned earlier: mongodb://40.83.182.555:27017/test
Like this:
appsettingpane

Then hit save!

Go back to your website and try entering some chatter!

Try it out!

If you visited the page it should look something like this:
finishedproduct

In the middle of the above screen shot you can see a terminal with a connection to the VM and same data in the MongoDB.

If you’re running into issues try connecting using dbTest.js or mongoClientTest.js after you add the specific IP for your VM hosting mongo.

Hope this made it super simple to connect your application to a database using Azure Web Apps.
Please let me know if you run into any issues in the comments below.

When Brett Stateham comes to town...
When Brett Stateham comes to town…

Running Node and Express on Ubuntu VM

So you just spun up your first Ubuntu Virtual Machine?
No…
Let’s fix that: “Intro to Ubuntu on Azure”

YEAH!
Let’s put it to work!

The Basic Steps to using node on an Azure VM:
1. Open the Port
2. Install Git and Install Updates
3. Install Node and NVM
4. Code and Install Express
5. Run it and check it out!
6. Use forever to keep it alive

1. Open the Port
We’re not talking battleships or submarines we’re talking Infrastructure as a Service.
Visit the landing page for your Ubuntu Virtual Machine:
vmnumberonelandingpage

And select the resource group in the top left corner:
resourcegroup

Resource groups are the way we break down how our VM interacts with the internet, other vms, storage, and public/private networks.

To open the port we need to change our network security group which is represented by the shield. (Underlined in the above screenshot)
Then we’ll select settings -> Inbound security rules
networksecuritygroupsettings

This will allow us to open up our VM to the Public Internet so we can visit it like any other website.

Under ‘Inbound security rules’ SSH is already included:
defaultssh

We’re going to add a new Inbound security rule named ExpressServerPort where we’ll set the Destination port range to 3000 which we’ll see later when starting our server. Here’s the configuration pane for our ExpressServerPort:
destinationport

2. Install Git and Check Updates
Git is fun!

SSH into our Virtual Machine like we did in the VM intro then enter:
$ sudo apt-get install git
sudoaptgetinstallgit

Yay! We have Git

Let’s run our update command just to double check we’re up to date:

$ sudo apt-get update
sudoaptgetupdate

Great let’s move on with Node!

3. Install NVM and Node

First NVM: https://github.com/creationix/nvm

NVM is a version manager for Node you can install using curl:
Enter this command to install it:
$curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash

Then source your profile to add it to your commands:
$ source ~/.profile

Then check out the version to make sure it installed:
$ nvm --version

It should look like this:
nvmisntallversion

NVM is installed!
Let’s install a version of Node!
$ nvm install 5.0

Then check our version of Node:
$ node -v
nvminstallfive

Sweeeeeeet

Check out NVMs readme on the github for more commands:
https://github.com/creationix/nvm

With node comes ‘npm’ which allows us to install a whole bunch of node awesomeness. One of the more popular packages is express a minimalist web framework, we’ll install this to start coding away.

4. Code and Install Express

We’ll be following along “Express’s” introduction if you get lost/have more questions about express.
http://expressjs.com/en/starter/installing.html

First let’s create our a directory, cd into it and initialize our app using nom.

$ mkdir myapp
$ cd myapp
$ npm init

After entering npm init we’ll be walked through a configuration step for our app. The only one that matters for now is (index.js) which will be the entry point for our app everything else can be the default for now.

If you were actually going to submit/share this code you’d want to accurately fill out this info.

After the initialization step we’ll add express and list it as a dependency:
$ npm install express --save

Here’s what those steps look like:
mkdirmyapp

Weeee now have express and an app ready for your code!

Lets open nano and put the helloworld sample into index.js

$ sudo nano index.js

sudonanohelloworld

Now lets run our app!
$ node index.js
nodeindexjs

Now that its running lets visit it by entering the IP address and port number into our browser.
In my case the URL is: http://13.88.180.170:3000/
ipaddressandport

Neat!

6. Use forever to keep it alive
Unfortunately, if we close our Terminal/SSH Connection our project will stop running.
To solve this, we use another NPM package called forever.
Here’s the link to the repository with clear instructions.

In short we install it globally:
$ sudo npm install forever -g

Then start it:
$ forever start app.js

And stop it:
$ forever stop app.js

That’s it for now!

Now clone one of your node projects and run them in the cloud!
Happy Hacking!

When the Male Roommates are home alone...
When the Male Roommates are home alone…

Intro to Ubuntu Virtual Machines on Azure

When I search:
Node JS Server Azure, Ubuntu, JavaScript, Mongo, Postgres, Flask, VM
I turn up with all sorts of unhelpful results.
So I dedicated a couple days to creating a couple guides for common Cloud Stacks on Azure VMs to make it as simple as possible to start deploying your code to the cloud.

This is the introduction and at the bottom of this blog post you’ll see other workflows fill in.

So, Here’s a guide to deploying an Ubuntu VM on Azure:
1. Gather Materials
2. Create VM
3. Check VM using SSH

1. Gather Materials
Here’s what you’ll need:
An Azure Account
An SSH Client perhaps putty… or even Bash On Windows?

2. Create VM

Head into the Azure Portal: portal.azure.com

And Select Virtual Machines -> Then ‘Add’
selectVirtualmachines

You’ll then see a page like this:
selectubuntu

Select Ubuntu Server 14.04.

There are lots of configurable deployments available if you feel like exploring.

Then select Create, but make sure the deployment model is Resource Manager as its more future ready then the classic model:
createvm

We’ll then get to the basic configuration tab, fill out the info and pick a User name and Password that you’ll remember because you’ll need it later!

configurationbasics

If you’re not familiar with Resource Groups check out THIS ARTICLE

I’ve named my resource group: ResourceGroupOne

Hit Okay to go to the next configuration pane

Select the Size of your VM. To see all the options select ‘View All’
selectvmsize

We’re going to go with the cheapest option A1 Standard:
SelectAOne

Hit Okay to take us to our final configuration Pane, “Settings”.

settingstwo

There are a number of different settings presented here.

First up is Storage:
This will configure what we want to name the storage account for our vm. I’ve changed mine to ‘resourcegrouponestorage’, but I could have selected any of my previous storage account in the same region, in this case westus.

Second is Network:
We can configure a Virtual Network to allow our virtual machines to connect to other resource on our network by default. We can also change this later. So in this case I’m creating the default virtual network.

Again, I could have selected a previously created Virtual Network Called ‘Databases’ which is in the same region.
virtualnetworkdefault

Third is Extensions:
We won’t add any extensions

Fourth is Monitoring:
Which we’ll disable for simplicity sake, but is a very powerful tool one you start needing to make scaling decisions.

Fifth and finally is Availability:
We won’t use an availability set, until we need to scale out our app.

Here’s what the lower portion of our settings pane looks like:
settingstwoend

And we’ll select OK to finish with our settings. This will take us to the summary page so we can do a one more check on our machine, don’t get to anxious about making mistakes because we can always tear this one down and spin up another if we messed something up!
vmsummary

Hit Okay one last time!

You’ll then be taken to your dashboard where you’ll see a nice loading tile:
loadingdashboard

It’ll take ~5 minutes to spin up and then we’ll be ready to take on the world!

Once ready it’ll look like this:
clickthetile

Click the tile to hit the landing page for our VM:
vmnumberonelandingpage

See that public IP address?
We’ll use that to SSH into our machine.

In my case: 13.88.180.170 !

3. Check VM using SSH

Let’s SSH into our box.

Pull out your preferred SSH client. Here’s bash on Windows and Putty Side by Side:
sshintomachine

Notice ‘Timothy’ Triple underlined?
That’s the User Name we set during basic configuration and is paired with the password that we also set in Azure.

When you connect you might have to accept the ras2key fingerprint. It’ll look like this when using putty. Or it’ll be in the terminal using bash. Type ‘yes’ or Select Yes to continue.
sayyestowarning

Then type in your password and marvel and your creation:
typeinyourpassword

Let’s test our vm by installing updates! Yay Updates!

$ sudo apt-get update
sudoaptgetupdate

Now that you have a VM ready let’s put it to work!

Host a Node Server
Host a Python Flask Server

Pradeep Cruising on National Donut Day
Pradeep Cruising on National Donut Day

MEAN Stack on Ubuntu Server Setup

Let’s say you’re at your first hackathon. You have an idea you want to develop quickly and manage and deploy remotely so you’re ready to scale, or aggregate data cross platform. Buzzwords.

I’ve seen it many times in my last 3 months of attending hackathons.

Students want to get started quickly without wasting time worrying about deployment and compatibility across devices this setup will also prepare them to work in a team because it’ll allow deployment from Git. And these principles carry down into innovation initiatives happening at companies around the world one solution is MEAN.

Let’s say you’re new to web development and you’re learning node but don’t want to gunk up you machine with installations and moving files around before you have a grasp of what really matters.

That’s where MEAN in the Cloud comes in.

So what we’re going to do is install the MEAN stack on a cloud server so we can mess with code, learn, restart, and more without worrying about ruining our machine.

This whole process will take place in eight steps:
First: Setup Ubuntu Server
Second: Get into server
Third: Install Mongo
Fourth: Install Node
Fifth: Create first Node app
Sixth: Install NPM
Seventh: Install Express and Angular using NPM
Eighth: Get a tiny server running

First: Setup Ubuntu Server

1. Login to Azure (Create an account if you don’t have one already)
Using azure isn’t required any cloud hosting that provides and Ubuntu distro should work.

2. In the bottom left click “New”

3. Next to Compute Virtual Machine

4. Select Quick Create

5. Give it a name (eg. meanincloud)

6. In IMAGE dropdown select ‘Ubuntu 14.04 LTS’

7. Leave the size at the default – you can always scale later.

8. Provide a password and confirm it

9. Select the region nearest to you.

10. Hold tight, the cloud is provisioning resources and configuring your machine.

11. After status reads running double click on ‘meanincloud’

12. Then select ‘DASHBOARD’

13. Scroll down until you see SSH details on the left.

14. take note of those values it should be something like: ‘youservername.cloudapp.net: 22″
This is your server host name and the SSH port we’ll be using this in the next section to access your remote machine

We now have a Linux VM with the Ubuntu distribution. This is our base on which we’ll build the MEAN stack.

Second: Get into Server

For this part we’ll need an SSH client. Putty is what I’ve always used and works well for this instance. Download page

1. in the box labeled Host Name (or IP address) paste ‘yourservername.cloudapp.net’ and leave the port at 22.

2. You’ll likely receive a PuTTY security alert. That’s cool for now, select Yes.

3. If you’re using azure you’re login will be ‘azureuser’

4. And you’re password will be that same that you provided at ‘7.’ in the previous section.

5. You’re now at the Ubuntu terminal (Like cmd). You’ll start at home, but you can get to root by entering: ‘cd /’ and back to home with ‘cd ~’

6. Now we get MEAN

Third: Install Mongo

The Mongo installation instructions can be found here if you’re curious. But we’ll run through that here.

Note: All lines in bold will be run in the terminal. Copy and right click to paste into your putty shell. Then press enter to run the command.

1. Import the public key used by the package management system:
~$ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10

2. Create a list file for MongoDB
~$ echo 'deb http://downloads-distro.mongodb.org/repo/ubuntu-upstart dist 10gen' | sudo tee /etc/apt/sources.list.d/mongodb.list
No result will display.

3. Reload local package database.
~$ sudo apt-get update
You’ll get about 15 seconds of output.

4. Install the MongoDB packages – This will download the latest stable version, but you can be specific if you liked an older version. Read more into it here.
~$ sudo apt-get install -y mongodb-org
You’ll get about 30 seconds of output.

5. Reload local package database
~$ sudo apt-get update

Alright! Mongo is installed, here’s a great tutorial if you want to get a better understanding of how Mongo works.

Fourth: Install Node

Node is the web app framework that you’ll be building you application with. Although its not spelled MNEA or NMEA, this more accurately represents the priority of these tools.

1. Install Node:
~$ sudo apt-get install nodejs

2. Confirm install with ‘Y’
About 20 seconds of output.

3. Node is now installed you run node by entering nodejs this will take you to the Node REPL.

4. Try it out
~$ nodejs

5. In the REPL you can run javascript
> console.log('hello world');

6. ctrl+c twice will exit the repl.

Fifth: Create your first Node app

We now have everything we technically need to start development with Node, the first thing we’ll do is create a hello world app to begin putting the pieces together.

1. First install emacs24 an inline text editor for linux that will allow us to make changes to code inside our terminal.
sudo apt-get install emacs24
a ‘Y’ will be required to finish
And we’ll get about a minute of output.
Now we can edit code right here! No need to worry about messing up your own file system.

2. Make sure we’re updated.
~$ sudo apt-get update

3. make a directory to hold our demo
~$ mkdir mean-practice

4. ‘ls’ will show us our newly created directory

5. Change into that directory
~$ cd mean-practice

6. now we’ll create our first file inside of that directory.
/mean-practice$ emacs package.json
This will open a new emacs view that will allow us to make changes, save ctrl+x+s and close ctrl+x+c.

7. This is our basic manifest file. type this into it.

{
"name" : "mean-practice",
"version": "0.0.1"
}

This is the minimum. As you learn more about node you’ll see what else will go in there.
ctrl+x+s to save and ctrl+x+c to exit.

8. Let’s create our main file, basically our entry point for the application, and where the server will begin operating.
/mean-practice$ emacs server.js

9. put this into that file:
console.log("Hello World with NODE!");
Though possibly over-zealous this is our first node app!
ctrl+x+s to save and ctrl+x+c to close.

10. Type ‘ls’ to see what’s in our mean-practice directory.
Not a ton, but everything we need to start our application.

11. Let’s run our application:
/mean-practice$ nodejs server
Sweet! All we’ll get as output is “Hello World with NODE!” but that’s better than a kick to the face.

12. To stop the server press ctrl+c

Sixth: Install secret N, NPM

Node strengths and rapid growth are due in large par to the awesome npm. A package manager which will allow you to import a whole host of clever tools, apps, widgets, and formatting helpers to make your node development as easy as possible. So let’s install that now.

1. First install NPM.
/mean-practice$ sudo apt-get install npm
You’ll need another ‘Y’
and expect about 45 seconds of output.

2. Update again
/mean-practice$ sudo apt-get update
another 20 seconds of output

Seventh: Now we’ll install Express and Angular using NPM.

Now that NPM is installed we can add our final packages!

1. Install express
/mean-practice$ sudo npm install express --save
express is in the npm system and –save will edit our package.json file to include the express module. Click this link to find out more about express.
Expect about 15 seconds of output.

2. Enter ls to see our new directory ‘node_modules’ where our node modules are being stored.

3. Open package.json to see the changes in our manifest.
/mean-practice$ emacs package.json
You’ll now see under dependencies “express”
Yay! Now express is installed.
ctrl+x+s to save and ctrl+x+c to exit.

4. Now lets install angular.
/mean-practice$ sudo npm install angular
Now the angular module is part of our application! Click on the link above to learn more about Angular.

That’s it! Now you have a MEAN stack ready for development!

Let’s quickly build a simple server, configure an endpoint in azure and become a client with our browser.

Eigth: Get a tiny server running

1. Open our server.js
/mean-practice$ emacs server.js

2. Replace our hello world statement with:


var express = require('express');
var app = express();

var port = 3000;

app.get('/', function(req, res) {
res.send('hello from afar');
});

app.listen(port, function(){
console.log("Listening at port: " + port);
})

4. Now our server.js is actually a server but our virtual machine doesn’t know that. Go back to your azure portal.

5. Select Endpoints at the top between monitor and configure.

6. At the bottom select ‘ADD’

7. Select ‘ADD A STAND-ALONE ENDPOINT’

8. Press the arrow

9. Under the NAME dropdown select HTTP

10. Leave protocol at TCP

11. Leave public port at 80

12. Change the private port to ‘3000’
We’re mapping our endpoints improperly for this demo to keep things simple. As you learn more about web development you’ll want to change your endpoints to accurately reflect what’s happening in your server.

13. Hit the checkmark.

14. Back in your putty shell run the server!
/mean-practice$ nodejs server.js

15. Open a new tab in your browser and navigate to: ‘yourservername.cloudapp.net’

16. CHECK IT OUT! You’ve got a website running node on a virtual machine! Throw your hands in the air! You’re ready to hack and learn.

Here are some learning resources to get you started.
JavaScript
Node
Git will help you with pushing code to your VM

Always shoot for the Moon!
Always shoot for the Moon! or an asteroid, go Rosetta!