0

I'm new to Stack Overflow, I'm new to Vue.js, so please forgive me if I'm doing something wrong in advance :)

I'm building an application that has only main component, which is in my root directory (/index.html). Based on a name passed to the path, this component loads a json with the same name and serves the SPA based on it (important: it does not render the pure json, it uses the json to mount a SPA and this part is working fine). So the paths could be any of the following (they're always dynamic):

http://my-example-site.s3-website-sa-east-1.amazonaws.com/*foo*
http://my-example-site.s3-website-sa-east-1.amazonaws.com/*bar*
http://my-example-site.s3-website-sa-east-1.amazonaws.com/*anotherfoo*
http://my-example-site.s3-website-sa-east-1.amazonaws.com/*anotherbarandsoon*

It works fine when I run on dev, but when I build it to S3 I get a 404 saying that it can't find "foo" path. The fastest workaround was to set my error page to "index.html" on S3, but of course this isn't a good idea as I always get a 404 (the page renders correctly though, even if I don't get a 200 or alike)

I did some research (maybe not enough, sorry :() and found this code:

    const router = new VueRouter({
      base: __dirname,
      mode:'history',
      routes: [
        {
              path: '*',
              redirect: '/index.html'
          }
      ]
    });
    var vm = new Vue({
        router,
        el: '#app',
        render: h => h(App)
    });

    global.vm = vm;

I get no compilation errors and it runs fine... until I put it on S3. Same problem then: 404.

So, the question is: what am I doing wrong?

Ricardo Pires
  • 3
  • 3
  • Does this answer your question? [Vue Router return 404 when revisit to the url](https://stackoverflow.com/questions/36399319/vue-router-return-404-when-revisit-to-the-url) – rodurico Feb 14 '20 at 19:27
  • This isn't a coding issue nor strictly related to Vue. Your web server is looking to serve a file at the specified URL, but of course there is no such file called `foo` or whatever. You are expected to tell the server that you want it to serve up the root for all traffic off the root path. This will load the app and then Vue can take over path management locally. This is trivial to do on Node, on Apache you'd use a .htaccess file or rule rewrite. S3 is not exactly a web server but check this https://stackoverflow.com/questions/16267339/s3-static-website-hosting-route-all-paths-to-index-html – Dan Feb 14 '20 at 20:45
  • Thank you! I had a suspect It had something to do with the server. I'm trying to configure S3 right now. – Ricardo Pires Feb 14 '20 at 20:54
  • 2
    Seems I'll have to use Cloudfront for this, as S3 doesn't handle these "dynamic paths" very well. I'll buy a domain and try to solve this on Cloudfront, thank you for the tip! – Ricardo Pires Feb 14 '20 at 22:00

1 Answers1

0

As I wrote above, it seems that S3 by itself doens't handle these requests correctly. The solution was to use Cloudfront, which has more ways to deal with error handling and rewriting response codes - I configured it to catch 404 errors and rewrite them to 200.

Ricardo Pires
  • 3
  • 3