Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building an API With Visual Studio Code and Node.js

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.

Jeff Linwood

April 20, 2016

More Decks by Jeff Linwood

Other Decks in Programming



    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. 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/
  14. 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
  15. 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

    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
  17. 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)