I followed this tutorial on how to host server side generated sites on Google Cloud Buckets. The issue I am having is that the nuxt app works fine when routing internally, but when I reload a route, the site is redirected to whatever route plus a /index.html at the end.
This causes things to break, as it conflicts with Nuxt routing. I set index to be my entry point ala
gsutil web set -m index.html -e 404.html gs://my-static-assets
but it seems to assume that to be the case always. I don't have this problem using Netlify.
According to the tutorial that you're doing, you're redirected to /route/index.html because of your MainPageSuffix index, this means that when you try to access for example https://example.com/route the service look for the target https:// example.com/route/index.html.
To fix this I suggest that you include an index.html file under the subdirectory in the subdirectory of the route.
I recommend, for further info on this to check this post which has a similar issue.
Related
I have deployed a multi-page gatsby site both to AWS Amplify and Netlify.
When I go to a page that doesn't exist on my site that was deployed with Netlify, I get the 404 page I have created. But when I go to the same non-existent route on the site with Amplify, it redirects me to the root path.
I have checked the network tab, and I get a 404 status code without any HTTP redirects. So I assume the redirect happens in the JavaScript code?
Does this happen to anyone else?
Here is the default Rewrites and Redirects for my site on Amplify:
The solution was to change the target address from /index.html to /404.html like this:
I exprienced this same issue, but with all pages reloading to the homepage if they weren't ended with a '/'. Removing all the rewrite rules seemed to fix this for me. I wasn't using any of them and they were set as defaults. Such as 'www' rerouting to '/'.
I'm setting up a static site on a Google Cloud Storage Bucket with Loadbalancer. The site gets generated with Gridsome and then the dist folder gets saved in the bucket.
I have set the index and error with gsutil like in the [documentation]: https://cloud.google.com/storage/docs/gsutil/commands/web
Now I am facing a problem with how every url for accessing subdirectories gets redirected to dir/index.html. This is desired behavior, the dir/index.html page even exists in the bucket. But I still get a 404 - not found.
If I do a curl to the url subdir/index.html I get the HTML
I do not know exactly how you are testing your subfolder but I think this link can help you with your issue Error 404 when loading subfolder on GCS. In addition, you maybe must to take a look here How subdirectories work.
Based on How subdirectories work on GCS, when browser request URL http://www.example.com/dir it will be redirect (301) to The object http://www.example.com/dir/index.html on content served.
My assumption is there is no route http://www.example.com/dir/index.html on Vue (vue-router). So it will be throw to Not Found 404 page.
The simple solution is try to change all subdirectories link from
http://www.example.com/dir, http://www.example.com/about etc, to
http://www.example.com/dir/, http://www.example.com/about/
It will not redirect to 404 page when you request subdirectories url or reload the browser. But we all know that it's not best practices.
I am writing a single page app with React for educational purposes. My React-Router v4 BrowserRouter handles client side routing correctly on CodeSandbox but not locally. In this case, the local server is the webstorm built-in devserver. HashRouter works locally but BrowserRouter does not.
Functioning properly: https://codesandbox.io/s/j71nwp9469
You are likely serving your app on the built-in webserver (localhost:63342), right? Internal web server returns 404 when using 'absolute' URLs (the ones starting with slash) as it serves files from localhost:port/project_name and not from localhost:port. That's why you have to make sure to change all URLs from absolute to the relative ones.
There is no way to set up the internal webserver to use project root as server document root. But you can configure it to use URLs like http://<host name>:<port> where the 'host name' is a name specified in hosts file, like 127.0.0.1 myhostName. See https://youtrack.jetbrains.com/issue/WEB-8988#comment=27-577559.
The solution was to understand how push state routing and the history API works. It is necessary to proxy requests through the index page when serving Single Page Applications that utilize the HTML5 History API.
The Webstorm dev server is not expected to include this feature, therefore the mention of Webstorm in this thread was a mistake.
There are multiple libraries of < 20 lines which do this for us, or it can easily be hand coded.
I have an ember app that I have been building. It has several routes including index (/) and authorization (/authorization). My trouble is that when the application is hosted on hostgator, loading the url myapp.com/authorization results in a 404. This makes sense since there is nothing at that actual url. I need hostgator to redirect all non-file-specific urls to my index.html file.
An example in psuedo code:
if url has extension (.jpg, .pdf, etc)
serve requested url
else
serve index.html but retain url in the address bar
I've done this sort of thing with local instances of node when using AngularJs with ui-router, but this is my first time using History-API based routing served from HostGator.
Any suggestions on where to start to set this up?
Not much of an answer but you can use locationType: 'hash' in environment.js as your configuration.
With locationType set to 'auto', refreshing on application hosted on Hostgator will produce a 404. I have encountered this before and not found any solution. So I switched to 'hash'.
If you find any solution, please tell me. Thanks!
An ember cli site was deployed onto a server and it works fine. Links via {{link-to}} all work beautifully.
BUT, when a user (me that is) manually enters a url and hits return. then the site is not found.
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
even changing a parameter of a working url (initially navigated to thru link-to)
http://site/start/0/length/30
and simply backspacing, changing the 30 to 20 and hit return
http://site/start/0/length/20
its a no go
localhost:4200 doesn't have this issue.
has anyone observed this vicious behaviour.
i actually need it for a callback redirect for oauth. but then noticed than any manually entered urls dont function.
It is because your server (IIS?) is trying to access the full path requested by your browser (eg /start/0/length/30), and not finding a valid file on disk returns a 404.
So, you need to configure your web server to proxy/rewrite the requests to the proper location. Assuming you are deploying your application in your "root" directory, the proper location is /index.html (the file ember-cli creates).
Unfortunately, I can't help you with IIS, but I can provide you with the proper configuration for nginx:
location / {
try_files $uri $uri/ /index.html;
}
This says "If the requested URI doesn't exist, instead respond with the /index.html file".
When you are using ember server on localhost:4200 you don't have the same problem because it is automatically doing something similar transparently.
If you are serving this up from any web server that isn't the built in Ember, ie non local server, you need to have a wildcard rule that returns your Ember app's index.html file for anything below your websites base url. If you only have your base url return the index.html file, then your webserver is confused by the unrecognized url and thinks it has nothing to return. If your rule, though,
for baseUrl/* returns index.html, your Ember app will then run the correct route hooks to establish the app context
this is a dupe and the question is
How to run emberJS application in IIS?
the easy answer is set locationType: hash in ember-cli's environment.config file (copied from accepted answer)
that will introduce a '#' in the url but doesnt require an IIS change.
var ENV = {
...
locationType: 'hash'
... };