missing deep-linking so page refreshes and Admin example don't work

[davie-robertson]

Very nice series of articles and it's good to see that you're following the open-wc scaffolding including the web-dev-server but the example you give for an admin page won't work as there doesn't seem to be any redirections of requests going to the app entry point (index.html).

This also means that a user cannot refresh one of the application routes in the browser (i.e. a blog post) as this will result in a 404 error.

Edit:

There's been a change in the development web server from es-dev-server to @web/dev-server since you wrote this article. To get your code running with the modern open-wc scaffold you need to edit your package.json from

"start": "concurrently --kill-others --names tsc,es-dev-server \"npm run tsc:watch\" \"es-dev-server --app-index index.html --node-resolve --open --watch\"",

to

"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds --app-index index.html\""

because the --app-index index.htm is no longer added by default.

[GaryHomewood]

I agree, very nice article that has got me along way. But I'm still battling with 404s.

This example works fine when using npm run start probably because of this:

[es-dev-server]   Using history API fallback, redirecting route requests to '/index.html'

If I do npm run build and serve the dist folder, clicking a link in the app will work but entering a URL directly or doing a page refresh fails with 404.

How do I get @vaadin/router to work on page reload? Is there some Rollup config needed?