Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Routes are not working under sub-directory website (host)

See original GitHub issue

I am working on an app with a few components and trying to put it on my website under a sub-directory:

main component:

import { Component } from '@stencil/core';
import '@stencil/router';

@Component({
  tag: 'hello-stencil-main',
  styleUrl: 'hello-stencil-main.scss'
})
export class HelloStencilMain {

  render() {
    return (
      <div>
        <stencil-router root='/apps/hellostencil'>
          <stencil-route url='/' component='home' exact={true}>
          </stencil-route>
          <stencil-route url='/hello' component='hello' exact={true}>
          </stencil-route>
      </div>
    );
  }
}

stencil.config.js release config:

const sass = require('@stencil/sass');
exports.config = {
  outputTargets: [
    {
      type: 'www',
      dir: 'www',
      baseUrl: '/',
      buildDir: '',
      resourcesUrl: '/app/',
    },
    {
      type: 'www',
      dir: 'release',
      baseUrl: '/apps/hellostencil/',
      buildDir: '',
      resourcesUrl: '/apps/hellostencil/app/'
    }
  ],
  plugins: [
    sass()
  ]
};
exports.devServer = {
  root: 'www',
  watchGlob: '**/**'
};

Index.html

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello Stencil</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
  <meta name="theme-color" content="#16161d">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta http-equiv="x-ua-compatible" content="IE=Edge" />
  <script src="./app.js"></script>
</head>

<body>
  <hello-stencil-main></hello-stencil-main>
</body>

</html>

package.json dependencies

"dependencies": {
   "@capacitor/cli": "^1.0.0-alpha.35",
   "@capacitor/core": "^1.0.0-alpha.35",
   "@stencil/core": "0.7.24",
   "@stencil/router": "latest",
   "@stencil/sass": "latest",
   "@types/jquery": "^3.3.1",
   "tslib": "^1.9.0"
 },
 "devDependencies": {
   "@stencil/dev-server": "latest",
   "@stencil/utils": "latest",
   "@types/jest": "^21.1.10",
   "jest": "^21.2.1",
   "typescript": "^2.8.3"
 },

After few investigations and failed tries, I figured out how to host my app under a sub-directory by adding ‘root’ property to <stencil-route> and adding baseUrl to the release configs as mentioned above, this makes my home page url works(‘https://myhost/apps/hellostencil’), but the sub page which is under my sub-directory (‘https://myhost/apps/hellostencil/hello’) is not working, the component is not being rendered at all, and the stencil route tag is empty! Also adding a <stencil-route-link url='/hello'></stencil-route-link> to my home page as anchor to go to my hello page did not make any difference.

Please help!

Note: removing ‘root’ tag from stencil-route and testing locally (npm start), everything works perfectly!

Issue Analytics

State:
Created 5 years ago
Reactions:2
Comments:9

Top GitHub Comments

1reaction

sniederbcommented, Oct 20, 2020

This works for me:

stencil.conf.js

baseUrl: '/foobar'

main component

<stencil-router root="/foobar/">
  <stencil-route-switch>
    <stencil-route url="/login" component="demo-login"></stencil-route>
    <stencil-route url="/main" component="demo-main"></stencil-route>
  </stencil-route-switch>
</stencil-router>

and then navigating with this.history.push('./main');

With this I can navigate the app on myhost.com/foobar/login or myhost.com/foobar/main resp.

1reaction

arby50commented, Aug 16, 2018

Similar issue. While investigating it, I copied your router code:

      <div>
        <stencil-router root='/apps/hellostencil'>
          <stencil-route url='/' component='home' exact={true}>
          </stencil-route>
          <stencil-route url='/hello' component='hello' exact={true}>
          </stencil-route>
      </div>

and duplicated the problem. I removed the <div/> tag:

        <stencil-router root='/apps/hellostencil'>
          <stencil-route url='/' component='home' exact={true}>
          </stencil-route>
          <stencil-route url='/hello' component='hello' exact={true}>
          </stencil-route>

I duplicated this after a ‘git clone’ of the PWA toolkit. I installed the @stencil/router, added an import for the @stencil/router to my-app.tsx and changed all <ion-router> and <ion-route> to <stencil-router> and <stencil-route>:

      <ion-app>
        <stencil-router>
          <stencil-route url="/" component="app-home" />
          <stencil-route url="/profile/:name" component="app-profile" />
        </stencil-router>
      </ion-app>

and got a blank page.

Following your code above:

      <div>
        <stencil-router>
          <stencil-route url="/" component="app-home" />
          <stencil-route url="/profile/:name" component="app-profile" />
        </stencil-router>
      </div>

I got a blank page.

Removing the <div/> tag allowed the app to display:

  render() {
    return (
      <stencil-router>
        <stencil-route url="/" component="app-home" />
        <stencil-route url="/profile/:name" component="app-profile" />
      </stencil-router>
    );
  }

The app now displays. However, there still is no app navigation. I added a stencil-route-link in addition to the existing ion-button, both attempting to go to /profile/ionic. Neither worked.