navigation not working when deployed on server

[sysmat]

Describe the bug

• I'm new to this svelte-navigator, so maybe I'm doing something wrong
• when run on my localhost dev Server(webpack) it's working but when deploy to the server(Apache) navigation is not working(no errors in chrome dev console)
• my index.html has because of api
• my Apache

• To Reproduce

1. App.svelte

<Router>
  <main>
    <Navbar />

    <Route path="/" component={Queries} />
    <Route path="queries" component={Queries} />
    <Route path="statistics" component={Statistics} />
    <Route path="status" component={Status} />
  </main>
</Router>

2. Navbar.svelte

<nav class="navbar navbar-expand-lg navbar-light bg-dark">
  <a href="./" class="navbar-brand" use:link>
    <h3>Analizator</h3>
  </a>
  <a class="nav-link" href="./queries" use:link> Poizvedbe </a>
   <a class="nav-link" href="./statistics" use:link> Telefonija </a>
   <a class="nav-link" href="./status" use:link> Stanje Arnes klicnih centrov</a>
</nav>

3. links on localhost

http://localhost:3000/   -> OK
http://localhost:3000/queries   -> OK
http://localhost:3000/statistics   -> OK
http://localhost:3000/status   -> OK

3. links on server

https://sfinga2.arnes.si/analizator/   -> NOT OK
https://sfinga2.arnes.si/analizator/queries   -> NOT OK
https://sfinga2.arnes.si/analizator/statistics   -> NOT OK
https://sfinga2.arnes.si/analizator/status   -> NOT OK

Expected behavior working as in dev server on localhost

Desktop (please complete the following information):

• OS: windows 10
• Browser chrome Version 90.0.4430.93

Additional context Add any other context about the problem here.

• my SPA is served as war on payara
• on server I have apache virtual host and proxy to maj java web app(serve index.html + bundle.js)
• I have the same concept for this SPA build with angular in it works

Regards, Tomaž

[sysmat]

Even if I try useResolve , the navigation goes to root of host and not on baseUri or context(analizator)

[mefechoel]

Hey there, it looks as though you forgot to specify a base path for your app (see documentation for Router). By default the router assumes that you serve your app from the root path (which is the case in your dev setup "localhost/"). But in your prod system you seem to serve the app from a subdirectory ("https://sfinga2.arnes.si/analizator/"). If you don't specify this, the router cannot find the correct matching route because it thinks the current route should be "/analizator" when it should simply be "/". You can easily fix this by passing baspath="/analizator" to your top level Router. Since you don't want a basepath in your dev environment though you'll need to check what system your currently developing for. Since you're using webpack you might already have a plugin setup so you can check something like process.env.NODE_ENV === 'production'. Using this you can set the basepath to "/analizator" in prod and simply to "/" in dev mode.

[sysmat]

https://example.com/my-site, the basepath should be set to /my-site.

yes I try it but have another error which I can't figure out where it came

<Router basepath="/analizator">
  <main>
    <Navbar />

    <Route path="" component={Queries} />
    <Route path="queries" component={Queries} />
    <Route path="statistics" component={Statistics} />
    <Route path="status" component={Status} />
  </main>
</Router>

• dev tools error:

  
  Uncaught Error: <Router> Invalid state: All locations must begin with the basepath "/analizator", found "/"
  at warning.js:57
  at warning.js:54
  at normalizeLocation (routes.js:264)
  at getInitialLocation (Router.svelte:69)
  at instance (Router.svelte:74)
  at init (index.mjs:1474)
  at new Router (Router.svelte:157)
  at createProxiedComponent (svelte-hooks.js:245)
  at new ProxyComponent (proxy.js:237)
  at new Proxy<Router> (proxy.js:329)

[sysmat]

I'm new to this webpack and svelte, I'm developing in angular where this is much elegantly solved

[sysmat]

@mefechoel thx

I think this in webpack.config.js helped:

devServer: {
        hot: true,
        port: 3000,
        staticOptions: { index: '../src/dev.html' },
        publicPath: '/analizator/',
        proxy: {
            '/api': 'http://localhost:8080/analizator'
        }
    }

[sysmat]

this is not really helped, now I have dev problems:

Error: <Router> Invalid state: All locations must begin with the basepath "/analizator", found "/".

I think I'll go looking for different router

[sysmat]

I think the main problem of this router is that is doing absolute path not relative. Regards, Tomaž

[mefechoel]

Well, as I said, just providing a basepath, will cause problems in dev mode. You need to set the basepath in prod to your subdirectory, and in dev to "/" you could do this like so:

const basepath = process.env.NODE_ENV === 'production'
  ? '/analizator'
  : '/';
// ...
<Router {basepath}>...</Router>

If you don't have access to process.env.NODE_ENV take a look at webpack define plugin. Also, I don't think you need a public path in your dev server config, but I'm not too familiar with webpack.

Use whatever router you like best, but one of the reasons I created this one is because the others I tried did not handle apps with basepaths correctly... In fact, this is one of the very few routers I know of that actually uses relative paths instead of absolute ones... If that's what you're looking for, svelte-navigator will probably be you're best option. If you just need an easy setup and don't care how your urls look and if your page can be easily scraped by search engines you can take a look at hash based routers. They don't need any extra config because the don't rely on your urls pathname, because they fake this behaviour using the urls hash fragmen.

[sysmat]

Thx, i do it by window If i localhost Match. Maybe with env process is more corect. Ok it is relative router paths, i like some features of this router. I'm using angular but looking for smaller bundle. Regards, Tomaž