Author: 
Debugging Node.js Express Web Application on MAC using Visual Studio Code

Debugging Node.js Express Web Application on MAC using Visual Studio Code

Every Apple and Linux guy always wishes to have an IDE like Visual Studio on their development machine. The traditional Microsoft ideology is changing and Satya Nadella, the new CEO of Microsoft has a brand now slogan “Microsoft loves Open Source!”

Microsoft is expanding its coverage and support for other operating systems as well. It also includes .NET Core and open sourcing of Core .NET framework. Now you can build .NET applications on MAC and Linux. With this capability Microsoft now also assists Open Source developers by providing its light weight IDE called Visual Studio Code which runs on MAC and Linux as well. It’s free and you can debug your favorite open source applications using Visual Studio Code.

Visual Studio Edition for Windows has huge plugin support, but what about Visual Studio Code? Visual Studio Code has its own marketplace from where you can download different plugins available with complete intellisense resulting in an amazing debugging experience.

Just name a language and you would find its plugin from the market place. Option for Plugins and extensions come with Visual Studio Code’s second update so don’t forget to download its update before you start coding.

Need a proof that VS Code is Awesome?

Good programmers often go by the motto “Impress me with it before you praise about something” so it is imperative for me as a writer to support my claims on VS Code’s awesomeness with practical examples. Let’s develop simple Node.js Express web application on Mac and debug it using Visual Studio Code.

Pre Requisites

Before we start creating a Node.js Express web application, here are some pre-requisites that need be met:

  • Node.Js Environment Set up
  • Express Set up on Machine
  • Express- Generator Installed
  • Latest Copy of Visual Studio Code

Once these requirements are met, we can start developing right away!

Creating a New Project using Express-Generator

Express Generator is a package that you need to download using shell command in order to generate Express Web Project. You can create simple Express Web Application is few seconds using it.

By opening a terminal, we can write few commands into the terminal to create Node.js Express Web Application.

Make sure that you are on correct path and know exactly where you want to create the folder containing Express Application files. For this example, it’s my desktop.

Use Express- Generator’s command to create express web application project. It’s really simple.

Express <Name of your Application>

Rest of the work would be managed by shell itself; it would generate all files required for Express Web Application.

Installing Dependencies

Now if you go to your desktop, you would notice that a folder is created with same name that you provided in command. But it won’t work until you download its dependencies.

To download the dependencies, you just need to enter a simple command after changing your current directory to the folder.

Here I have changed the directory to MyNewExpressWebApp

Cd MyNewExpressWebApp

Now simply enter npm install to install all dependencies and like with the previous commands, rest of the work would be managed by shell itself.

Once you have downloaded all the dependencies, if you are able to see the screen shown in the image above, it would mean that all dependencies and packages have been added to your project. This in turn means now it’s time to move to Visual Studio Code.

Running Visual Studio Code

Press command + space and you should be prompted to write something on spotlight on MAC. You just need to enter Visual Studio Code and the VS Code would run.

Now, click on Visual Studio Code and Run it.

The Visual Studio Code should now be running on your MAC. Standard VS Code features such as different tabs, Solution explorer, Search, Git and debugging should now be available to you. Before you start anything you got to add the folder in your solution explorer. Click on the Solution Explorer and you would find a button, “Add folder”. Just click on that.

Now you need to select the folder of Node.js Web Application that we created earlier. Once you do that you would be able to see all file structures of your Express Web Application.

Voila! You are now able to view all files of node.js based Express Web Application. Your application is ready for debugging, so let’s get on with it!

Debugging Express Web Applications using VS CODE

The most important part of developer’s routine is debugging apps. So lets mark a breakpoint in order to debug our application. You need to go to the debug menu then in order to start debugging. Good news is that Visual Studio Code supports debugging Node.js application. VS Code provides all information required during debugging such as Variables, Watch windows, and callbacks with information related to breakpoints.

Once that’s done it’s time to hit debug. But before you start debugging make sure that you are running express server. To do that, you need to switch to command line and start the server by running npm start command. Once you have done that, you are ready to go. Just press play button in VS Code debugging section and you should be able to start debugging. VS Code would automatically attach debugger and that would let you debug your express web app.

Right about now you should be able to see the breakpoint hit and you should have all the information that you may require while debugging. You can peek In, Step In, and Step Out.

In the image above, you are able to see that the express server is running on port: 3000 and requests are being made.

Here you can see the debugger that has been attached by VS Code.

So basically, your Express Web Application is up and running, and you are using Visual Studio Code to debug it. Complete intellisense is available for JavaScript and if you need intellisense for other languages, you just need to download the plugin and you would have a complete experience which includes intellisens, code snippets, and multi-cursor experience.

Summary

Visual Studio is a cross platform, lightweight IDE for application development which runs on both Mac and Linux. Debugging experience is really amazing and now with its latest update, you can install a number of extensions for your favorite open source language.

Categories: 
Saad Mahmood's picture
Software Engineer at Systems Limited, Microsoft’s MVP for Windows Development, Microsoft Community Contributor and Community Speaker. 2+ years of experience with Modern Windows application development.

Disclaimer: The views expressed here are solely those of the author in his private capacity and do not in any way represent the views of Systems Limited, or any other entity related to Systems Limited.

Add new comment