App.js

Now that the environment has been setup successfully, we need to create a web server configuration file.  Node.js will launch a web server instance based on the configuration we specify.  If you remember from the previous page, we created a task to execute Node.js and specified an argument of app.js.

Follow these steps:

  1. Click once in the gray area BELOW the file list.  This will remove any file/folder selection you currently may have (allowing you to create a file in the top folder).
  2. Hover your mouse over HELLOWORLD and you will see some icons appear.  The first icon is a file with a plus sign.  Click this icon.
  3. Name the file app.js.
  4. In app.js, type the following and save the file (Ctrl+S).

Make sure you include lines 1-3.  These “comment-like” lines are similar to using or import statements that we are accustomed to in Microsoft .NET and they reference the type definitions we previously downloaded.  Without them, JavaScript IntelliSense would not be available.

  • Line 5: Loads the Express library from Node.js
  • Line 6: Instantiates the express web server
  • Line 7:
    • 1st Parameter: Sets the virtual path for your web application
    • 2nd Parameter: Sets the application system path for your web application (basically, stating map the current application path – C:\Projects\HelloWorld – to http://localhost/)
  • Line 8-10: Maps a default path.
    • 1st Parameter: If the requester doesn’t specify a page, then “default.html” is returned.
    • 2nd Parameter: Sets the relative path of the page.   In this case, it’s the current directory (__dirname is a “static” environment variable that holds the current executing path)
  • Line 11: The port on which to listen for incoming web requests
    NOTE: By default, you could type in 80 for the port so that typing into your browser http://localhost/ would be sufficient.  However, if you have IIS running, Node.js will error out because the port is in use.  To minimize current and future conflicts, it is best to pick a port between 8000-65535.  In this case, I will access my HelloWorld web site using the URL http://localhost:45000/.

Default.html

Finally, let’s create our content page.  Create a page named default.html in the home folder.  Then, add the following contents:

Save the file.

Run the Task

Because the task has already been configured previously, we simply need to press Ctrl+Shift+B (for Build).  This will execute our task.  Provided that we don’t get any errors in our Output window, Node.js will have created a background process in Windows.

Open a web browser and go to the URL configured above (in this case, http://localhost:45000/).  Again, provided there are no errors reported in your browser or VSC’s Output window, you should see the contents of your default.html page.

Now, feel free to update your default.html page or add additional pages, libraries, images, etc. to your web application.  You won’t need to restart the task (it’s still running in the background); you’ll just need to refresh your browser to see the changes.

Canceling the Task

Keep in mind that once I start the Node.js server, it is an child task of VSC meaning that, even though I may not see it, Node.js is running in the background.  If I attempt to close VSC, I will receive a dialog alerting me that the task is still running and asking if I wish to cancel the task or stay in VSC.  If I’m in VSC and I want to cancel the task, I’ll need to do so by using either VSC or Windows Task Manager.

To cancel the task in VSC:

  1. Press Ctrl+P
  2. Begin typing: >terminate
  3. As before, when you configured Task Runner, you’ll then see an option to Terminate Running Task
    helloworld-terminate-task
  4. Choose this option
  5. You’ll then see a message in VSC’s Output window informing you that the task has been stopped per your request.

Configure “Terminate Task” Shortcut Key

This step is optional, but it does simplify my life somewhat.  By configuring a shortcut key to terminate a task, I don’t have to keep following the 4 prior steps.

  1. Press Ctrl+P
  2. Begin typing: >shortcuts
  3. You’ll see the option: Preferences: Open Keyboard Shortcuts
  4. Choose this option
  5. A new file is created for you in your .settings folder: keybindings.json.  This is a JSON configuration file for your current VSC project.
  6. VSC will open the default key bindings in the left pane and your new keybindings.json file in the right.
  7. In the pane on the right (your keybindings.json file), type in the following and save the file (Ctrl+S).

Now, while you are inside of VSC (and your Node.js task is running), pressing Ctrl+Alt+X will terminate your Node.js task/process.

NOTE: Additional commands can be found by scrolling to the bottom of the default key bindings file in the left pane.

Like What You See?

Subscribe to receive new posts in your inbox.

Privacy Preference Center