Quick! We only have a few minutes. You want to get a basic Node/Express website deployed on Azure. I'm here to walk you through it.
Note: This tutorial assumes you're using either a Mac or Linux machine.
Step 1: Sign up for Azure
I won't go too in-depth on this step. If you don't already have an Azure account, go sign up for their free trial to get started.
Don't worry. It'll be worth it when you get your SWEET website online.
Step 2: Make sure node, npm, and git are installed on your computer
You can check by running npm --version, node --version, and git --version in a terminal. If you get back a version number for each, you're good to go.
If they aren't installed, you'll need to go do that now.
Step 3: Install the azure command line tool
Open a terminal and type sudo npm install -g azure-cli
Note: Depending on how you installed npm, you may or may not need the sudo part.
Step 4: Create an empty folder on your computer
If you like, you can just type these commands into the terminal:
cd ~
mkdir mySweetWebsite
Step 5: Add a deployment script to your empty folder
In a terminal, navigate to your new folder and type azure site deploymentscript --node
You can just type this into your terminal:
cd ~/mySweetWebsite
azure site deploymentscript --node
Step 6: Create a basic html file in a sub-folder called "public"
You can just type this into your terminal:
cd ~/mySweetWebsite
mkdir public
cd public
echo "<html><head></head><body>Welcome to my sweet website</body></html>" > index.html
Step 7: Create a basic Node/Express server
Almost there! Now add a file called server.js into your folder (not in the public directory)
To get the file into your folder, you can type this into your terminal:
cd ~/mySweetWebsite
touch server.js
Now, open server.js (it should be sitting in your mySweetWebsite folder) in your favorite text editor and paste in the following:
var express = require('express');
var app = express();
//Specify a port
var port = process.env.port || 8080;
//Serve up files in public folder
app.use('/', express.static(__dirname + '/public'));
//Start up the website
app.listen(port);
console.log('Listening on port: ', port);
Now server.js is ready to display any file in your mySweetWebsite/public folder any time someone goes to your site.
Step 8: Initialize npm in your folder
So close! Now we just need to install some required packages to our folder.
Type npm init into your terminal (you should still be in the mySweetWebsite folder). It will prompt you with a bunch of questions. Just press ENTER a bunch of times to use the default answers (they don't matter right now).
Once that completes, you should see a file called package.json in your mySweetWebsite folder.
Step 9: Add the Express npm package to your folder
In a terminal:
cd ~/mySweetWebsite
npm install --save express
Step 10: Test that everything is working
In a terminal:
cd ~/mySweetWebsite
node server.js
This should boot up your server locally (where only you can see it). Open up a browser and go to the address http://localhost:8080.
If everything is working, you should see the following message in your browser:
Welcome to my sweet website
Once you've verified that it looks ok, you can go back to your terminal and use Control + C to stop the local server again.
Step 11: Commit everything to git
In a terminal:
cd ~/mySweetWebsite
git init
echo "node_modules/" > .gitignore
git add .
git commit -m "Made a sweet website"
Step 12: Log in to Azure
This is it! Sign in to your Azure account here.
Step 13: Create your new website
Once you're logged in, go to "Websites" (near the top of the vertical navigation bar on the left)
After clicking on "Websites", click the "NEW" button in the bottom left of the page.
Go to Compute -> Web Site -> Custom Create.
You'll be prompted to enter your site's URL: enter whatever you want here! (Let's assume you entered
mySweetWebsitefor the URL).Check the
Publish from source controlbox, then go to the next page.
Step 14: Select deployment type
- Click on "Local Git repository"
- Click through the dialog boxes.
Step 15: Deploy your new website!
- Go back to the dashboard for your website.
- Click on "Deployments" in the top menu.
- Follow Step 3 in the tutorial that pops up.
- That's it--your deploy should work with no problems!