Using stencil-router on gh-pages

Question

I'm trying to deploy a stencil SPA on gh-pages, but I can't get the router to cooperate. I am setting root on stencil-router, but it's not loading any of my routes. It's working perfectly fine when I run localhost.

https://positlabs.github.io/lightpaintlive-www/

Note that gh-pages uses the repo name as the path, so it's not at the host root when I deploy.

import { Host, Component, h, State } from '@stencil/core';

@Component({
  tag: 'app-root',
  styleUrl: 'app-root.css',
  shadow: false,
})
export class AppRoot {
  @State() base: string
  componentWillLoad(){
    this.base = document.querySelector('base').getAttribute('href')
    console.log('router root', this.base)
  }
  render() {
    return (
      <Host>
        <stencil-router root={this.base}>
          <stencil-route-switch scrollTopOffset={0}>
            <stencil-route url="/" component="lpl-landing" exact={true} />
            <stencil-route url="/privacy" component="lpl-privacy" />
          </stencil-route-switch>
        </stencil-router>
      </Host>
    );
  }
}

Full source code is here: https://github.com/positlabs/lightpaintlive-www

Answer 1

I realized that I was using the full url when I needed to be using just the path.

https://positlabs.github.io/lightpaintlive-www/ vs /lightpaintlive-www/

My code ended up looking like this:

this.base = document.querySelector('base').getAttribute('href').match('github') ? '/lightpaintlive-www/' : '/'

🦆