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?

Answer 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:)