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 Mongo on Ubuntu Virtual Machine in Azure

You just setup a VM and you want to store data!

You checked out Document DB, but decided Mongo was more your style.

Prereqs:
An Ubuntu Virtual Machine in Azure

Let’s get started!

There are four steps:
1. Open the appropriate port on Azure
2. Install Mongo
3. Configure Mongo to connect to all external IPs
4. Connect your application

1. Open the appropriate port on Azure

Go to your virtual machine’s landing page and select the resource group in the top left corner:
vmnetworkselection

Resource groups are the way Azure breaks 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 and underlined in the screenshot above.

Then, once you’ve selected the Network Security Group, select Settings -> Inbound Security rules

This will allow us to open up our VM to the Public Internet via a port that we'll connect our client side application to.
This will allow us to open up our VM to the Public Internet via a port that we’ll connect our client side application to.

You’ll notice that SSH is already included, that’s what we’re using in our terminal. You may also have other ports opened if you’ve followed some of my other posts.

We’re going to create a new Inbound Security Rule called MongoPort where we’ll set the Destination port range to 27017 (the default port for MongoDB)

You can see the configuration pane in the screenshot above identified as item 3.

Once you hit ‘Okay’ or ‘Save’ the port will be opened in a couple seconds.

You should see a notification in the top right corner once completed. Now the port is available to the open internet, but Mongo isn’t installed or configured to be listening at that port. So let’s get to it.

2. Install Mongo

Installing Mongo on Ubuntu is easy and well documented by the MongoDB group. Just enter a few commands and you’ll be up and running in no time.

I followed the directions provided by docs.mongo.com –
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/

Make sure you’re following along with the directions for your specific instance of Ubuntu.

To check your version of Ubuntu enter:
$ lsb_release -a

Once you’ve followed the directions provided by Mongo, here are some other helpful commands to make sure everything is configured properly.

See a log of what MongoDB is doing:
$ cat /var/log/mongodb/mongod.log

See all the processes running on your machine:
$ ps -aux

See all the processes with mongo in the listing:
$ ps -aux | grep mongo

See the status of the ports:
$ netstat -ntlp

Here’s what the bottom of my log file looks like as well as a double checking of the current status of Mongo and what port its running on.

psandportcheckin

Before we access this DB from our application we need to change one setting so Mongo accepts connections from different IP addresses besides the local IP address.

3. Configure Mongo to connect to all external IPs

Before we go on, I need to make it clear that this is not a best practice, and no user data should be stored on a VM with an open port like this. But for development and practice purposes we’re going to make it easy to connect.

If you’re going to go into production, please refer to MongoDBs security checklist HERE.

Okay, having said that.

Open up the mongod.conf file using nano:

$ sudo nano /etc/mongod.conf

And uncomment the binding IP by adding an octothorpe at the beginning of the line like so:

uncomment

Save and close the file. ( Ctrl+X -> y -> enter )

Alright, now MongoDB should be ready to be connected to!

4. Try it out and Connect your application

Open the Mongo Command line by typing mongo in your ssh terminal.
And show your DBs and collections
show dbs
show collections

Here’s the getting started tutorial from Mongo that I found helpful:
https://docs.mongodb.com/v2.6/tutorial/getting-started/

And a great way to generate some test data to get familiar with your Databases and collections:
https://docs.mongodb.com/v2.6/tutorial/generate-test-data/
Here’s what it looked like for me!

usingmongo

The connection string for the VM is the IP address and the DB you’d like to write too. To connect to the test database on the is vm the connecion string to use looks something like this:

mongodb://40.83.182.555:27017/test

In the next blog I’ll show you how to connect your Azure Web App to Mongo on this VM!

Caught a Giants game this week!
Caught a Giants game this week!

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!