I'm hosting a Backbone application on Amazon S3 using a custom domain name. The Backbone application router handles all routes under the root ('/'). I would like to use pushState, so there's no need for the # prefix on my application routes. Basically, i want all sub-routes to be routed by S3 to the domain root and let Backbone do the rest.
I added the following rule:
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals >
</Condition>
<Redirect>
<HostName>mydomain.com</HostName>
<ReplaceKeyPrefixWith>#</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
But this just adds the # sign prefix to all my sub-routes. I want to avoid that.
How do I set the redirection rules on my S3 bucket to route everything to the indexed document without having to add the #?
You say "just adds the # sign" but what that does is actually load the index.html page. That is because www.example.com/#my-folder/my-page/whatever is actually loading /index.html and sending the browser the #my-folder/my-page/whatever as a fragment. You could do it if you ran the website on a server, but not in S3. You could use push-state once the page loads to read the fragment #my-folder/my-page/whatever and rewrite it to my-folder/my-page/whatever, and I believe that would achieve what you're looking for.
Related
I'm new to Vue and am trying to figure out the best way to do the below.
Let's use example.com as our domain name.
We have a Vue.js app deployed that allows our customers to create their own subdirectory in our Vue.js app (e.g., example.com/user1page and example.com/user2page). Right now example.com goes to a Vue.js login page
Marketing recently sent us a home page (built in pure HTML/CSS/JS) that they need to display at example.com. Is it possible for me to upload the HTML/CSS/JS for that page in a Vue static asset folder and render that for example.com; then render our actual Vue.js app for anything example.com/*?
Due to business reasons we cannot:
Change the vue.js app to a different domain or subdomain (because customers have already published pages)
Change the marketing homepage to a different domain / subdomain / subdirectory
As an aside, we're using Clouflare for our DNS. Unfortunately their page rules won't be able to solve this issue.
Any help would be greatly appreciated.
Thanks very much!
Ed
I would solve this with a webserver configuration if you have access to it.
In NGINX you can define different locations with different root-folders.
So if a user access to main page it would it the first route and serve the static page and if it would it the regex for the client page it would serve the vue application (you could also specify the vue server here)
location / {
root /var/www/static-html-folder;
}
location /paths-to-clientpages {
root /var/www/vuepage;
}
For the location paths you can use regex to match all routes
I figured out that the way to do this in Netlify is to add the following command to your toml file:
[[redirects]]
from = "/"
to = "your marketing page URL"
status = 200
force = true
I have a static website uploaded on S3 and recently I came to use Cloudfront as I wanted to serve it with https. Now my problem is that I have some js logic that based on the path, puts a "#" and scrolls around, but now for some reason it redirects me to mysite.com/index.html and breaks me the logic.
I would like how to avoid this behaviour, just as in localhost, with the base path "/" without any index.html at the end of it.
I've tried to set Default Root Object to "/" only but it seems to ignore it and keep redirecting, also I tried to invalidate it but nothing.
Also I have to say that I'm using 2 S3 buckets one with the "www" which redirects to the previously mentionated, for that reason I also created 2 cloudfront distributions.
Idk what im doing wrong but something has to be :S
You need to specify a default Root object with the object name.
example:
www.bucket1.tld/ (redirects to naked domain)
.bucket1.tld/index.html <---- you need to specify this as the default root object, not "/"
Your bucket can't find the default root object because "/" is a prefix, not an object. The redirect from www to naked domain is seperate from this and is working as intended.
Additionally - The bucket that is setup as the website is the one causing the "index.html" to be strapped to the back of your domain. This is because you've told S3 that the bucket is a website and that it needs to serve "index.html" as a default object.
Set your DRO to "index.html" in CloudFront.
Eric
Source: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/DefaultRootObject.html#DefaultRootObjectHowToDefine
Based on the comments on another of my questions (gradle how to add files javascript fies to a directory in the war file) I'm trying to use angular-cli to help build and manage an angular project. However, I cannot seem to find any documentation on how to create a second webpage in the project, which to me seems like a very basic task. I tried creating a "component" with ng g component {component name}, but this didn't add anything to the build result.
I had missed the section of the angular docs on routing since I did not make the connection between the word "routing" and what I wanted to do. Routing as described here works perfectly when using Node as your server. However, other web servers such as Tomcat (which I am using for this project) will not since ng build only generates an index.html file. Node knows that it should re-route URLs under the angular base to that file, but Tomcat doesn't. A proxy server such as apache needs to be placed in front of the Tomcat server to redirect the urls to the base url for the application.
With that out of the way, here is the basics of routing:
create a component for each "page" (the component does not need to be responsible for the whole page displayed. see 2)
create a "shell" component that contains features that will be on all pages e.g. toolbar, side navigation.
add <router-outlet></router-outlet> to the point in the shell component component where components for sub-URLs will appear (note that they are inserted into the DOM after this tag, not within it.)
in the imports for your module, add RouterModule.forRoot(). This function takes an array of Route. Each route has a path and a component property. path is the url (relative to the base url) that will cause component to be inserted into the DOM. Note that path values should not begin with a slash.
add a tags with the routerLink property bound to the url of your new page. Note that here, there should be a leading slash.
Is it possible to serve a dynamic html page without a backend server or without using a front-end framework like Angular?
Edit
To clarify, the index file is served from a backend. This question is about how to handling routing between the index and dynamic pages.
I have an application that consists of two files - index.html and dynamic.html. When the user clicks an option say "Option A", they are served dynamic.html and the url is updated to /option-a. Now, with a server this is no problem and assuming the user visits the app from the landing page, it isn't a problem either because a cookie can be set. However, suppose a user visits a page at my-domain/option-a. That route doesn't exist and there is no server to redirect so it will 404. They would have to visit dynamic.html.
I think this architecture demands that there's either a server to handle route redirects or a SPA framework.
Is there something I'm missing?
your SPA framework will be active only once your HTML page is loaded and to do that you need to redirect any URL that user tries for your domain to that HTML file. For this you obviously need a server (and since you are talking about my-domain/option-a I assume you have atleast a basic server). You can refer to this link to get an idea on how server can redirect a URL to specific html file: Nodejs - Redirect url.
Once HTML is loaded you can initialize your SPA framework and decide the template to be loaded based on the URL.
Note: without a server you will access URLs using file://somepath/index.html and anything other than this URL will result in 404 and no SPA framework can handle that.
I think the solution is to use a static site generator such as Jekyll or Middleman and allows you to convert information into static pages. That way you functionally are building a bunch of pages but they are all compiled ahead of time. You can add dynamic content that is loaded in from a yaml file and it will compile the content into separate html pages.
It is not possible, but there is a workaround using url parameters like this:
my-folder/index.html
my-folder/index.html?=about
my-folder/index.html?=about/sublevel
my-folder/index.html?=profile
my-folder/index.html?=./games
const urlParams = new URLSearchParams(location.search);
const route = urlParams.get('');
console.log(route);
// Should print "about" "about/sublevel" "profile" "./games"
Of course this approach is not as clean as using a server for routing, but it's the best you can get without a server.
BTW. I tried an alternative solution creating symlinks with all the target routes pointing to the same index.htmlfile. But it did not work because the browser (firefox) redirects by default when it finds a symlink, thus home is shown all the time.
How can I deeplink to my Ember app from outside ?
Say I want to deeplink to within my ember route (mainPage\deepRoute)
So when user clicks on the external link (not part of my Ember app), he is directly taken to mainPage\deepRoute
How will I code such a link ?
I assume by default the Ember application template would be rendered, but I want to direct route to some other link/template ?
You can simply link inside to any route of your Ember.js app directly, however your webserver has to be configured with url redirect to the index.html.
For example, if you use nginx as a webserver, you should have something like this in your nginx config file:
location / {
try_files $uri /index.html;
}
Option Two: if you cannot update the webserver, for example, you use GitHub pages, you have to use the #-ed url option. In this case, a url looks like this: example.com/#/posts/1/comments
More info here: http://guides.emberjs.com/v2.1.0/configuring-ember/specifying-url-type/
Make sure the server will load the single Ember html page for that url. You can create a 'catchall' route in your web framework that aliases (not redirects to) your index.html view, - probably at the bottom of your server route definitions - or manually alias whichever specific route you are concerned with.
Then once Ember is loaded it will enter the route specified in the url and use any query params that were specified.