How to create relative url usable between different deployments - html

I have a simple aspnet core web app that I run locally at my root http://localhost/ and I'm publishing it to my IIS server which is http://192.168.1.100/MyApp when I click on any links, I'm always brought to the root of the domain and not my sub-app.
I've tried relative urls like href='/home/index', href='home/index' but they work in one place and not another.
Is there a way to accomplish this with either vanilla html or some razor?

Toss a tilde (~) in front of any links you're creating with Razor, which will make the link relative to the app's root.

Related

How to set the root path of static website

Say my local website folder is at /home/me/website. I want tag refs such as "/images" to point to /home/me/website/images but when hosted online I want https://example.com/images.
I tried using a base tag on each page but with or without a base tag locally "/images" is looking for it in the root of my computer (I think). Base tag only seems to work with relative links like "images".
So I'm asking how to define the root of my website locally so that "/" points to my websites folder (so I can debug) but no change when hosted online.
Thanks.
You can use ./images or ../website/images

Using Root-Relative Links With Subdomain

I have inherited a website where the previous developer has coded all links relative to the site root, with a leading backslash in each link:
<link href="/css/file.css" />
<script src="/js/file.js"></script>
This works great for when the site is hosted on a server, as the links will equate to:
http://www.example.com/css/file.css
http://www.example.com/js/file.js
However, I'm trying to get these links to work correctly when called from within a subfolder for local testing. Specifically, I'm using WAMP, and have moved the entire code to a local folder called site at http://localhost:8080/site/.
I can't use the root of localhost, as WAMP stores various files there (including an index that would get overwritten).
The obvious solution, as many posts here on StackOverflow suggest, is to simply use folder-relative links, such as:
<link href="css/file.css" />
<script src="js/file.js"></script>
However, there are literally hundreds of hard-coded root-relative links in various different files, so it would be great having to avoid altering every single one of them if possible.
To avoid having to edit every link, I've tried setting an HTML <base> tag and specifying the folder directly:
<base href="http://localhost:8080/site/">
However, this doesn't seem to work.
Is <base> incompatible with root-relative links?
Is there any way I can easily have all files reference http://localhost:8080/site/ without having to manually edit each one of their preexisting root-relative links? Or will I have to manually update each one to be folder-relative?
Is <base> incompatible with root-relative links?
No, but an absolute path is still an absolute path. It will resolve relative to http://localhost:8080/site/ by dropping /site/.
If you want to use absolute paths and not keep your development sites in subdirectories, then configure your HTTP server to use Virtual Name Hosting.
Add custom hostnames (either in the DNS server for your LAN or in the hosts file on your development system), such as site.localhost, and set the DocumentRoot in a virtual host.
Have you tried using the replace function in your IDE? You can simply replace all the ="/ with =". It'll save you a lot of work and stress.

Simulate absolute web paths on PC

I am working with a web site that uses absolute paths to files but does not specify a domain. A link to /public_html/images/image1.jpg is coded as "/images/image1.jpg", a link to the home page is coded simply as "/". This is done so that the site can be deployed and maintained on multiple domains.
The problem I'm having is with testing the HTML files by opening them on a PC. Because the base location is coded as "/", the browser assumes all the files and directories are in the root of the C drive.
Is there a way to simulate the site on a Windows PC so that all images and CSS are loaded correctly? I thought about creating a new partition and putting everything in the root of that partition but wanted to know if there was an easier way.

Hiding page names in the browser

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.

Is there a way to resolve a HTML URL to the root of a sub-application using ASP.NET MVC?

Using ASP.NET MVC3 with Razor & C#.
Say I have an application that is set up to run as a normal website through IIS, but now I want to run this application as a sub-application under another website. For example, the sub-application will be stored in a folder called "SubApp" off the root of the website (e.g. www.example.com/SubApp/).
If I reference a URL such as "~/Images/picture.gif" within SubApp's razor mark-up/code-behind, it will resolve to the root of SubApp: www.example.com/SubApp/Images/picture.gif
However, if I reference "/Images/picture.gif" through regular HTML (in SubApp), it will resolve to the root of SubApp's parent website: www.example.com/Images/picture.gif
Is there an easy, reliable way to resolve these HTML URLs to the sub-application's root without rewriting them to use Razor? What's the best way to handle URLs under these circumstances?
If you're dealing with pure HTML pages that will be requested directly by a browser, you should use relative URLs. For example, if you have:
/SubApp
/Images
foo.gif
page.html
You should use:
<img src="foo.gif" />
Inside page.html. You can use "../" to go up directories, etc.
Unfortunately, if you're dealing with a more complicated server-side routing scenario, you're going to need to use some kind of server-side code to handle that.