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.
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('/');
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('/');