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.
Related
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.
I'm working on a Ember.JS app using
App.Router.reopen({
location: 'hash'
});
Which means that all my URLs are something like these:
http://example.com/#/
http://example.com/#/abc
http://example.com/#/def/ghi/123
The issue:
In a very specific case, the user will try to access my application using:
http://example.com/abc (yes, without the hash)
My question:
Is it possible to redirect this user from:
http://example.com/abc
to
http://example.com/#/abc
using the router.js file or a similar approach such as use .htdocs in a PHP app to redirect URLs?
Unless the webserver actually serves the Ember App when visiting example.com/abc, there is nothing you can do from the Ember side, because the code never gets to execute.
Thank all for the help!!
Here it is how I solved the issue:
We just added a redirect in the Nginx server. In case you use apache, you can also do that on its configuration.
location /abc {
rewrite ^.* http://example.com/#/abc redirect;
}
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.
I am making a static site with Backbone that will have only one file as an entry point(index.html). I was wondering how to make the site respond to any external url to the site? For example
www.example.com/this_route
www.example.com/search
While I do have a router set up now, I can only trigger url changes from within the app:
router.navigate( "to_here" );
But if i type www.example.com/to_here in the url bar of a browser, i get the error: "The requested URL /to_here was not found on this server."
Thanks for any help
You need to set up your web server to always respond with index.html.
I'm using nginx for this purpose with rules below, it always serve index.html for any requests like this localhost:8080/to_here
server {
listen 8080;
server_name localhost;
location / {
root /path/to/folder/with/files;
try_files $uri /index.html;
}
}
In Backbone you "catch" the url from the browser when they starts with "#". So, even your Router is something like this:
routes : {
"this_route":"exampleFunction",
"search":"searchFunction"
}
if you want to execute each function depending on the browser url, you have to write www.example.com#this_route or www.example.com#search to fire the functions with Router.js
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.