When adding an external JavaScript library to an Eclipse project should I be adding the .js file (d3.v2.js), or the tarballed master pulled from Github?
Google tells me to Google it. Subsequent Googles remind me of the need to Google it.
Directory tree:
.
|-build
|---classes
|-src
|-WebContent
|---foo.html
|---META-INF
|---WEB-INF
|-----lib
|---d3
|-----d3.v2.js
Relative path from foo.html to d3.v2.js should be: "../d3/d3.v2.js"
But, maybe it's not. I don't know.
Whenever I reference d3.v2.js from foo.html nothing happens. By nothing happens, I mean nothing visually appears in the browser which suggests that d3.js even exists.
To 'add' d3.v2.js to Eclipse I took the following steps:
Foo -> New -> JavaScript Source File -> Advanced -> Link to File in Filesystem -> /home/tyler/workspace/foo/d3/d3.v2.js
Tried 5 different paths. None of them worked (do you have to use relative, absolute?)
src="/home/tyler/workspace/Foo/d3/d3.v2.js"
src="../d3/d3.v2.js"
src="/Foo/d3/d3.v2.js"
src="d3.v2.js"
So, I deleted the reference to d3.v2.js in Eclipse and attempted to add as a library.
Foo -> JavaScript Resources -> Add JavaScript Library -> User Library - Configure User Libraries -> New -> "D3" -> Add .js file -> d3.v2.js (location: /home/tyler/workspace/Snotra/d3
Tried a bunch of paths.
src="d3.v2.js"
src="../d3/d3.v2.js"
src="/Foo/d3/d3.v2.js"
Rinse, repeat.
Any ideas? I know that this is really easy, but I just don't understand the fundamentals of adding JavaScript libraries to Eclipse.
foo.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<title>Tyler J. Fisher</title>
<link rel="stylesheet" href="master.css" />
<script type="text/javascript" src="../d3/d3.v2.js"></script>
</head>
<body>
<section id="foo_view">
<script type="text/javascript">
document.write("test"); <!--Works-->
var dataset[1,2,3,4,5];
d3.select("body").selectAll("p") <!--Doesn't work-->
.data(dataset)
.enter()
.append("p")
.text("RABBLE");
</script>
</section>
</body>
</html>
document.write("test"); works.
The d3.js code doesn't.
So (maybe):
The relative path must be off (or maybe I have to use absolute paths)
Tomcat6 isn't serving JavaScript properly (due to human error)
Eclipse isn't serving JavaScript properly (due to human error)
What Eclipse deploys to Tomcat is what is inside WebContent. If your JS files are not in WebContent, they won't be part of the deployed web app.
You need to understand that what Eclipse shows you is you development, source folders. What is deployed is not this folder, but a directory structure conforming the Java EE specs:
Everything in WebContent is part of the deployed archive
The Java source files are compiled and stored in the WEB-INF/classes of the deployed archive
The non-Java files under a source directory ar copied to the WEB-INF/classes of the deployed archive
All the other files are not part of the deployed archive.
Related
I just set up a very basic Spring Boot Web Application with Thymeleaf, but I can't access my external JS file from the corresponding HTML file of my template and can't figure out why.
My resource folder structure is as follows:
static/
index.html
css/
graph.css
js/
createGraph.js
templates/
visualizeGraph.html
Within my visualizeGraph.html I try to call the createGraph.js using following snippet within the <body> element:
<script th:src="#{/js/createGraph.js}" type="text/javascript" >
</script>
In the <head> element of visualizeGraph.html, I added my stylesheet using following snippet:
<link rel="stylesheet" type="text/css" media="all"
href="/css/graph.css" th:href="#{/css/graph.css}" />
My Spring Boot Web Container runs on Port :8082, so I access my webapplication from localhost:8082 and access the visualizeGraph template from localhost:8082/visualizeGraph
When I check the Developer Console (F12), it throws a 404 for the createGraph.js file, but not for the graph.css file -> it can find the css successfully.
I can even access the css through localhost:8082/css/graph.css but CAN'T access the js-file using localhost:8082/js/createGraph.js (throws a 404 - as expected)
I can't figure, what's the cause for this phenomenon as my application.properties also has no additional parameters for modifying the resource source folder etc.
Okay, this was VERY weird. I found the solution, but I am not sure, whether it's IntelliJ, which was responsible for this problem or something else.
What I did was to edit my <script> element in my HTML file to the following:
<script src="/js/createGraph.js" type="text/javascript" >
</script>
and my intention was solely to try out, whether it would change anything. Somehow, IntelliJ told me, that it was not able to find the path (neither the js folder, nor the createGraph.js file within it) so what it suggested was to create the folder and the file (so I did, using ALT+Enter). What I did afterwards is to just copy the content of my old createGraph.js to the new file and to delete the (very strangely the same named) old folder and file and voila, everything works as expected... Very weird.
You can call your JS files present in resources/static folder like below:
<script type="text/javascript" src="js/script.js"></script>
No need to give the forward slash before the js folder.
below I am attaching screenshot for my code:
Here, I was having images folder inside the static folder so we can directly call that folder.
If you have any further doubts please feel free to visit my github amisham96
I never really thought about it until I switched from webpack to brunch where I saw the following lines in index.html:
<script type="text/javascript">
require('main');
</script>
When you try to simply open up a local html page (even after everything's been built in webpack), it produces errors (SCRIPT5009: SCRIPT5009: 'require' is not defined) and doesn't render correctly, but when you open the page through a dev server it renders correctly.
Why are dev servers required for bundlers? What are the dev servers doing behind the scenes to allow the browser to properly render pages with bundles? Isn't the rendering capability built into the browser itself?
Originally I thought it was putting up a node server to help translate commands such as require(), but the above shows that the line was passed through to the browser. Why does the browser choke on that command when you just open the html file versus when it's delivered via a server?
On a side note everything works fine when the page is delivered via apache as well. If it is some sort of node translation, then how does apache not choke on it?
edit:
The files that show delivered are:
logo.png (just a vue logo)
app.js (the bundled javascript file)
the html file, which looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-webpack-brunch</title>
</head>
<body>
<div id="app"></div>
<script src="/app.js"></script>
<script type="text/javascript">
require('main');
</script>
</body>
</html>
Everything is delivered exactly like that, and that's the extent of the project. If the javascript bundle were including requirejs then it should also work if you just open the file locally as well
Edit 2:
typing require in the console produces the following:
(t,r){null==r&&(r="/");var i=l(t);if(o.call(n,i))return n[i].exports;if(o.call(e,i))return u(i,e[i]);throw new Error("Cannot find module '"+t+"' from '"+r+"'")}:
<script src="/app.js"></script>
You are loading /app.js which will define your require function.
The URL starts with a /.
If you load it from a webserver, the / refers to the root of the site.
If you load it from your local file system, then the / refers to the root of your filesystem (or disk if you are Windows). This will be the wrong place because webpack will not generate it there (you would not want c:\app.js created for every application you built with webpack).
The require keyword is giving errors because it's a made up way to require external files. If you used import, the standard native implementation, it would work out of the box on newer browsers. Bundlers aren't required.
Require came from https://requirejs.org/
They're looking for that word require and, essentially, injecting code at that source path into a built file. It'd be like if I made a injectFile keyword for my InjectFileJS project.
<script type="text/javascript">
injectFile('main');
</script>
That would produce the same error, injectFile is undefined. You would need to run my made up file loader on your web server to parse and transpile the files for that function to exist.
However, if you use import you can get away with not having a bundler as a requirement on new browsers: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
I have followed the simple step-by-step instructions in the Basic Aurelia Project Setup guide. But starting the index.html in a browser results in the config-esnext.js file throwing: "JavaScript runtime error: 'System' is undefined". This is on the first line: System.config({...
The browser's output window has this to say:
"Could not find file 'C:\Users\Bruce\Dropbox\Projects Aurelia\Basic Aurelia Setup\scripts\system.js.map'..Unhandled exception at line 1, column 1 in http://localhost:56477/scripts/config-esnext.js"
Is there some "map" configuration missing from the simple instructions? I am running the project from Visual Studio 2015, configured for Esnext.
The comments to the original question have some good discussion going. But for the sake of providing an "answer" for others to find, here goes.
Without seeing your index.html file, I can't determine exactly what is going on. But the error you're seeing is happening because System isn't defined on the window. This will happen if you haven't loaded up System yet. You need to make sure that your index.html file loads up SystemJS first, then you load up your config file.
You can see in the skeleton project's index.html found here, that system.js is loaded before we bring in the configuration file. Here is an example of a proper index.html using SystemJS.
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app="main">
<span>Loading...</span>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
As an alternative, the CLI helps get a skeleton project up quickly (it doesn't include a navigation example, it is a bare-bones skeleton). It uses RequireJS however, but we have plans to support other module loaders (such as SystemJS) down the road.
I have a web application with python controllers, where output plots are plotted by Bokeh. In my master template.html file I load bokeh-0.9.2.min.css and bokeh-0.9.2.min.js as shown below.
My question is "If I run my web app as a browser app in offline mode, Is it possible to download these two files into my static/jss folder and run it offline?"
<link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.9.2.min.css" type="text/css" />
<script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-0.9.2.min.js"></script>
For anyone who stumbles upon this question, there is now a convenient way to load the Bokeh JS and CSS files inline instead of via CDN. This can be done by setting the mode argument to inline in the io.output_file function:
output_file('plot.html', title='Bokeh Plot', autosave=False, mode='inline', root_dir=None)
Yes - you should be able to download the js and css files from the cdn (using wget or similar) into static/js and static/css files. Then you just have to change the href/src paths to your local directories to load the statics.
I examined the head on an html file produced by a bokeh python script bokeh.plotting.output_file and noticed a reference to lib/site-packages/bokeh/server/static/js/bokeh.min.js
I am testing my website code, and I have the following folders in my working directory:
css
js
img
html (contains index.html)
When I try to bring up my website locally (the "index.html" inside of the html folder), none of the css or js files were found (404 Error).
However, before I made an html folder everything was linked together fine, and my file setup looked like this:
css
js
img
index.html
Also, when I created an "html" folder and put "index.html" inside of it, I changed the html code so that it would refer to the other files appropriately (from what I've seen on various websites):
<link href="../css/my_styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/touch_functionality.js"></script>
<img src="../img/display_photo.jpg" alt="Display Photo">
Additional Information:
I am using a local Apache server to access the "index.html" file, and I have set the DocumentRoot for the VirtualHost I made to the "/html" folder.
Additionally, I thought this may have been a permissions error, but I downloaded Cygwin and I used "chmod 711" on all of the folders in my working directory and I have used "chmod 644" on the "index.html" file inside of the html folder, but the files still wouldn't be found.
I've done my research on this for quite a few hours, but unfortunately I haven't come across a solution for this yet. Any help would be much appreciated, thank you.
Update
If I change the DocumentRoot to where all of my working space directory (instead of html) and place a .php file that simply contains the following line of code:
<?php require("html/index.html"); ?>
where my folders reside so my working directory looking like this:
-css
-js
-img
-html (contains index.html)
-index.php
Everything will work correctly. However, I would have to believe there is a way so that I don't have to do this "work-around" method. Any insight would be incredibly helpful, thanks again.
The reason being is that the web server only allows one to view files in the html directory or below.
Otherwise it will somebody to access any part of your file system.
Would you like that?
To fix this go back to the configuration that works,