$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Jeff Linwood

Other Decks in Programming

Transcript

  1. BUILDING AN API WITH VISUAL
    STUDIO CODE AND NODE.JS
    Jeff Linwood
    Austin Microsoft Developer
    Meetup
    April 20, 2016
    www.jefflinwood.com

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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/

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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!');
    });

    View Slide

  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!

    View Slide

  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/

    View Slide

  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
    •I bet HelloWorld is taken, so be creative J

    View Slide

  13. BROWSING YOUR NEW SHINY NODE SITE
    •Couldn’t be easier with Azure
    •azure site browse

    View Slide

  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/

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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)

    View Slide

  19. MORE READING
    •More complicated Express App on Azure
    •https://azure.microsoft.com/en-
    us/documentation/articles/app-service-web-
    nodejs-get-started/

    View Slide

  20. MY CONTACT INFO
    •Email me at [email protected]
    •Twitter: https://twitter.com/jefflinwood
    •http://www.jefflinwood.com/
    •http://www.biscottilabs.com/

    View Slide