Website on server is treating file paths differently than local version - javascript

using Localhost, my HTML/CSS/JQuery stack website works perfectly fine, however, when uploading to a server, things break. Specifically, the src paths from within the JavaScript files. After being uploaded, the index HTML can find the appropriate JS files through the script tags. However, from things go wrong from within those JS files that are linked...
Keeping things big picture, I have JS files that use paths to certain imgs, or other files. And those JS files are stored from within folders. So you have
.
├── index.html
|
├── js
│ └── components
│ └── functions.js
└── img
└── circle.jpg
In index.html, functions.js is called. From within functions.js I have a path to a circle.jpg for example. On localhost the path is "../../img/circle.jpg" because it treats components folder as the current working directory (cwd) "you are in components folder working in the functions.js file, now go out and into img folder"
However, on the server, cwd is the root folder. I guess that is because function.js is called from index.html and because index.html is in the root so it says "to get to circle.jpg you have to go "img/circle.jpg"
WHY? This doesn't make sense, to have it work on the server I now have to change all my file paths from within the JS files. This apparently isn't an issue on the src paths in the HTML, because it recognizes the tags and runs the Javascript. It breaks when trying to find the imgs based on the paths you give them. And it can't find the images in the JS based on those paths because of the above reasons. Instead of changing all the paths in the javascript how can I fix the imminent issue of the server treating the paths differently than the local version?

Add a <base href=""> tag in the head section of index.html
<head>
<base href="/">
<!-- other head items -->
</head>
If your index.html is the root path of the domain (like http://someurl.com/index.html), above should work. Or if the index.html is in a subfolder, provide the subfolder path as the href value. like,
<base href="/subfolder/">

Related

Can I use php-cgi to serve an HTML which refers to CSS/JS files from the parent directory?

tl;dr
My understanding is that php -S localhost:1234 -t some-dir serves the page some-dir/index.html at localhost:1234, expecting that CSS and JavaScript (and other files) that the page requires are in some-dir/., not in some-dir/../..
How can I start a server that serves some-dir/index.html and looks for the required files in some-dir/../..
Long version
I have a directory structure like this:
index.html
css
├── some.css
├── style.css
└── sheets.css
docs
├── index.html
└── a lot of other stuff.html
js
├── some.js
├── javascript.js
└── files.js
And obviously anything referred to from within the main index.html is referred via a path containing no ../.
On the other hand, docs/index.html is automatically generated by KSS, a library for documenting CSS modules, and given it position in the tree, when it refers to the very same files as the main index.html, it does so by prepending ../ to the paths. For instance, if the main index.html has
<script type="text/javascript" src="js/some-script.js"></script>
docs/index.html has
<script src="../js/some-script.js"></script>
Now, for the purpose of debugging JavaScript code launched upon user interactions with docs/index.html, I start the server like this
php -S localhost:1234 -t docs
because docs is the directory where the index.html is, that I want the server to present; but the problem is that the server looks for the files (referenced by the HTML) in the wrong directory, kind of like it strips off ../, so I get errors like the following:
GET http://localhost:1234/css/main.css net::ERR_ABORTED 404 (Not Found) section-containers.html:12
GET http://localhost:1234/js/swipeable-container.js net::ERR_ABORTED 404 (Not Found) section-containers.html:412
How can I serve an index.html which uses scripts and stylesheets (are they all together called assets?) from a parent directory?

embed local asciinema file in html

I'm trying to embed a local asciinema session in html. here is my directory layout:
$ tree
.
├── asciinema
│   └── demo.cast
├── css
│   └── asciinema-player.css
├── index.html
├── js
│   └── asciinema-player.js
└── makefile
And here is my html file, just like it says in here:
$ cat index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/asciinema-player.css" />
</head>
<body>
ABCDE
<asciinema-player src="/asciinema/demo.cast"></asciinema-player>
<script src="/js/asciinema-player.js"></script>
</body>
</html>
When I drag-and-drop this file to Mozilla, it only shows ABCDE
The main problem is that you're trying to run a script that uses XMLHttpRequest as a local HTML file in your browser. If you open your browser console, you'll see that it gives an error trying to find the files in all your src/href tags. You could fix that by removing the starting / from every src/href and the player would load, but then you'd run into problems with CORS when the script tries to load your cast file.
The solution would be to use an HTTP server to host your cast files, so you could reference them directly by their full server path, like http://localhost:3000/asciinema/demo.cast. Or you could just use an external URL for a cast file, providing the external website has no CORS enabled. Example:
<asciinema-player src="https://asciinema.org/a/28307.cast"></asciinema-player>
Now which HTTP server you choose is on you, there are many many really simple servers made in every programming language possible. If you're familiar with Node/JavaScript, then http-server would do. If you're familiar with Python then simplehttpserver would also do. Try whichever one you're comfortable with.
Another "solution" is to disable CORS in your browser. But then you're just risking yourself and that's also just a cheap hack.
TL;DR: you can't load local cast files within local HTML files because of CORS. You need to host your casts on a local or external HTTP server.
There is a workaround, though, if you really want to have it all local on your PC. And that is by embedding the asciicast file into the HTML page by inlining it into the src attribute. You can do that by converting the demo.cast file, which is a JSON file, into a single Base64 encoded line.
Convert the demo.cast file with base64 -w 0 demo.cast. You will need to capture that output somehow so you can then paste it into the HTML file. For example pipe it into a text file, or directly append it at the end of the HTML file and then work the rest of the HTML around it.
Then write your asciinema-player line like so:
<asciinema-player src="data:application/json;base64,BASE_64_ENCODED_STRING_HERE" />
For example:
<asciinema-player src="data:application/json;base64,eyJ2ZXJzaW9uIjogMiwgIndpZHRoIjogMTQwL" />

Problem pubishing in JBOSS, links to files (images, subpages) HTML with aboslute path redirect to / instead APP

I got an EAR file, I try to deploy and It deploys fine, without error. The problem is the following:
All the ccs files, images, files, etc are using absolute paths in the HTML files, (the HTML files are being generated through an external program so change to relative paths is not an option), so the styles are not being loaded, the links to other pages don't work, etc.
An example to clarity:
I have the ear deployed in "localhost:8080/app, the index.html file loads but inside the file, I try to use the link to the page2.html, and the path is localhost:8080/page2.html instead "localhost:8080/app/page2.html".
The browser says "the page cannot be loaded"
How can I fix this without change the paths to relative? I have the context root of application.xml with "app" and the welcome file of web.xml inside the war file with "index.html".
the structure is the following:
file.ear
meta-inf
file.war
web-inf
index.html
css folder
pageX.html
I beg for help.
Thanks in advance.
First you need to know understand, how file system works in web.
<link rel="stylesheet" href="slick.css"> // file present in same folder
<link rel="stylesheet" href="css/slick-theme.css"> // file present in css folder of current folder
<link rel="stylesheet" href="/css/slick-theme.css"> // file present in the css folder at the root directory of the current web
<link rel="stylesheet" href="../slick-theme.css"> // file present at one level up the current folder
Since all your files path starts with /, server tries to find it relative to the root directory.
All you need is to deploy your app as root app without any context-root.
This will require 2 things:
1)
<context-root>/</context-root>
2) configuration change at server level, remove default content mapping, try to find
<location name="/" handler="welcome-content"/>
(may vary in your jboss version) and comment it.
Attaching screenshot of your working app:
PS: Delete your EAR from repo or make it private
Deploy your app as ROOT.war
You might also need to tweak your server config to allow this if you keep seeing the server welcome page
If you can't bind the app to / and you can't change the file paths referenced in the app, then the only option would be to use a proxy infront of the sever, something like nginx, so you make the requests to the proxy and it passes the request on to http://appserver/app/

Load a webworker based on the relative path of the caller when the caller is embedded in a Html file

I have 2 javascript files. One is named "index.js" and the other "worker.js".
index.js will be embedded into all the pages of my website (meaning different hierarchy's). I need to call "worker.js" from index.js when any of these pages are loaded.
The problem is index.js thinks its own path is the path of the page it's embedded in. So if my file directory looks like this:
index.html
├───JS
│ ├───index.js
│ ├───worker.js
├───otherPage
│ ├───newPage.html
When I'm in the "index.html" file I can use the path "JS/worker.js" to load the worker from index.js.
However, when I'm in "newPage.html" I would need to use the path "../JS/worker.js" to load the worker.
This means each time "index.js" is placed on a page it would have to be edited to find the location of worker.js. How can I avoid this and use the local path of "index.js" to resolve the path of worker.js against?

d3.csv unable to go up one directory

I am trying to reference a file located in the parent folder using d3.csv and I am not able to find the correct syntax.
My folder structure is as follows:
root
└── js
├── data.csv
└── myGraph.js
Inside the js folder I have myGraph.js. In this file I have the following piece of code:
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
If I place my data.csv inside the js folder everything works fine. However, if I move the data.csv file up in the root folder
root
├── data.csv
└── js
└── myGraph.js
and change the code to this then it stops working:
d3.csv("/../data.csv", function(error, data)
I have also tried:
d3.csv("../data.csv", function(error, data)
Does anyone know what I am doing wrong and what the correct syntax is? Many thanks.
Robert - There are a couple of things to work through to get this to work:
1) Due to browser security models, you cannot directly reference/load files on your local machine from the browser by directly specifying either an absolute or relative path to files in your local directories. You have to use a local webserver to serve up your files and make them accessible to the browser (or you upload them somewhere where you have a URL which you can specify in the d3.csv call... but that would be tedious).
2) Usually, you can run basic HTTP servers in the directory that contains your .js and .html files. For example, if you have Python 3 installed system wide, you can start an HTTP server in a directory from the commandline using python -m http.server. Then you can access your site at http://localhost:8000 Unfortunately, this basic server only serves files within the directory it is launched in and doesn't allow for relative path references to other files outside the directory it was launched in. To achieve this, you would need to run a more capable/flexible local webserver that can be setup to allow relative path based referencing of files across a bunch of folders.
It is a bit tedious, but it makes sense why browsers are designed to not allow direct access to local files.

Categories

Resources