Is there a simple client side routing solution that will take any URL path value and pass it on to a variable? I would like it so https://URL/path saves the path value as a variable and loads index.html while preserving the URL.
I have looked at a couple of solutions (path.js & crossroads.js) but I don't quite understand how they work for binding any URL path and loading the default index.html file. I am not using any frameworks and would like to know if this is achievable with vanilla javascript.
Related
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 have a client side application written in plain HTML/JS (Not with Angular.js or other front-end MVC framework). It contains multiple html file. each includes different js library.
I would like to provide basic user auth feature(using sails-generate-auth) to limit the access of this client-side application using Sails.js
But I'm having problem putting those html file into /views
Should I change all *.html in to *.ejs and edit /config/routes.js to route each file? How do I make use of the req.session.authenticated ? Please provide some direction. Thank you.
Your solution written in your question would work. Here is another option:
You can send the file straight from your controller or for universal usage you can create a custom response that will send the html file instead of attempting to render the ejs view. Call it sendHtml(), or modify the current ok.js to know and send your html files
http://sailsjs.org/#!/documentation/concepts/Custom-Responses
Use something like
res.sendfile('/views/' + rest.controller + '/' + res.action + '.html');
I have a web server setup. And my web app (JQuery + HTML) is up and running. I would like to use the path that is provided in the URL as some variable and perform different operation.
E.g.
http://subdomain.mydomain.com/
This points to /var/www , and has my index.html
I am trying to achieve the functionality that, when path with some value is provided, e.g.
http://subdomain.mydomain.com/c3212
I will catch the value c3212 in javascript and set it as some static variable. The view/js code in index.html uses this code to make requests to server to fetch some data and layout the data accordingly.
How do I go about doing this ? Googling didn't help much, since I don't actually know what terms should I search for. Do I also need to make changes in Apache VirtualHost configuration?
I am not a web guy, help would be appreciated, thank you.
You can use the window.location JavaScript object to get the path like so:
var path = window.location.pathname;
console.log(path); // this will output "/c3212" based on your example
Once you have this you can use it with the rest of your script.
I hope this helps!
I have a bizarre routing issue with my ASP.NET MVC project that I hope you guys can help me with.
Overall everything works fine when I run the project off my localhost or run it on the server while it's deployed directly at http://myServerName. The problems start when I deploy the application to various enviornments on the server located under different virtual directories. For example: http://myServerName/QaEnviornment or http://myServerName/TestEnviornment
The problem is that all Javascript calls to application URLs ignore my environment virtual directories and fail.
For example on my QA server whenever I have to make an Ajax call I take a standard approach such as:
var myUrl = '/ControllerName/ActionMethodName/'
$.ajax({url:myUrl,success:function(){Do stuff} })
Because my application is deployed on http://myServerName/QaEnviornment, when rendered I expect myUrl to be http://myServerName/QaEnviornment/ControllerName/ActionMethodName. Instead it comes back as http://myServerName/ControllerName/ActionMethodName and ofcourse fails.
To get around this for now I declared a global Javascript variable that contains the environment folder name and when I build URLs for javascript calls I have to remember to ALWAYS construct them as var myUrl = myGlobalFolderVar + '/ControllerName/ActionMethodName/'
Using a global JavaScript variable to get around this issue seems as a bad solution to me. Is there anything I can do to get routing to work properly so whenever JavaScript calls are made whatever subfolder the application is running under is always included in the URL ?
Instead of always having to remember to construct them correctly, make a helper function that you call to create your URLs
function CreateUrl(string path){
return myGlobalFolderVar + path;
}
To answer your second question, not really. Routing is not aware of what made the request and you cannot always rely on the X-Http-RequestedWith header to base that decision on. In addition, your site application root is not at the domain root, therefore routing would only kick in when it visits your application. The only other way I am aware of is to have MVC actually generate the Url for you (var url = '#Url.RouteUrl(params)';) but this does not help at all when you have your JavaScript in a single or a few .js files.
EDIT
The above function is a JavaScript function that can sit anywhere you would like in your application, including external JS files. As for setting your myGlobalFolderVar, there are a few ways you could set this.
1.Actually hard code the variable in your external JS file.
var myGlobalFolderVar = 'TestEnviornment';
This is hard however if you are deploying to several different testing servers.
2.If you are using web.config transformations, you could add an AppSettings key/value pair in your web.config transformations depending on build type. Then, using that value, set your global Javascript variable in your master page layout/views.
<appSettings xdt:Transform="Replace">
<add key="folderLocation" value="TestEnvironment" />
</appSettings>
In your external JS file
//this makes it a site wide/global variable in any place you
//include your external JS file
var myGlobalFolderVar = '';
And in your master view
<script type="text/javascript">
myGlobalFolderVar = '#ConfigurationManager.AppSettings["folderLocation"]'
</script>
3.Same as number two, but use the URL helpers to figure out what the path to your application is in your master view instead of using the web.config transformations
<script type="text/javascript">
myGlobalFolderVar = '#Url.Content("~/")'
</script>
The basic idea is using .NET to figure out where it lives and set a global JavaScript variable with that path information. Then, in conjunction with the helper JavaScript function provided at the top of this answer, you can correctly generate paths as needed throughout your application - regardless of path depth, deployment location or any other deployment type concerns.
var myUrl = CreateUrl('/ControllerName/ActionMethodName/');
$.ajax({url:myUrl,success:function(){Do stuff} });
here's the thing:
i built my site with SEO friendly urls...but i have problem now calling ajax files becaus eth epath is wrong and I cant set an absolute url when i call my files in background..
for instance my page is here (similar to StackOverflow..)
www.domain.com/product/123/this-is-a-product
but my javascripts functions, in folder /js,now they try to reach the files but they cant obvisouly because are set to relative path...
how can i solve this issue??
EDIT: Found this How to get the root path in JavaScript?
When you are using freindly urls, then you have to use path started with /. But then you are starting path from main path.