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.
Related
I'm currently using Meteor and trying to learn more about the framework. In the documentation about special directories the following is said about the public/ special directory:
All files inside a top-level directory called public/ are served as-is to the client. When referencing these assets, do not include public/ in the URL, write the URL as if they were all in the top level. For example, reference public/bg.png as <img src='/bg.png' />. This is the best place for favicon.ico, robots.txt, and similar files.
My question is: since I refer to files inside of public/ directory as if they were located in the root folder of my application, what's the different between putting the files in the public/ folder and in the root folder? Or is it just for organization sake?
Also the documentation I quoted above makes some examples using assets (some pngs and favicon.ico) and no JavaScript or HTML files. Am I able to put some JavaScript code in there and then import them in another file by referencing as if this code was located in the root of my app? Or is the public/ directory somewhat made only for assets?
I failed to find any docs that explains what is done to files inside this directory in detail (I only found what I quoted above). So if any documentation of that kind is available it would help a lot!
My question is: since I refer to files inside of public/ directory as if they were located in the root folder of my application, what's the different between putting the files in the public/ folder and in the root folder? Or is it just for organization sake?
Just because you can reference or "import" a file from public/ doesn't mean it functions in the same way to how a normal file import would work. Files located in public gets served as is without being minified/run through the Meteor pipleline. Second, these files are accessible to the client which makes sense given how'd import them without preceding slashes and keep them mostly to serve stuff like favicon and what not.
So in a sense, such files within public are made available within relation to your client bundle/code whilst not being a part of them, get it?
This way of serving assets isn't unique to Meteor, even React has a public directory.
Also the documentation I quoted above makes some examples using assets (some pngs and favicon.ico) and no JavaScript or HTML files. Am I able to put some JavaScript code in there and then import them in another file by referencing as if this code was located in the root of my app? Or is the public/ directory somewhat made only for assets?
AFAIK, you can have files of any type in public but since
It's served as is to the client, meaning it's exposed to the public
It doesn't get minified (i.e being part of the final application build code)
You're advised to not have any of the application code within this directory.
The Public folder is how you serve your static files, when you put a file in your root folder it will not be sent to the client by default and you can't use it in your css, when you put that file (say an image) in your public folder you can use it from the css and refer to it as if it was in your root folder, so if I put a.jpg in the public folder I can use url(/a.jpg) in my css, that won't work if a.jpg is simply in your root folder, that's what the docs mean when they say it's served as if it was the root folder.
unlike in Rails, Meteor initiatives don’t have a rigid document structure and you are quite a whole lot free to prepare your projects as you want. a few folder names but have unique which means, and documents within them will be dealt with in a different way.
consumer
files here will be loaded at the client simplest. files in that folder don’t need things like Meteor.isClient.
server
Loaded on the server best, duh! No need for Meteor.isServer whilst files are in that folder, the client won’t see these files.
public
This directory is for property like photographs. on your initiatives, you reference stuff in the public folder as if they have been in the root folder. as an example, when you have a report: public/nude.jpg, then for your app you include it with .
personal
files only available at the server facet thru the assets API.
checks
documents in there received’t be loaded anywhere and are used for checking out your app.
lib
documents in that folder are loaded earlier than whatever else, which makes it the best listing to vicinity the distinct libraries used on a undertaking.
I have the next web site folder structure (in short):
Root_folder
PHP_folder
index.php
Javascript_folder
app.js
Assets_folder
my_texture.jpg
..."index.php" calls "app.js" with the line:
<?php include '../Javascript_folder/app.js'; ?>
...and "app.js" calls "my_texture.jpg" with the line:
var texture = new THREE.TextureLoader().load("../Assets_folder/my_texture.jpg");
... but "my_texture.jpg" is not found.
If I put "my_texture.jpg" in the same folder of "index.php" and change the javascript path to:
var texture = new THREE.TextureLoader().load("./my_texture.jpg");
... the bitmap is found, but obviously I prefer to keep the assets in their own folder.
How could I find the bitmap respecting my current folder structure?
0K
I resolved this issue opening the Ubuntu terminal (bash/Ubuntu) within the root folder of my site:
Root_folder$ php -S localhost:4000/PHP_folder/index.php
My local server cant find the sub-folder "Assets_folder" files when I execute the server within the sub-folder "Assets_folder/PHP_folder/" with this order:
Root_folder/PHP_folder$ php -S localhost:4000/index.php
In short, using bash terminal/php local server must be initied from the root folder of the site.
Also, I want to warning that some remote servers (like the one that Im paying) doesn't have the .htaccess file.
I have to create and write the .htaccess:
DirectoryIndex PHP_folder/index.php
I am a Spanish speaking self-taught programmer and I hope I did not use incorrect terms
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/">
I am following the code structure generated by yeoman for angular fullstack.
I want to include a script called core.js in file called app.html.
<script src="core.js"></script>
I do not see express.static anywhere in this for serving static files.
I tried using it but it did not help.
It can not locate it and gives 404.
How do I get around this ?
It had happened before as well but I could get around it by using express.static and serving files from location pointed by it.
It did not help this time though.
Update:
I have app.html in folder called Music. In same folder, I have a sub folder called js where I have placed my core.js file that is to be included in app.html. I tried to access it using absolute as well as relative path but did not help and still gives 404.
In angular, the scripts go in the relevant subfolder of /scripts. Either in /controllers, /services/, /directives, etc. You then reference them in your html as such:
<script src="scripts/controllers/core.js"></script>
As for express.static, express is a NodeJS wrapper for HTTP. So that will be the service you create that lives on some Node server remotely. express.static allows the Node server to deliver static content files from the file set at the remote server. It does not go in your angular application.
I am totally new to NodeJS and I wonder what's the difference between those two.
For example, in this project (https://github.com/fikriauliya/hipku), we have index.js and dist/hipku.js. They are similar except the last line:
module.exports = publicMethods; vs return publicMethods;
I guess dist/hipku.js is generated from index.js? How is it generated and why does it need to be generated?
Things in the dist folder are usually the product of building from index.js in this case. You'll notice it gets minified, and that folder would eventually be used on production sites. If you look at the package.json file, you'll notice that index.js is the main file, so if you're doing any edits, that would be the place to do so.
It depends on how you want to use this package, in browser or server side.
server side
index.js is the entry of NPM package. When you do require('hipku'), actually NodeJS locates the file module node_modules/hipku and run index.js ends up with the object adhere to module.exports
browser
Just load dist/hipku.js into your browser by <script>, it will register hipku into your global namespace, then you can use it's API.