Building an API With Visual Studio Code and Node.js

I gave this presentation at the Austin Microsoft Developer's Meetup on April 20, 2016 - a quick beginner's guide to using Visual Studio Code with Node.js, and how to deploy those Azure web applications to Azure App Services.

Transcript

1. BUILDING AN API WITH VISUAL STUDIO CODE AND NODE.JS Jeff Linwood Austin Microsoft Developer Meetup April 20, 2016 www.jefflinwood.com
2. OVERVIEW •Software we are using •Visual Studio Code – what is it? •Intro to VS Code •Intro to Node.js •Deploying to Azure App Services •Visual Studio Code - Node.js Debugger •Building an API with HAPI
3. SOFTWARE WE ARE USING •Visual Studio Code (http://code.visualstudio.com) •Node.js (https://nodejs.org/en/download/) •Azure Command Line Interface (https://azure.microsoft.com/en- us/documentation/articles/xplat-cli-install/) •Will need to have an Azure account to deploy •Connect your Azure account to the Command Line Interface
4. INTRO TO VISUAL STUDIO CODE •Visual Studio Code vs Visual Studio •Windows, OS X, Linux •Version 1.0 just came out last week! •Open Source - https://github.com/Microsoft/vscode •Many languages •Extensions
5. INTRO TO NODE JS •We’ll be using Node.js today •What is Node.js? •How might we think of development differently using Node instead of other technologies? •Node Package Manager – NPM •https://www.npmjs.com/
6. BUILDING WEB APPS WITH NODE.JS •Many different web frameworks to use •Most common is Express (http://expressjs.com/) – others include Koa and Sails.js •Let’s make a Hello World app using express! •Create an empty directory (and open it in Code) •md hello •cd hello
7. NPM INIT •Setup the project using npm init – accept the defaults EXCEPT make the entry point should be app.js NOT index.js •Azure’s command line tool will rely on app.js or server.js existing to set up iisnode.yml, which Azure App Services uses to connect IIS to your Node.js app
8. ADDING EXPRESS •The npm init directions give you an example of how to add a module, like express: •npm install express –save •See the change in package.json – with the dependencies •Semantic Versioning – major.minor.patch •Caret – newer minor and patch •Tilde – newer patch
9. LET’S WRITE SOME CODE! •Create an app.js file with these contents var express = require('express'); var app = express(); app.get('/', function (req, res) { res.send('Hello World!'); }); app.listen(process.env.port || 3000, function () { console.log('We are listening!'); });
10. NOW LET’S RUN IT! •node index.js •Visit http://localhost:3000/ in your web browser •Ok, so that was pretty basic •Let’s take it to the next level and run this on Azure!
11. SETTING UP AZURE •You’ll need an Azure account (for instance, Pay As You Go) •You need to create an app •You’ll also need to set up git credentials for deployment •https://azure.microsoft.com/en- us/documentation/articles/web-sites-publish- source-control/
12. CREATING AN AZURE SITE •Once you have your git deployment credentials set in Azure •Only enter them once on Windows if you want •git config --global credential.helper wincred •Azure site create --git <MyAppName> •I bet HelloWorld is taken, so be creative J
13. BROWSING YOUR NEW SHINY NODE SITE •Couldn’t be easier with Azure •azure site browse
14. USING THE DEBUGGER IN VS CODE •Click the little Bug on the right hand side •Click Settings •Pick Node.js as the environment •Click the little Green Play Icon! •Up and running with the Debugger •Set a breakpoint in app.js •Open http://localhost:3000/
15. RESTFUL API DESIGN •REST - Representational state transfer •API models a set of resources •Uses native HTTP verbs – GET, POST, PUT, DELETE •Similar to old CRUD model of app development – Create, Retrieve, Update, Destroy •Probably closely linked to your database design, especially if building from scratch •Supported by modern web development frameworks such
16. JSON VS XML •Typically, new web service APIs use JSON to format data •JSON is the Javascript Object Notation, and is a standard for transmitting data •XML is an older format •Not everything supports both JSON and XML •Most developers will prefer JSON support
17. CREATING AN API WITH NODE.JS AND HAPI •Let’s start a new application •Create a directory named api •npm init •We’ll also call the default Javascript file app.js •We’ll use hapi (http://hapijs.com/) instead of express •npm install --save hapi
18. THE CODE FOR THE API – APP.JS •In this Gist: •https://gist.github.com/jefflinwood/df0de3d289 79097f3d85bd0af9d842d5 •Run it – http://localhost:3000/ and http://localhost:3000/meetups •You can also run it in Edge’s F12 Developer Tools to see the headers (application/json)
19. MORE READING •More complicated Express App on Azure •https://azure.microsoft.com/en- us/documentation/articles/app-service-web- nodejs-get-started/
20. MY CONTACT INFO •Email me at jlinwood@gmail.com •Twitter: https://twitter.com/jefflinwood •http://www.jefflinwood.com/ •http://www.biscottilabs.com/