0

I'm looking for a solution that would allow you to go to:

example.com/users/_example_user_123

Where _example_user_123 is a variable (there could be thousands of users), so it's not practical to create a page for it.

Can this be done on a static site hosted on S3/Cloudfront with a serverless backend.

The issue seems to be that when you visit any route for which there is no page, you get redirected to the index.html, and I don't know if there is a way to pass through the initial route request via S3/Cloudfront. Has anyone successfully done this?

I tried using Nuxt, but I can't get dynamic routes working unless the site is not being hosted from S3.

James Shapiro
  • 4,805
  • 3
  • 31
  • 46

1 Answers1

0

S3 hosting is a hosting for Static Pages, what automatically disallow implementation of Universal mode for Nuxt.js. You can either deploy SPA or Generated pages on the S3.

Vue.js uses Single Page Application mode (SPA) to generate and create the app. This mean, that the app is accessed using index.html and uses hash-based routing (client-side rendering only). You can read about it here: HashRouter vs BrowserRouter

Luckily enough, Vue.js supports a dynamic route matching, which can be achieved by implementing Vue Router in the way described here: https://router.vuejs.org/guide/essentials/dynamic-matching.html

Dawid Stefaniak
  • 347
  • 2
  • 12
  • 1
    So the short answer is "no"? I was already aware that you can get it working with the router in hash mode. – James Shapiro Mar 25 '20 at 16:33
  • If you use pure S3, then you have to use Vue router. If you use CI tool like AWS Amplify, you can setup redirections. Regardless, it's better practice to keep all in-app redirections in the Vue Router instead. – Dawid Stefaniak Mar 25 '20 at 16:41