Prefix and public subpath gives 404 #130

jobcespedes · 2022-02-23T22:32:19Z

I am trying to serve a spa from subpath app/. However it is giving 404 errors when https://localhost:5000/app/

The reason for it, its to serve another web site from root (https://example.com/) and this app in app/ (https://example.com/app/), but from a different server

Reproduce

From a base setup, the following steps were followed:

Add app prefix to the app: Ex: <Router {routes} options={ {prefix: 'app'} } />
Move public/ content to public/app.
Change path references in public/app/index.html to include '/app'. Example: src="/build/bundle.js" to src="/app/build/bundle.js"

More details

Step 2

Before step 2, public/ looked like:

public/
├── build
│   ├── bundle.css
│   ├── bundle.js
│   └── bundle.js.map
├── config.js
├── favicon.ico
├── global.css
├── index.html
└── static
    └── fonts

Now it looks like:

public/
└── app
    ├── build
    │   ├── bundle.css
    │   ├── bundle.js
    │   └── bundle.js.map
    ├── config.js
    ├── favicon.ico
    ├── global.css
    ├── index.html
    └── static
        └── fonts

Step 3

index.html content is now:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />

		<title>Kio web</title>

		<link rel="icon" type="image/png" href="/app/favicon.ico" />
		<link rel="stylesheet" href="/app/global.css" />
		<link rel="stylesheet" href="/app/build/bundle.css" />

		<script defer src="/app/config.js"></script>
		<script
			src="https://cdn.socket.io/4.4.1/socket.io.min.js"
			integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H"
			crossorigin="anonymous"
		></script>
		<script defer src="/app/build/bundle.js"></script>
	</head>

	<body></body>
</html>

Expected result

https://localhost:5000/app/ loads app index route

Actual result

https://localhost:5000/app/ redirects to https://localhost:5000/app/404

The text was updated successfully, but these errors were encountered:

jorgegorka · 2022-02-24T08:11:48Z

Hello @jobcespedes:

Can you, please, post the contents of the routes file?

jobcespedes · 2022-02-24T12:16:24Z

Hi Jorge,

Here it is route.js content:

import { get } from 'svelte/store'
import { isAuthenticated } from '$lib/storages/authStorages'
import Index from '$views/Index.svelte'
import Login from '$views/Login.svelte'
import SSO from '$views/SSO.svelte'
import SignUp from '$views/SignUp.svelte'
import Sites from '$views/sites/Index.svelte'
import SiteDetail from '$views/sites/Detail.svelte'
import CreateSite from '$views/create-site/CreateSite.svelte'
import SiteLayout from '$views/sites/_layout.svelte'
import IndexLayout from '$views/_layout.svelte'
import NotFound from '$views/NotFound.svelte'

const isAuth = () => get(isAuthenticated)

const defaultGuard = { guard: isAuth, redirect: '/login' }

const routes = [
	{
		name: '/',
		component: Index,
		layout: IndexLayout,
		onlyIf: defaultGuard
	},
	{
		name: '/login',
		component: Login
	},
	{
		name: '/sso',
		component: SSO
	},
	{
		name: '/sign-up',
		component: SignUp
	},
	{
		name: '/sites',
		component: Sites,
		layout: SiteLayout,
		onlyIf: defaultGuard
	},
	{
		name: '/sites/:id',
		component: SiteDetail,
		layout: SiteLayout,
		onlyIf: defaultGuard
	},
	{
		name: '/create-site',
		component: CreateSite,
		onlyIf: defaultGuard
	},
	{
		name: '404',
		path: '404',
		component: NotFound
	}
]

export { routes }

jobcespedes · 2022-02-25T19:47:18Z

Hello,
Changing something related to sirv in package.json partially help:

diff --git a/package.json b/package.json
index 2a26324..23934ea 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
        "scripts": {
                "build": "rollup -c",
                "dev": "rollup -c -w",
-               "start": "sirv public -s",
+               "start": "sirv public -s app/index.html",
                "lint": "npm run format && eslint --ignore-path .gitignore .",
                "format": "prettier --write --plugin-search-dir=. .",
                "pretty": "npx pretty-quick --write \"{,!(node_modules|public)/**/}*.{js,svelte}\""

However, one issue remains (it could be some config or route missing on our part). Using http://localhost:5000 works. It is redirected http://localhost:5000/app/ automatically. However, using http://localhost:5000/app/ directly in the url bar, does not work. It gives http://localhost:5000/app/404

jobcespedes · 2022-02-25T21:58:47Z

I found that using http://localhost:5000/app/ directly in the url, looks for a pathname '/app'. So we add one route with than name, redirecting to "/" and now it works. I do not know if it qualified as a bug or just some route missing.

~~For completion of this issue, I am appending the routes.js with the fix:~~

import { get } from 'svelte/store'
import { isAuthenticated } from '$lib/storages/authStorages'
import Index from '$views/Index.svelte'
import Login from '$views/Login.svelte'
import SSO from '$views/SSO.svelte'
import SignUp from '$views/SignUp.svelte'
import Sites from '$views/sites/Index.svelte'
import SiteDetail from '$views/sites/Detail.svelte'
import CreateSite from '$views/create-site/CreateSite.svelte'
import SiteLayout from '$views/sites/_layout.svelte'
import IndexLayout from '$views/_layout.svelte'
import NotFound from '$views/NotFound.svelte'

const isAuth = () => get(isAuthenticated)

const defaultGuard = { guard: isAuth, redirect: '/login' }

const routes = [
	{
		name: '/',
		redirectTo: '/app'
	},
	{
		name: '/app',
		component: Index,
		layout: IndexLayout,
		onlyIf: defaultGuard
	},
	{
		name: '/login',
		component: Login
	},
	{
		name: '/sso',
		component: SSO
	},
	{
		name: '/sign-up',
		component: SignUp
	},
	{
		name: '/sites',
		component: Sites,
		layout: SiteLayout,
		onlyIf: defaultGuard
	},
	{
		name: '/sites/:id',
		component: SiteDetail,
		layout: SiteLayout,
		onlyIf: defaultGuard
	},
	{
		name: '/create-site',
		component: CreateSite,
		onlyIf: defaultGuard
	},
	{
		name: '404',
		path: '404',
		component: NotFound
	}
]

export { routes }

jobcespedes · 2022-02-25T23:03:01Z

Please omit last message. A new pathname and redirect is not needed. My mistake. Running npm ci fixed it.

jobcespedes · 2022-02-25T23:45:35Z

Still an issue when deploy to web server (npm run build). However, appending # to the end of the URL works. Ex https://example.com/app/#

jobcespedes mentioned this issue Feb 23, 2022

Prefix and public subpath gives 404 ItalyPaleAle/svelte-spa-router#259

Closed

jobcespedes closed this as completed Feb 25, 2022

jobcespedes reopened this Feb 25, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Prefix and public subpath gives 404 #130

Prefix and public subpath gives 404 #130

jobcespedes commented Feb 23, 2022

jorgegorka commented Feb 24, 2022

jobcespedes commented Feb 24, 2022

jobcespedes commented Feb 25, 2022

jobcespedes commented Feb 25, 2022 •

edited

Loading

jobcespedes commented Feb 25, 2022

jobcespedes commented Feb 25, 2022

Prefix and public subpath gives 404 #130

Prefix and public subpath gives 404 #130

Comments

jobcespedes commented Feb 23, 2022

Reproduce

More details

Step 2

Step 3

Expected result

Actual result

jorgegorka commented Feb 24, 2022

jobcespedes commented Feb 24, 2022

jobcespedes commented Feb 25, 2022

jobcespedes commented Feb 25, 2022 • edited Loading

jobcespedes commented Feb 25, 2022

jobcespedes commented Feb 25, 2022

jobcespedes commented Feb 25, 2022 •

edited

Loading