How to load common javascript files in development and on web server not using relative path?

Question

I am a newbie, but I have spend the last 2 days reading so may things on this, and the more I read, the more confusing it gets. Not able to find one simple instruction or example to follow, or a simple and complete answer of this very important problem.

I simply want to include a common javascript file using src=. Then when I copy this tree to the server, I do not want to change anything in the code. I do not want to use relative path, since I do not want to edit the HTML file each time I change the tree layout. I want one solution that works when the tree is on the server, and also when it is locally on my PC during development.

I am not looking for something advanced or fancy. But a very simple solution. All what I want is to be able to use a common javascript file between all the HTML files I have in my tree.

The problem is that I do how to load it, since I can't use something like $HOME or ~ or an environment variable and so on, so that the same code works on my home PC, and also when I upload it to my personal web site.

To make it simple to answer this, I show the layout at my PC:

   C:/public_html/common_files/common.js
   C:/public_html/report/index.htm

On the server, say my site is called www.ABC.com, and I see, when I ftp to it, that there the public_html/ folder where I am supposed to put everything. So on the server, I created the same setup as above

   /public_html/common_files/common.js
   /public_html/report/index.htm

So far so good. Now the hard part.

How do I load common.js from index.htm file? I do not want to use src=../../common_files/common.js, why? Because I might want to change the layout of the tree, and if I move my report to another level, I do not want to edit it and keep changing the path and counting "../../../../.." etc..

I looked at many things, like ResolverURL but could not figure how to use it.

I tried

  <script src="<%=Page.ResolveUrl("~/")%>public_html/common_files/common.js"></script>

But did not work. Remember, this has to work on the PC and on the server.

Here is my current index.htm.

<!DOCTYPE HTML>
<html>
<head>            
   <script src="../common_files/common.js"></script>       
</head>
<body>
        my site    

</body>
</html>

To explain what I am looking for, assume for the moment that $HOME works in this env., which it does not offcourse, then I could have written

<!DOCTYPE HTML>
<html>
<head>            
   <script src="{$HOME}/common_files/common.js"></script>       
</head>
<body>
        my site    

</body>
</html>

and this would have worked on the PC and on the server (well, at least it would work on a PC using linux). But the above is just an example of what I am looking for, on windows, I am not sure where $HOME is or how it is used if it is.

question: How to change the above src to load the common.js so that it works both on the PC and on the server but without using relative path?

Please do not give my more links to see, or partial answers, or ask me to download some commercial software to do this or complicated very advanced commands. This problem is so basic and the solution should be simple to follow.

Just use the same structure on your local web server, I really don't know what your problem is, why should it matter at all, and why on earth you're using absolute filesystem paths — Cjxcz Odjcayrwl
– Cjxcz Odjcayrwl, Commented May 22, 2013 at 6:27
You really should be using relative paths. They fix just this issue. — Intermernet
– Intermernet, Commented May 22, 2013 at 6:29
@Intermernet use relative path and keep counting ../../../../ and each time I change the tree go update each HTML file and fix the path? wonderful — Steve H
– Steve H, Commented May 22, 2013 at 6:31
That's because the solution is to run a local web server for development. Then the relative paths from the local web-root will always be the same as those on the hosting company. — Intermernet
– Intermernet, Commented May 22, 2013 at 6:39
XAMPP is a very large package made up of a few different programs, most of which you don't need (yet). That's why I offered the link to ssws, It's 3.8MB in a single exe file that you can start by double-clicking it. Just put it in a folder, make a sub-folder called www and then copy your site source-tree into www. You then just need to double-click the exe and it will start serving everything out of the www folder at http://localhost/. You can't really do what you want to do without a server, so I've given you the simplest server I know of. — Intermernet
– Intermernet, Commented May 22, 2013 at 9:01

Joseph · Accepted Answer · 2013-05-22 06:32:46Z

4

By the looks of it, you seem to run your files locally on your PC. Try installing a server on your PC instead, to replicate the structure of your server. Something like XAMPP would do. On your server, the root of your domain would be the public_html. On a XAMPP setup, that would be the htdocs folder.

If you move files that much, then consider a location from the root of the domain, like a "styles" and "scripts" folder.

public_html/
 '-- scripts/
 '-- styles/
 '-- everything else

Then load them with a leading /. The leading / means from the root of your domain.

<link href="/styles/your.css" type="text/css">
<script src="/scripts/your.js"></script>

<!-- similar to: -->

<link href="http://yourdomain.com/styles/your.css" type="text/css">
<script src="http://yourdomain.com/scripts/your.js"></script>

edited May 22, 2013 at 6:32

answered May 22, 2013 at 6:27

Joseph

120k31 gold badges186 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steve H Over a year ago

Ok, at least I am following you. So you are saying that I should write <script src="/scripts/your.js"></script> and this will work on the PC and when I upload the files to the server. But for this to work on the PC, I need to install a web server on the PC (XAMPP)? so without installing a web server on the PC, it is not possible to do this?

Intermernet · Accepted Answer · 2013-05-22 09:35:26Z

To prevent the comments turning into a very long conversation, I'll try to answer with some extra information.

Firstly, the term "absolute path" refers to the complete path of the file, as compared with the web root.

When you open files without an independant web server, the web root is the root of the drive you opened it from (in Windows this will usually start with the drive letter, but it can also just start with a slash).

This means, that unless you duplicate your entire drive to the hosting company (bad idea) you will usually need to run a web server to provide a web root that isn't the root of the file-system.

I understand that solutions such as XAMPP (which is awesome) are probably overkill if you only want to serve static pages (html, js, css, images etc.) that don't require any server-side processing, especially if you're running it on an aging laptop!

I've written (in Go) a very simple web server consisting of a single executable, around 3 or 4 MB in size, which will serve everything out of a folder named www on http://localhost by default. It also has command line switches to change the port from the default of 80, and to listen on more than just localhost. See http://github.com/Intermernet/ssws for details.

You can download the 64bit Windows version directly from https://github.com/Intermernet/ssws/blob/master/bin/windows_amd64/ssws_windows_amd64.zip?raw=true . If you require a 32bit version, tell me and I'll compile one for you, upload it and send you the link.

This should be saved somewhere on your local computer (Documents\WebDev or wherever) and then you just need to make a www folder in the same folder, and copy your website files into the www folder.

When you start (double-click) the exe file it will start serving your site files on localhost by default. If you don't want to start the server manually, put it in your Startup folder.

This will allow you to edit the files under the www folder and just refresh the browser to see the changes immediately.

Doing local web development without a local web server is possible, but has, as you've discovered, many pit-falls.

I hope you do manage to get this happening as I'd hate to see you lose faith or confidence in web development. These "sys-admin" tasks aren't really what programmers want to deal with, but sometimes they have to!

Also, when you get to the stage of trying to write dynamic server based code (PHP, Ruby, Python, Node.js etc.), you'll almost certainly need to ditch my simple server, and go with something like XAMPP.

Good luck!

You have a lot of patience, and good information. Also, your post here is a great example of how to properly 'self-promote' something you have created.
@AndrewBarber Thanks! I just remember how much I appreciate good help when I need it, and try to pass it on.

Collectives™ on Stack Overflow

How to load common javascript files in development and on web server not using relative path?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related