Relative index.html

[Bmooij]

I don't know if the feature is available, but I would like to use the app-router not from the root of my domain.

Ex. www.mydomain.com/sub/folder/index.html as root

When I use it now, it automatically search for the index.html in the root (www.mydomain.com/index.html)

[erikringsmuth]

You should be able to put the router anywhere. The tricky part is getting all of the URLs relative to the current path. For example, the app-router gh-pages branch uses relative URLs everywhere.

Maybe it would be useful to have an option like baseUrl="/sub/folder". Is that the type of thing you're looking for?

[erikringsmuth]

Could you give an example of your index.html and 1 or 2 routes you're loading?

[RPSource]

Actually that would be a good attribute baseUrl would be nice. I am currently testing this on a sub folder but indeed getting all the URLs is tricky.

I keep bumping into invisible walls as to why they won't work.

https://content.redactiepartners.nl/dev/approuter/

it's just the app-router-demo to test and see how to make it work, also by looking at the app-router gh-pages branch

[erikringsmuth]

Yeah, currently you'd have to do something like this.

<app-router>
  <app-route path="/dev/approuter/" import="pages/home-page.html"></app-route>
  <app-route path="/dev/approuter/demo/:pathArg1" import="pages/demo-page.html"></app-route>
  <app-route path="/dev/approuter/notes" import="pages/notes-page.html"></app-route>
  <app-route path="*" import="pages/not-found-page.html"></app-route>
</app-router>

Where the path always matches the full path and the import is relative to the current document.

I'll try to figure out what I'd need to change to make a baseUrl or basePath work.

[erikringsmuth]

I just added a new feature in version 2.4.0 that will solve this issue. Now you can use globstars ** to match zero-to-many path segments, and you can use relative routes to ignore the path prefix.

For example:

<app-router>
  <app-route path="approuter" import="pages/home-page.html"></app-route>
  <app-route path="approuter/demo/:pathArg1" import="pages/demo-page.html"></app-route>
  <app-route path="approuter/notes" import="pages/notes-page.html"></app-route>
  <app-route path="*" import="pages/not-found-page.html"></app-route>
</app-router>

which is the same as

<app-router>
  <app-route path="/**/approuter" import="pages/home-page.html"></app-route>
  <app-route path="/**/approuter/demo/:pathArg1" import="pages/demo-page.html"></app-route>
  <app-route path="/**/approuter/notes" import="pages/notes-page.html"></app-route>
  <app-route path="*" import="pages/not-found-page.html"></app-route>
</app-router>

https://erikringsmuth.github.io/app-router/#/api#path