I use digital ocean space and CDN to host a React SPA. When hitting with a browser the url [host]/index.html it works fine. However hitting [host]/index.html/customers/one or any other subpaths, returns a 404. Currently, any reload on any subpath returns that 404. Last, I use terraform to update the SPA artifacts on DO spaces and I have tried to add a website_redirect="/index.html" to all the bucket objects (js, html and css) but with no success (more info if necessary here). And to be completely honest I am not sure I understand that option in the terraform digitalocean provider. I might be using it completely wrong.
Now, I have seen that question in multiple places but never with a clear answer.
Here is one on digitalocean community (https://www.digitalocean.com/community/questions/is-it-possible-to-send-a-301-redirect-for-bucket-objects) where no answer is provided but the issue seems to be similar.
There is a similar question on SO without an approved answer Redirect wrong URL/path DigitalOcean Spaces
This is a DO idea that is somewhat related https://ideas.digitalocean.com/ideas/DO-I-318
Is there a way to achieve the mentioned goal of loading index.html for every route with DO space + CDN and let the app parse the rest of the path to display the right component subtree of the react app?
Related
Does anyone have any pointers on how to go about adding a /docs page for website documentation to a next.js app? I've looked up Docusaurus but it seems like it's already a react app itself. Is there a way to integrate it inside an existing next.js app or are there other solutions?
Many Thanks
One idea might be to intercept the request and send the html file that docusaurus builds out, and putting all other files in the public folder.
https://medium.com/wesionary-team/render-html-file-in-pages-of-next-js-59281c46c05
Also checkout this discussion about it.
https://github.com/vercel/next.js/discussions/12373
I have done this with React apps using express. But never with Next. At first it looks like it would be possible with multi-zone in Next but that doesn't seem to do the job. So my other recommendation would be to try to use a docs.domain.com instead and host it separately. Then you have a /docs url or a button that redirects to the doc domain instead.
Firebase has free hosting and allows you to setup multiple sites. So it should be fast to test this setup there
I'm going to actively try to get this to work with Next myself but I do not think it will work because of how they are developed. So I would do the above recommendation and if I find a workaround, I'll post an update.
Summary
I'm trying to setup Next.js with static website hosting on S3 and CloudFront. For the most part it works but I'm having trouble with dynamic routes.
My directory structure looks like this.
pages/
index.js
about.js
[id].js
Currently my Next.js config is set to trailingSlash: true so when I run next build && next export my exported static files look like this.
out/
index.html
about/
index.html
[id]/
index.html
This means that when I visit "123456.cloudfront.net" or "123456.cloudfront.net/about/" the correct index.html is displayed. However when I visit "123456.cloudfront.net/1/", I obviously get an error message instead of out/[id]/index.html.
Caveats
The id pages are added, removed and updated regularly, so I don't want to generate them at build time using getStaticProps and getStaticPaths.
Solutions I've considered
I tried routing the S3 error document to out/index.html in the hopes that it would load the home page, run the JavaScript, recognise the path and end up showing the correct [id] page but it just stays on the home page.
I've considered trying a solution with Lambda#Edge to load the correct page but anytime I add or change paths in my application, I would probably need to update the lambda which seems messy.
Am I missing something?
After doing some more reading into this, I realised that serverless next.js is basically aimed at solving this same problem. It hosts your Next.js app in an s3 bucket and then uses a combination of CloudFront behaviours and Lambda#Edge to route your requests to the correct place.
It also includes support for a lot of other Next.js features, so it looks like that's the way to go for now.
After more than a year of keeping with my ego to host it purely with S3 and cloudfront, I have moved to Vercel. If your site has a large number of pages say a product listing, then for SEO and performance you have to have ISG (Incremental Static Generation) and you can not do that with pure S3 and Cloudfront combination. We fought hard and it seemed like our engineering was going to build a product like vercel rather than own product development. So finally pulled the plug and moved.
NOTE: I do not work for vercel, and this is just a revelation after 1.5 years of S3 + Cloudfront + LambdaEdge based struggling, and live was easy after that.
I have react js app and it works perfectly on the local server. But when I upload it to the an apache server, everything is blank, so I have looked over google and the solutions am getting is that i use
HashRouter
instead of
BrowserRouter.
When I do that, it works but it brings another problem where when I navigate to some of the pages, there is no history and the page breaks again now with an error of undefined history state. Anybody who can help me around this, please guide me along. It's a big headache to me.
You have to add a .htaccess file or create virtual host so that all traffics are send in index.html file e.g you can see in this node server I always send all my traffic to my index.html file. You can search in Google for this & find one. I found one https://gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042 but as I didn't test so I don't guarantee but I hope you got the idea 🙂️
I'm trying to host a gatsby application on an S3 bucket that contains links to three pages. when I do a gatsby build passing the parameter --prefix-paths and serve it locally everything works without any issues. When moving same build to S3 I keep getting 403 Code: Access denied on every page (at least my tab icon shows).
Now when I build the same application without specifying prefix paths and host it on S3, everything renders without any issues. Is there anyone that has been able to work around this issue?
What I'm expecting:
when I hit:
someapp.s3-website-us-east-1.amazonaws.com/v1/portal/ to take you to the first page.
someapp.s3-website-us-east-1.amazonaws.com/v1/portal/page2 to take you to the second page.
some.app.s3-website-us-east-1.amazonaws.com/v1/portal/page3 to take you to the third.
Any help would be great.
I ended up with an answer after going through API Gateway docs for a while. What I ended up doing was structuring my methods and resources as such. Once set, all my resources were available.
So I'm trying to deploy my first React application live. It is my portfolio webiste. Anyways, everything is working fine except for my routes. Locally, Everything works fine. However, now that I've deployed the website my routes do not work. When you click on any of the links it says the url cannot be found on the server, and it throws a 404 error.
The application is hosted by namecheap, and they said they cannot see anything wrong from their end. I just have no idea what could be wrong then as it all works find locally.
My website can be found at andrewschubert.website and the github repo for this can be found at https://github.com/theschubinator/my-portfolio If anyone has any ideas what I'm doing wrong I would greatly appreciate it!
By the way, it is a React Application. There is no database or API, just strictly front-end. The only links that are actually working are the ones that redirect you to an area outside of my application...like my blog on medium.
I can see that you've been using react-router lib for your routing. It is based on HTML5 history API, which is not supported by every host out there. If you are talking about your portfolio website and it's not so much of and issue where do you deploy it, try out some different hosts (e.g. surge is great for deploying static sites: https://surge.sh/).
React applications are single page. Routing in React means changing the components displayed when user requests a different url. You will need an api.
On every client request you return the same "index.html" which will display only one component. By creating a controller in your server you can map "/contact" to "index.html#contact" and your hashrouter can return the ContactUs component.