I am trying to learn how a small routing library for javascript apps works - page.js So I made one very tiny app for my own learning purposes but for some reason i can't make it work properly. The app is really as simple as it gets - one folder named test-routing with one file and one folder in it - index.html and src; the src folder has also one file - app.js and another folder- views, with 3 files in it - home.js, page1.js and page2.js

The html file has empty body tag and in the head tag I wrote this:

<script src="./src/app.js" type="module"></script>

In the app.js there is this:

import page from '../node_modules/page/page.mjs';
import { home } from './views/home.js';
import { page1 } from './views/page1.js';
import { page2 } from './views/page2.js'; 
page('/',home); 
page('/first',page1);
page('/second/:id',page2);
page.start();

Each of the three files in the views folder has one line of code:

home.js
export function home(){ console.log('HOME PAGE'); }

page1.js
export function page1(){ console.log('PAGE ONE'); }

page2.js
export function page2(context, next){ console.log('PAGE TWO', context.params.id); }

Together with page.js I also installed locally live-server. I ran it and it started working properly on port 8080.

My expectations were that when I go to http://localhost:8080 I would find 'HOME PAGE' in the console and that was indeed the case.

But when I tried with http://localhost:8080/first and http://localhost:8080/second/2, I received in both cases 404 (Not Found) in the console instead of 'PAGE ONE' and 'PAGE TWO 2' and it was also printed in the web page itself 'Cannot GET /first' and 'Cannot GET /second/2' respectively.

Can anyone tell me where I went wrong, please?

Thank you very much in advance!