Visual Studio Code and local web server

visual studio code

It is the start of a New Year and you have decided to try Visual Studio Code, good resolution!

One of the things you will find the most surprising, is that unlike its big brother Visual Studio which has IIS Express, VS Code does not come with a built-in web server…

If you are building a client side SPA, such as an Angular app, it is crucial to develop and test in the context of a web server (http://localhost:xxx/…).

So nothing built-in so far, but no worries, there are at least 1 thousand way to setup a local web server.

I chose to use the following procedure, which is quite simple yet powerful. What works for me might not suit your need, your mileage might vary.

Please note: this is for your Development Environment only, not Production!

The following procedure is valid for MAC or PC.

1. Install Node.js

If not already installed, get it here: https://docs.npmjs.com/getting-started/installing-node

It comes with npm (the package manager for acquiring and managing your development libraries)

2. Create a new folder for your project

Somewhere in your drive, create a new folder for your web app.

3. Add a package.json file to the project folder

Then copy/paste the following text:

{
   "name": "Demo",
   "version": "1.0.0",
   "description": "demo project.",
   "scripts": {
     "lite": "lite-server --port 10001",
     "start": "npm run lite"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "lite-server": "^1.3.1"
   }
}

4. Install the web server

In a terminal window (command prompt in Windows) opened on your project folder, run this command:

npm install

This will install lite-server (defined in package.json), a static server that loads index.html in your default browser and auto refreshes it when application files change.

5. Start the local web server!

(Assuming you have an index.html file in your project folder).

In the same terminal window (command prompt in Windows) run this command:

npm start

Wait a second and index.html is loaded and displayed in your default browser served by your local web server!

lite-server is watching your files and refreshes the page as soon as you make changes to any html, js or css files.

And if you have VS Code configured to auto save (menu File / Auto Save), you see changes in the browser as you type!

Notes:

  • Do not close the command line prompt until you’re done coding in your app for the day
  • It opens on http://localhost:10001 but you can change the port by editing the package.json file.

That’s it. Now before any coding session just type npm start and you are good to go!

No Comments