Stencil: baseUrl config doesn't work correctly

[stefanhuber]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

Setting a baseUrl as described in the config example below results in a blank screen and manifest.json has a http 404 error.

Expected behavior:

Deploying an app which was build with npm run build should be deployable to subdirectories on a webserver (e.g. github.io).

Steps to reproduce:

The project simon-game (https://github.com/stefanhuber/simon-game) is built inside the docs folder on github and thus available on github.io (https://stefanhuber.github.io/simon-game/). The project works normally with npm start and without baseUrl configuration, however doesn't work when deployed on a subdirectory on a webserver.

Related code:

exports.config = {
  outputTargets: [
    {
      type: 'www' ,
      dir: 'docs' ,
      baseUrl : '/simon-game'
    }
  ]
};

exports.devServer = {
  root: 'docs',
  watchGlob: '**/**'
};

Other information:

[Solavon]

Any updates regarding this issue? It's blocking me as well.
Thank you.

[MoAsmar]

+1

[Solavon]

I just noticed that you forgot to set the resourcesUrl properly.

Also my issue was mainly with the router, but it all worked out once i set the root property in the stencil-router to match my baseUrl.

[mwkz]

We faced same issue with some components that we are rewriting using Stencil. The router is very limited, after checking the source code we found the root property which is not documented. It seems this property can be used instead of baseUrl! Any plan to make the router code stable and allow Stencil components to be usable when integrated within regular web apps.

[milanbella]

Was this issue resolved?. Can someone confirm that stencils can run from behind reverse proxy?

It's not working for me. I've changed all absolute urls to relative in index.html, defined baseUrl and resourcesUrl to '/m3' and despite that I am getting 404 for app.core.js:

Request URL: https://www.foo.com/m3/build/app.css
Request Method: GET
Status Code: 200 OK

Request URL: https://www.foo.com/m3/build/app.js
Request Method: GET
Status Code: 200 OK

Request URL: https://www.foo.com/m3/app.core.js
Request Method: GET
Status Code: 404 Not Found

exports.config = {
outputTargets: [
{
type: 'www',
serviceWorker: {
swSrc: 'src/sw.js'
},
baseUrl: '/m3',
resourcesUrl: '/m3'
}
],
globalStyle: 'src/global/app.css',
plugins: [
sass()
]
};

[raghubala]

any update on this?

[SidMorad]

This may help, for me this is working at the moment(stencil 0.15.2 | ionic 4.0.0-beta.15 ) in development and production with base context path /xyz.

diff --git a/src/components/app-root/app-root.tsx b/src/components/app-root/app-root.tsx
index 36644b5..12a3d21 100644
--- a/src/components/app-root/app-root.tsx
+++ b/src/components/app-root/app-root.tsx
@@ -32,7 +32,7 @@ export class AppRoot {
   render() {
     return (
       <ion-app>
-        <ion-router useHash={false}>
+        <ion-router useHash={false} root="/xyz/">
           <ion-route url="/" component="app-home" />
           <ion-route url="/publish" component="publish-list" />
           <ion-route url="/publish/new" component="publish-new" />
diff --git a/src/index.html b/src/index.html
index a32b540..009ed39 100644
--- a/src/index.html
+++ b/src/index.html
@@ -18,12 +18,12 @@

   <meta http-equiv="x-ua-compatible" content="IE=Edge">

-  <link href="/build/app.css" rel="stylesheet">
-  <script src="/build/app.js"></script>
+  <link href="/xyz/build/app.css" rel="stylesheet">
+  <script src="/xyz/build/app.js"></script>

-  <link rel="apple-touch-icon" href="/assets/icon/icon.png">
-  <link rel="icon" type="image/x-icon" href="/assets/icon/favicon.ico">
-  <link rel="manifest" href="/manifest.json">
+  <link rel="apple-touch-icon" href="/xyz/assets/icon/icon.png">
+  <link rel="icon" type="image/x-icon" href="/xyz/assets/icon/favicon.ico">
+  <link rel="manifest" href="/xyz/manifest.json">
 </head>

 <body>
diff --git a/stencil.config.ts b/stencil.config.ts
index 48707ee..9326a39 100644
--- a/stencil.config.ts
+++ b/stencil.config.ts
@@ -9,7 +9,8 @@ export const config: Config = {
       serviceWorker: {
         swSrc: 'src/sw.js'
       },
-      baseUrl: '/xyz'
+      baseUrl: '/xyz/',
+      resourcesUrl: '/xyz/build/app/'
     }
   ],
   globalScript: 'src/global/app.ts',

Note: I did deploy this app behind nginx reverse proxy with following config

  location /xyz/ {
    autoindex off;
    index index.html;
    root /opt;
  }

and I do access the application with following format
https://mydomain.com/xyz/
Note the last slash, which without it I do receive 404 http error code.

Another issue I notice about is second level links doesn't work with above Nginx config, for instance /xyz/publish will result in 404.

I also will be happy to see proper solution for hosting PWA apps in a different context path rather than default / path.

Thank you.

[stefanhuber]

Unfortunately, I think this problem still exists with 0.18.

With the following steps I was able to resolve the issue:

• added the root property for the stencil-router: <stencil-router root="/simon-game/">
• removed the starting slashes inside the index.html, e.g. instead of /build/app.css build/app.css was used

Stencil config looks like this:

{
      type: 'www',
      baseUrl: '/simon-game',
      dir: 'docs',
}

The result can be seen here:

• https://github.com/stefanhuber/simon-game
• https://stefanhuber.github.io/simon-game/

[mxmason]

Sorry to revive an old thread, but I think I've just encountered this issue as well. Like @stefanhuber, I have to manually remove the leading / from references to /build/ in index.html. Replacing /build with ./build also works, so maybe the solution is to use relative instead of absolute paths?

[josros]

I am facing the same issue with "@stencil/core": "^1.1.6". Internally I am using further webcomponents. For those components the replacing

/build with ./build

workaround doesn't work. The webapp loads without showing those components.

[BrunoUY]

It looks like it's not taking into consideration the baseUrl property on stencil.config.ts, because the index.html on ./www always compile with

src="/build/app.esm.js"

without taking into consideration that I have set the baseUrl property as

outputTargets: [ {
type: 'www',
serviceWorker: null,
baseUrl: 'http://....info/pwa/',
} ],

I have set the baseUrl as docs specification: https://stenciljs.com/docs/www

Also, another thing I have noted is that when I change the namespace ( it ask me to change the default "App" namespace when I set the { type: 'dist' } property ), I see that the index.html file continue to call the
app.js
app.esm.js
app.css

but those files don't exist anymore, instead of with the new namespace the files generated gets the name of
new_namespace.js
new_namespace.esm.js
new_namespace.css

[RS-Sautter]

Why was this closed? I'm still running into this issue...
Setting baseUrl to "./" seems to not be respected properly when loading scripts.
EDIT: Solved for me: If you provide relative paths in src/index.html they will be preserved for the www folder.

[liho98]

Same issue here, why close this issue???
the base url option is not working with its purpose....

[gokatz]

I'm also facing this issue with stencil core 1.17.3

[DanielHabenicht]

I can confirm that this problem still persists on stencil version 2.3.0