Ok, so the title tells very little of my issue.
Basically, I have a project written in node that does something. It's a website that uses express, jade and stylus. I have set up the routing for static content like this:
app.use(express.static('public'));
The website works fine and all the CSS loads properly if, in the HTML, I reference it like this (for example):
link(rel="stylesheet", href="global.css")
As expected, when I hover over the link in Chrome's element viewer, the URL is localhost/global.css
So now I've got a couple of these little project and I want to put them all together. They aren't related but I'd like to put them all on my website. For this I have made a new project that server like a hub for the other ones.
In it, I've setup routing like this:
var proj = require("../proj/server.js");
app.use("/proj ", proj);
and in each of the projects I have set the modules exports like this module.exports = app where app is their respective express app object.
This also worked like a charm. I didn't have to run a separate server instance on a separate port for each project. Instead, you can access them like localhost/proj/
Now here's where the issue starts. The CSS that is referenced in the generated HTML of each project doesn't point to localhost/proj/global.css. Instead it still points to localhost/global.css. And since there's no global.css in the public folder of my hub application, it doesn't find it.
I could, of course, just change the relative URLs to proj/global.css instead of just global.css and this does work, but it means that I need to modify all of my projects. It also means that I have one more string to change should I decide to change their names.
Besides, the URL already shows localhost/proj, so why can't it just be automatically implied that when I reference global.css it should be looked for in localhost/proj/global.css?
I'm sure there's some easy trick I'm missing. Maybe my relative URLs should have some extra stuff that says it refers to the current URL?
Edit:
It actually seems that the relative URLs work, but only if the address in the address bar is localhost/proj/. If it's localhost/proj it doesn't. What can I do to force that last slash?
I don't know if it can help you, but in express, you can define several "public" directories
router.use(express.static(path.resolve(__dirname, 'client')));
router.use(express.static(path.resolve(__dirname, 'public')));
router.use(express.static(path.resolve(__dirname, 'foo')));
Related
I would like to host multiple versions of a SPA on the same site. I would like to use initial load paths like this:
http://host/myapp/1.0.1
http://host/myapp/1.0.2
However, if my html uses relative paths like "css/myapp.css", then these resolve to:
http://host/myapp/css/myapp.css
I know why this is, and I know if I use trailing "/" on the initial page loads it will work correctly, but obviously it would nice to not have to tell people to use the "/" on the end.
I suppose I could have the app adjust the base path on load, but that complicates the app somewhat. I am using vue and the solution would need to work at runtime, not compile time since i don't know all the subfolders the immutable app will be loaded from.
Is there a cleaner way to support multiple version-folders this way and have relative paths work properly?
When we launch a website, we usually see webpage name (menu.php or admin.aspx) but I would like to hide that name and show only virtual path or just website name. I don't want it for the first page because I did that with default.aspx but I want to implement it for the whole website.
Showing www.abcd.com/faq/ instead of www.abcd.com/faq/faq.html
Note: My code is not MVC code and server is Apache.
Use .htaccess to rewrite the URL. Millions of tutorials are out there for that ;)
What you are asking is achieved using (for xampp, wamp, lamp or any other apache powered webserver setup) htaccess rewriterules. The rules take the URL and break it into parts that can be modified or used as variables to feed other pages - whilst still keeping the URL you typed. Neat huh!
Showing www.abcd.com/faq/ instead of www.abcd.com/faq/faq.html
call the file placed into the folder faq simply index.html (not faq.html) and then www.abcd.com/faq/
will display the page without the filename. (Make sure, you have defined index.html as a valid Directory index.)
There are more options with using mod_rewrite etc - but since you seem to use a prety static directory based navigation layout, that would be the easiest way.
im planning to do something using bootstrap, where i will split the .jsp in 2 divs, the top one is the menubar.jsp and the other is the contentclicked eg:
start.jsp
<div id="menubar"></div>
<div id="content"></div>
when the users get access(after a login) and go to the http://www.localhost.com/restrict/start
it will run this .js
$(document).ready(function(){
$("#menubar").load("restrict/menubar");
});
the /restrict/menubar is because i have a file called menu.jsp that have the bootstrap code of the menubar
and for each link that the client click in the menubar it will do:
$("#content").load("restrict/linkCliked");
and for each link i will have a linkCliked.jsp
it seems to work, BUT i dont know if this is a good way and secure, because if the use write the uri http://www.localhost.com/restrict/linkCliked, he will get just the linkClicked.jsp, but i want it to render the menubar.jsp too without, is there any solution that i dont have to "include" in each .jsp the menubar?
obs: using VRaptor MVC
Your system seems OK. If you are concerned about the HTML URI being pointed to incorrectly, you can keep your templates in a separate folder than your bootstrap. If your setup is like so:
/var
/var/www
/var/www/html <- your web
You can add a new folder:
/var/www/template
And put linkClicked.jsp and menubar.jsp into that folder, calling them. A user will not be able to type in an address to get to those paths and you won't need to do any funky redirection in your server configuration either.
I have a simple static site, with HTML pages in different directories and often run the site locally by opening a file in a browser.
The problem I'm having, is the browser doesn't recognize which folder is the ROOT, so any relative url that points back to the root folder (href="/about.html") won't function.
For example.
I open this in the browser: file:///X:/DOCS/MySite/Directory1/page.html
In this "page.html" I have this link: href="/about.html"
I want the link to point to: file:///X:/DOCS/MySite/about.html
But instead, it points to: file:///about.html
My question is: how do I tell the browser which folder is the ROOT?...or...is there another way to better run my site locally?
Note: Until now, I have been using lots of up-directory ("../") in my linking structure as a work around, but this is complicated and causing other issues, so being able to link based on the root ("/") would be far easier.
You can work around it with jQuery/JavaScript.
$("[href^='root:']").each(function() {
var newRoot = "http://google.com/";
$(this).attr("href", newRoot+$(this).attr("href").substr(5))
return false;
});
This changes all links begining with root: so that with the code above, href="root:index.html" would turn into href="http://google.com/index.html"
However, this would not be applied with any links you are adding to the page later on using JavaScript.
http://jsfiddle.net/ptarun/5rztY/1/
In cases like the following, links are not rewritten; instead, the browser will perform a full page reload to the original link.
Links that contain target element
Example: link
Absolute links that go to a different domain
Example: link
Links starting with '/' that lead to a different base path when base is defined
Example: link
Can anybody help me with this.
angular docs? what is the meaning of this third point. i also dont understand the solution of normal application on the same directory
When running Angular in the root of a domain, along side perhaps a
normal application in the same directory, the "otherwise" route
handler will try to handle all the URLs, including ones that map to
static files.
To prevent this, you can set your base href for the app to and then prefix links to URLs that should be handled with ..
Now, links to locations, which are not to be routed by Angular, are
not prefixed with . and will not be intercepted by the otherwise rule
in your $routeProvider.