How to read json file located in both folder in meteor? - javascript

I need to read a language json file from both folder but in client side seems not accessible.

you should familiarize yourself with the Meteor application structure, which you can find here:
https://guide.meteor.com/structure.html
there are a couple different ways to do what you want. following the guide, i have such code in the /imports area, in a directory that is served to both client and server. e.g.
/imports/api/foo/foo.json:
{
"foo": "bar",
"baz": "bat"
}
/imports/api/foo/Foo.js:
let fooJson = require('./foo.json');
const FooData = {
foo: fooJson.foo,
baz: fooJson.baz
};
export {FooData};
now, on either client or server, you can import FooData:
import {FooData} from '/imports/api/foo/Foo';
... and FooData is available to your JS code.

In Meteor, any resouce file (jpeg, gif, txt, json, etc.) that you wish to make available to the client side must be placed in top level folder called public.
From the client, you can access this data as if it was in the top level (eg. don't include /public). For example, if you had file data.json in /public, you can access it from the browser at /data.json.
Accessing this folder from the server is a bit trickier. I haven't tried this in the latest 1.4 release, but you used to be able to access the public folder like this.
path.join(__meteor_bootstrap__.serverDir, "../web.browser/app");
With that said, you might want to step back a think about why you need the data. If you don't actually need the data in a literal file, then i would put the json on the server only to simplify accessing it there and then serve it to the client via a meteor method.

Related

Get files and contents of a directory on a web server via JS

I have a directory with an ever-growing list of images, documents (like an FTP), and markdown files.
I was wondering if there was anything in Javascript that would let you point to a directory on a web server, and output a list of the file names.
// example
const directory = '../../files/';
for file in directory {
console.log( file );
}
and then I'd be able to output each file as an item in a list, with a link to the file.
I'd also like to know if there's a way to extract those file's contents if it was something that was simple (a txt or md file).
Everything I've found is for either nodejs or looking at the filesystem directory.
There is no real standard for enumerating the contents of a directory over HTTP.
You'll have to create your own method, server-side. Or, implement something like WebDAV.

How to hook file requests from javascript in Electron to produce the correct path?

I'm creating an Electron app and in the process am trying to use some existing javascript and other files (css and other resources). My code is spread out across a number of packages, each package containing various of these files. Outside of Electron these files would be served from a server which provides a mapping from a flat list of files to the paths to each of these files and I am trying to implement similar "server-side" functionality in Electron's "back end", if there is such a thing.
Since Electron is getting these files from the file:// protocol it is not finding most of these files because everything is resolving relative to the path of the current javascript file and these files do not know about each other and thus cannot specify a hard-coded path.
Is there some mechanism in Electron to hook requests for files so that I can provide the path for it to look at? In my server-side code I do something where I have an object which maps file names to the paths they are in, and I feel like the solution would similarly be to intercept requests and tell Electron where to look for each file.
I found this question but the solution offered there won't work for me because my web app is a bit too dynamic and the requests are coming from deep in the code, not some user interface element I could trap.
You can accomplish this by intercepting the file protocol handler. If you have set up your file mappings into an object like so:
files = {
"file1.js": "/path/to/file1.js",
"file2.js": "/path/to/file2.js",
// etc.
}
Then in the createWindow function you will insert this code immediately after you instantiate the new BrowserWindow:
protocol.interceptFileProtocol("file", (req, cb) => {
var file = req.url.split("/")
file = file[file.length-1]
if (files[file]) {
console.log(`intercepting ${file} => ${files[file]}`)
cb({path:files[file]})
}
})
Note: The protocol references a const that you get from requiring electron, e.g. something like this:
const {app, BrowserWindow, protocol} = require("electron")
This code assumes that the file names are unique and are the only part of the path that matters. So for instance, not matter what path the code thinks "file1.js" is in, in the above example it will be redirected to /path/to/file1.js. If the requested file doesn't exist then the behavior is undefined and probably nothing will load.

Can anyone explain me why we use a public folder to hold css and image folder?

Can anyone explain to me why we use a public folder to hold CSS and images folder?I am new to node js and trying to learn in-depth about it.
As the name suggests "public", it is to serve static files (which don't change) like CSS, JavaScript, images, etc.
We keep these files in the public folder and expose the entire folder through proper means.
Now, whoever requests these files (The browser) which are present in this public folder can access the files . Note that you can have any name and expose it , the "public" is just a proper and common name.
Also, by default your folder will not be accessible. You need to enable that.
From express documentation,
For example, use the following code to serve images, CSS files, and JavaScript files
in a directory named public:
app.use(express.static('public'))
Now, you can load the files that are in the public directory:
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
https://expressjs.com/en/starter/static-files.html Check this for more info, if you use express.
Lets say you don't keep the files in a folder that is not made public or exposed, what will happen is the browser or any client that tries to retrieve the image or CSS will not be able to access. In this case you need to enable separate routes for these files independently and for all the public files, which is time consuming and complex.
Let me give you an example, consider your webpage has an image of cat in an tag in html. What browser does is it will make a get request to get that image from the server, if the image is not in the public folder or there is no route setup to handle this file, the browser will not be able to display the image in the webpage.
Note: This is why private pictures are not saved in a public directory, you better have a dynamic route that handles those pictures. Only authenticated users will be able to access. If you place private pictures in public folder, anyone can access it.
Nodejs is simple a server side scripting language. Its main work is to process data that comes from the client side (i.e HTML) or frontend and store it to database. After the data from the html are processed then it is needed to be sent back to the browser. On sending data from server to the client , the rendered element need to have different styles and js and image as well. These things are to be made available publicly because the browser should be able to access it and process in client side. so for this and images, css, js and docs as well, we use public fonder.
or putting it simple, those static (constant) files which are accessed by the browser (not server) are kept in the public directory.

React JS - Reading environment configurations from external property file

Problem :
I am new to React JS, and looking for an option to read environment configs from an external property file. This problem is more specific for one of my clients, who is looking to have an option to change the environment files dynamically. E.g. change the hostname/port dynamically whenever there is a change. The build process is not owned by my client. I create a minified final package, which my client deploys it on tomcat/web server.
Tried Solution :
With some read-outs, I have configured .env files for different environments and able to successfully read configs from these files. However, these are more of a build process environment files. And, I am trying to find a way to read the configs from an external source after my package is created.
Possible solutions : Here is one possible approach I can think of -
Read external property file using libraries like "properties-reader". I will provide the property file as part of my release bundle (i.e. build folder). My client can change this property file whenever required.
Please suggest if this is the correct approach or is there a better solution to this problem?
A Solution which worked for me !!
1) Create a "config.js" file inside public folder of react project. Sample Content of the
"config.js" file -
window.env = {
API_DOMAIN_ADDR: "http://localhost:8080"
};
2) Refer "config.js" file inside index.html. Code for index.html will be -
<body>
<div id="root"></div>
<script src="%PUBLIC_URL%/config.js"></script>
</body>
3) Now, content of the config.js file will be accessible to react code. Sample code to retrieve the value of config.js variables -
window.env.API_DOMAIN_ADDR
Add this code wherever variable value needs to be accessed. I added this in my service class which is making ajax call.
I would suggest using something like Firebase Realtime DB. I had a similar requirement for pointing the App builds to production or development server APIs for my company. For this, we use to load a Firebase Config and from there the UI used to pick up the host server endpoint.
Advantages:
This saves you from deploying your build folder every time.
This is realtime and less prone to errors.
FirebaseDB is free for small stuff like this.
The second option is to create two environment files which I see you have already done.

NodeJs: Listing the file names and directories present on a remote file server

I have a file server located at say http://myshare.com. This server is used to just host all my files. My file server has a directory named 'myfiles'. So my URI looks something like this: 'http://myshare.com/myfiles'. This location has say 10 files.
First question: How do I get the names of all the files located on this remote file server using Node.js?
Second question: If 'myfiles' directory has sub-directories, how do I traverse all the sub-directories and list all the files in them using Node.js?
Any help would be appreciated. Thanks
I suppose that the files are on the same machine, since you can always mount them with cifs or similar and then it would be the same than local files, making live easier since is OS who manages them instead of your code.
First, you have to familiarize with node's file object anf the function "readdir" either on its async or sync version.
http://nodejs.org/api/fs.html#fs_fs_readdir_path_callback
Then you parse the array of files returned .
For subdirectories you have to code a recursive function that calls itself on every directory. For every file you have to check the fsstats and check the property isDirectory() over the returned object.
getting fsStat object http://nodejs.org/api/fs.html#fs_fs_stat_path_callback
fsStat object http://nodejs.org/api/fs.html#fs_class_fs_stats
As a sample, you can check this answer https://stackoverflow.com/a/5827895/1680125
Hope it helps

Categories

Resources