how to reference js file not in project root

I want to keep jquery.js in one place only instead of having the file in the root of every project.
I have a /scripts folder in the main workspace folder ( /WebstormProjects/scripts).

So I have a project here:
/WebstormProjects/myJqueryPrj

In my html file I do this:
<script type="text/javascript" src="../scripts/jquery.js"></script>

When I debug this in Chrome with a simple little tutorial I found on youtube, the jquery lib is not invoked.

The only way I can get the jquery file to work is by putting jquery.js directly in the /WebstormProjects/myJqueryPrj folder.

I also tried adding /WebstormProjects/scripts as an additional content root, no luck.

I KNOW this has to be the most common thing in the world to keep from having copies of .js files strewn about in every project root folder. (right?)

I'm a javascript newb, BTW.

Thanks in advance.

Here's the little demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
    <title>Demo</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
<h1>Heading one</h1>
<p>This is just some text for heading 1</p>

<h1>Heading two</h1>
<p>This is just some text for heading 2</p>

<h1>Heading three</h1>
<p>This is just some text for heading 3</p>

<script type="text/javascript" src="../scripts/jquery.js"></script>

</body>

</html>

7 comments
Comment actions Permalink

Hi there,

Web server is unable to serve files that are outside of the website root (unless you configure your web server to do that, e.g. "alias" in Apache, "virtual folder" in IIS etc)

Consider using symbolic links -- web server should follow them (depends on web server software and configuration, but all should do that by default)

0
Comment actions Permalink

Hi, thanks for replying.

My question is really specific to trying to use Webstorm IDE and not put copies of all the js libs files in every project folder.
Is that not possible? I can't just point to them with a relative path?

0
Comment actions Permalink
My question is really specific to trying to use Webstorm IDE and not put copies of all the js libs files in every project folder.

Where did I said "copies"?

Is that not possible? I can't just point to them with a relative path?

Check again first paragraph of my original answer.

0
Comment actions Permalink

Did I say you said "copies"? I didn't say you said anything.

I am trying to understand how to use the Webstorm IDE, and your first paragraph is telling about configuring Apache or IIS. Sorry, I just didn't understand the relevance.

Then you say try symbolic links with nothing about it.

Are you intending to be helpful? With 3800 posts you must know a lot, but I found your answer to be obtuse and your follow-up to be rude.

0
Comment actions Permalink

Yes, you can reference file in IDE that is outside of the project:

  • Additional Content Root (Settings | Directories) -- folder will be treated as part of the project so you can do all operations as with main content root
  • Libraries (Settings JavaScript | Libraries) -- for reference purposes ONLY (e.g. code completion -- file cannot be edited, no checking for errors etc)


If you do this via Additional Content Root, then you will have to use src="jquery.js" insetad of src="../scripts/jquery.js" as jquery.js is now part of the project.


But I still do not see how this should help you with your idea. You have:

/WebstormProjects/scripts/jquery.js

/WebstormProjects/myJqueryPrj/index.html

<script type="text/javascript" src="../scripts/jquery.js"></script>


If you open your index.html in web browser (e.g. http://example.com/index.html ), the jquery.js will not be loaded as technically it is still *outside* of the website root (e.g. http://example.com/../scripts/jquery.js ) and web server will be unable to serve such resource (because web server software itself cannot serve files outside the website root -- for obvious security reasons).

This is where symbolic links could be very useful. Instead of having a copy of actual file in each project, you just create a symbolic link to the actual file. Such link will be treated as ordinary file/folder (by all software (IDE, webserver etc) unless special treatment is done by the actual software). If actual file will be changed, the changes will be seen in all linked places as well. Since symbolic link is seen as ordinary file/folder by web server, it will work (actual file, that is located outside of the website root, will be served as if it would be located within website root).

0
Comment actions Permalink

I am not considering the deployment situation right now, I haven't gotten that far :)

I have taken your information about adding the additional content root and noted that no path spec is needed when going that route. I had already set up the /scripts folder as additional content root, but was trying to point to it with a relative path spec.

Concering getting along in the IDE with js files in one place, I thought that ../ would point up to /WebstormProjects, then /scripts would point to where the js files were.

So now I have in the html file:
<script type="text/javascript" src="jquery.js"></script>

and /WebstormProjects/scripts is defined an additional content root.
and I deleted jquery.js from the project root.

The jquery code is still not invoked for the little example I have.

0
Comment actions Permalink

Concering getting along in the IDE with js files in one place, I thought that ../ would point up to /WebstormProjects, then /scripts would point to where the js files were.

This will NOT work.

The jquery code is still not invoked for the little example I have

What do you mena by that? Please explain (screenshots or something).

If question is about that IDE still complains about "cannot resolve file..." .. then add "/" before file name:

script type="text/javascript" src="/jquery.js"></script>


screen01.png

0

Please sign in to leave a comment.