0

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}"/>
Sagar Dawda
  • 1,126
  • 9
  • 17
  • 1
    The shared code looks okay to me. Can you please share a minimal reproducible example ? I found this sandbox which has the same concept and it's working fine https://codesandbox.io/s/pckm7?file=/App.svelte – Hariom Balhara Sep 05 '21 at 15:01
  • The author of this pen has a blog. Which is exactly what I have followed - https://jackwhiting.co.uk/posts/setting-up-routing-in-svelte-with-pagejs/ Strange thing is it works for static routes like Home or Article or About but the moment I enter Article/:id (https://127.0.0.1:5000/article/21) in the browser it shows URL not found. If I click on a button and use page.redirect, its accessible – Sagar Dawda Sep 05 '21 at 15:24
  • Yeah but the point is that the demo is working. If you can share your example as well, then I would be able to help you in solving the problem. – Hariom Balhara Sep 05 '21 at 15:25
  • 1
    I figured that the issue was not from javascript but flask. I had to manually specify `@app.route('/article/')` to serve the static file. I appreciate you looking into this @hariom – Sagar Dawda Sep 05 '21 at 15:40

1 Answers1

0

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.

Sagar Dawda
  • 1,126
  • 9
  • 17