How do you create basic content to run on localhost with Visual Studio Code?

Question

So I am noob with most web hosting technologies so this is probably a very basic question. I know a decent amount about coding in general and how the CSS, Javascript and HTML work together but am lost with the concept of hosting/running something and attaching to it, versus just having a browser open with the file up(file:///C:/Test/index.html). I know you can use a tasks.json file that can jump to your favorite browser and open a page up in it: How to view my HTML code in browser with Visual Studio Code?. However that is not creating a running process on localhost to attach to.

I have been trying to look at the Visual Studio Code tutorials here: https://code.visualstudio.com/docs/editor/debugging. But they seem to be thinking I have an ability to make a process run on the localhost and attach to it, when I don't.

I downloaded an extension for the debugger for Chrome and my launch.json now looks like this:

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000",
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "port": 9222,
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    }
]
}

I have tried to change this based on tutorials to launch content but it does not work as there tutorial specifies they are doing it with node.js as an example and was curious if you could do just a basic one.

How do I host code for just plain jane html, javascript, and css with Visual Studio Code? I want to just start testing a bit of javascript over and over with no NPM, Gulp, or other platforms. Can I just hijack this file or another to get it up and running in IIS or some other hosting platform? Or does it not matter? I was doing a tutorial for Angular 2 with NPM and with npm you just do a console command of 'npm start' in your location and then, bam it does it all for you and reserves a port on local host and does it all(http://localhost:3000 now shows my content). Can I do that with some process in VS Code or some command I can create?

Solution 1

You will need some kind of web server. The angular 2 quickstart guide uses the lite-server. This is a small node based web server. You can just install it with npm.

npm init

npm install lite-server --save-dev

Than in your package.json add this to scripts

"start": "lite-server"

Make sure you have an index.html file within this folder and than just run

npm start

And your webserver starts and displays your page in the browser.

---

You can also create your own web server and then attach the debugger to that but this does involve using node or some other tools.

an easy way to go is create a server.js file with a simple express server.

Initialize npm: npm init

Install express with npm: npm install express --save

Than create a server.js file:

var express = require('express');
var app = express();

app.listen(3000, function() {
    console.log('Listening on port 3000');
});

//Change the './' to point to the root of your angular app
app.use(express.static(path.resolve('./')));

//Send everything to your index.html page
app.get('/*', function(req, res) {
  res.sendFile(path.resolve('./index.html'));
 });

Now in your launch.json add the right configuration. For example:

 {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/index.js",
        "stopOnEntry": false,
        "args": [],
        "cwd": "${workspaceRoot}",
        "preLaunchTask": null,
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "console": "internalConsole",
        "sourceMaps": false,
        "outDir": null
    },

If you start the visual studio code debugger your webpage will be served from localhost:3000

Hope this is what you looking for:)

Solution 2

I use a node package called reload for this purpose. The good thing about this is it automatically refreshes on file changes and you do not need any configuration files. So serving up simple static html content is easy.

First you need to install reload:

npm install [-g] [--save-dev] reload

Then cd into a folder with index.html to serve the index file.

reload -b

Comments

[djangojazz]

Unfortunately this assumes I want to use Node.js and I was just curious about creating content to localhost for an existing instance of either IIS or something else for just HTML, javascript and css. By the way I do really dig Node.js and use it for lite server already for another project. I was just curious if you could have some type of launch config or tasks config to publish directly. Maybe I cannot and in which case I could initialize node for this project. I was hoping I could do it without though.

[djangojazz]

It is a good idea though and I may just do it. However I think in the package json you need this: "scripts": { "start": "lite-server" }, not "start": "lite-server".

[BarryCap]

Could you please explain a little more how to use this? I can’t find a way to make it work.