visual-studio-codenpm-live-server

How to locally test sub routes for a basic Javascript router in VS Code and the extension Live Server?


I have an AWS Cloudfront function that redirects urls to several different html pages hosted in S3 along the lines of this:

function handler(event) {
    var request = event.request;
    var uri = request.uri;

    if (uri.split('/')[1] == '') {
        request.uri = '/index.html';
    } else if (uri.split('/')[1] == 'contact'){
        request.uri = '/contact.html';
    } else if (uri.split('/')[1] == 'blog'){
        request.uri = '/blog.html';
    } else if (!uri.includes('.')) {
        request.uri = '/index.html';
    }
    return request;
}

This works fine but I want to build the site locally using VS Code and test using the Live Server extension with my 3 html files in the root directory but have sub routes point to them.

  1. http://127.0.0.1:5500/index.html
  2. http://127.0.0.1:5500/blog/index.html
  3. http://127.0.0.1:5500/contact/index.html

These are the sub routes:

www.example.com
www.example.com/index.html
route to: /index.html

www.example.com/foo
www.example.com/foo/123
www.example.com/foo/abc
www.example.com/foo/def/123
route to: /foo/index.html

www.example.com/bar
www.example.com/bar/123
www.example.com/bar/abc
www.example.com/bar/def/123
route to: /bar/index.html

Effectively I want to be able to use VS Code similar to this to read the pathArray values so I can change page content locally based on the pathname. Basically blog/hello would show the blog page hello whereas /blog would show the blog list:

var pathArray = window.location.pathname.split('/');

Solution

  • I found a solution in a GitHub ticket here.

    Effectively you need to amend your VS Code user settings.json, on Linux mine was here:

    Linux $HOME/.config/Code/User/settings.json
    

    To define your sub routes using liveServer.settings.mount to point to specific HTML pages like this:

    {
        "liveServer.settings.donotVerifyTags": true,
        "liveServer.settings.donotShowInfoMsg": true,
        "liveServer.settings.mount": [
            ["/ ", "./index.html"],
            ["/foo", "./foo.html"],
            ["/bar", "./bar.html"],
        ]
    }
    

    http://localhost:5500/foo/abc would now correctly route to /foo and abc is available as pathArray[2] using var pathArray = window.location.pathname.split('/');