page.js with svelte `The requested URL was not found` when entering URL manually or refreshing despite passing --single flag in package.json

Question

I'm new to the whole Javascript & svelte ecosystem and am trying to build an app with svelte.js and using flask to serve it. The issue is I get The requested URL was not found when i enter the path manually or refresh the page. This happens despite passing the --single flag in package.json. The strange thing is, I face the issue only when the route has associated params eg. /article/:id . However if I enter the path /article manually or refresh it, there is no issue.

Here's a snippet of package.json

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --single",
    "start:dev": "sirv public --dev --single"
  },
  "devDependencies": {
    "rollup": "^2.3.4",
    "rollup-plugin-livereload": "^2.0.0",
  },
  "dependencies": {
    "gridjs": "^5.0.2",
  }
}

Here's a snippet of my App.svelte file

<script>
  import {onMount} from 'svelte';
  import page from 'page';
  import Home from './pages/Home.svelte';
  import ArticleOverview from './pages/ArticleOverview.svelte';
  import SingleArticle from './pages/SingleArticle.svelte';

  let current;
  let params;

  onMount(async () => {
        const res = await fetch(`/some_api`);
        const outcome = await res.json().then((outputDetails) => {
        console.log(outputDetails);
      });
    });

  page('/', () => (current = Home));
  page('/article', () => (current = ArticleOverview));
  page('/article/:id', 
    (ctx, next) => {
      params = ctx.params
      next()
    },
    () => (current = SingleArticle));
    page('/*', () => (current = NotFound));

    page.start();
</script>

<svelte:component this="{current}" params="{params}"/>

Answer 1

The issue was with flask routes. I added an extra route and it worked.

Previous routes:

@authoring.route('/', defaults={'path': ''})
    @authoring.route('/<path:path>')
    @authoring.route('/<string:path>')
    @authoring.route('/<path:path>')
    @authenticated_view
    def catch_all(path):
        return authoring.send_static_file("index.html")

Added routes starting with /article/<path:path>

@authoring.route('/', defaults={'path': ''})
    @authoring.route('/<path:path>')
    @authoring.route('/<string:path>')
    @authoring.route('/<path:path>')
    @authoring.route('/workspace/<path:path>')
    @authenticated_view
    def catch_all(path):
        return authoring.send_static_file("index.html")

Somehow the images aren't loaded but should not be a big issue.