javascript how to get urls to files in folder from server? - javascript

I host a folder "/listings" on my jetty server.
I catch a file with a url to it
url = "/listings/file.json"
So i want to create an url like this for each file in this folder.
How can it be done in javascript?

If you have server-side language on the server, see Ajax and search for the server-side language methods to manage files, then use them to make changes in directories and files.
(with XMLHttpRequest you can run the server-side language file commands block)

Your question isn't very clear to me.
Assuming the files are already on your server and your Javascript runs in a Node environment (and not a browser), you can use Express to serve this directory:
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/listings'));
app.listen(3000);
After that, you can access your files at `http://your_domain.com:3000/listings/file.json
Does this answer your question?

Related

Nuxt SPA without node server

I head to create Nuxt SPA with routing and mb API in future like that:
Backend server (on express or smth else) listen and on request give entire SPA to client.
Now user can use everything on client side (include routing) with no more else requests to backend (mb API requests only)
It means that server should give some .html file with js and css files as SPA and it will work on client side.
I tried to run some commands like nuxt build and nuxt generate
It looks like they return a same result - js files couldn't be found
And index.html file doesn't work properly
After some researching I found a solution
But now I got this:
It can't open the fourth js file in another js file. Path isn't right!
Every time I tried to run it as a static html file and from localhost (and also with using Live Server)
I think I did a lot of crutches and there should be another built-in function or feature that allows us to do what I want
I wrote a lot - if I made a mistake or you didn't get smth - please, ask! I need any help
To test your locally built application, you need to serve all files within the generated /dist folder. You can setup very easily a local web server using Express/Node.js as you already have Node.js installed when running Nuxt. Create a new folder and install express via npm (run npm install express).
Then, copy everything from /dist into /public and create a file server.js:
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/public'));
app.listen(3000);
Run the web server with node server.js and you can access your generated files on http://localhost:3000.

Access a local directory to retrieve files from localhost and write back

I currently have an Angular app (MEAN Stack) that I am running locally on my Windows machine. Being new to Node/Express, I would like to be able to access a local directory from http://localhost:3006 that I have setup within my main app directory, called /myfiles which I am unsure how to do.
What I am unsure is, how do I create an endpoint to access and read these files from localhost within the /myfiles directory and display them within an Angular Material dialog?
Just not sure what I need to do as part of Express side (setting up the route) and then the Angular side (using HttpClient) to display.
Further to the above, I will also need to write back to the /myfiles directory, where I will need to perform a copy command based on a file selection within Angular.
You'll want to create an endpoint in Express that your Angular app can call to be served the files.
I'll assume the files you want to read and send are JSON files. Here's a really simple example of an endpoint that you can visit that will return the file to your frontend.
In your Angular code you will make a get call to /myfile
var fs = require("fs");
app.get('/myFile', (req, res) => {
var filepath = __dirname + '/myfiles/thefile.json';
var file = fs.readFileSync(filepath, encoding);
res.json(JSON.parse(file));
});
Then in Angular, you'll have something like
http.get('/myfile').subscribe( (data) => { console.log("The data is: ", data) });
ADDED
The example I provided above was just the basics to answer your question. Ideally, in production for file paths, you should the Node path library which 'knows' how to behave in different environments and file systems.

Locating files using Node.js and Socket.io

I am having trouble with local includes on the client side using Node.js and Socket.io. This may be to my PHP/Apache mindset I have had for file requests for most of my life.
On my server, I load the page likewise:
var express = require("express");
var app = express();
var path = require("path");
var server = require("http").createServer(app);
var io = require("socket.io")(server);
var mysql = require("mysql");
var port = process.env.PORT;
var ip = process.env.IP;
app.use(express.static(__dirname + "/client"));
//start opening socket connection handlers ...
And my files are organized likewise:
games
libraries
bigInt
threejs
etc...
version_1
client
index.html
index.js
index.css
server.js
database.sql
version_2
version_3
etc...
Depending which version I want to run, I open that version's directory and run its server.js file. The line redirects the client to /client/index.html with the line app.use(express.static(__dirname + "/client")). But now only files that are in the client folder are reachable by <script></script> or <link> tags but not those libraries in the libraries folder that I use across versions.
How do I change my code to be able to access files inside the libraries folder from /version_x/client/index.html while still directing the client to proper html file?
Note: Due to this issue, I have been forced to use only libraries with supported CDNs for the past couple weeks I have been learning Node.js.
Add the following line right after var ip = process.env.IP;:
app.use('/libraries', express.static(path.join(__dirname, '..', 'libraries'));
What this does is adding a new route to your application server. All your files inside your /games/libraries folder are now accessible via /libraries.
How does it work? Your express router uses different middlewares based on the provided paths. This line tells the router, to use the static middleware and serve files from ../libraries when a HTTP Request for anything under /libraries comes in.
You can serve more folders with express.static
//Serve Client Folder
app.use(express.static(__dirname + "/client"));
//Server External Libraries Folder
app.use('/libs', express.static(__dirname + "/../libraries"));
//Ex: <script src="libs/threejs/threejs.js">
//Will load libraries/threejs/threejs.js

How can I make script files available to the client in a Node.js Express app?

I'm building a Node.js Express app. When my client Html file tries to get a .js file from the server (when running <script src="somefolder/script.js"></script>), it can't access it. What's the common way to make script files accessible to the client in an Express app?
From the Express API:
Serve static content for the app from the "public" directory in the application directory:
app.use(express.static(__dirname + '/public'));
For example above assume that you will have the following "./public" folder structure:
/public
/javascripts
/custom.js
/stylesheets
/style.css
...
In this case to get script, or whatever you want you will need to write the following url: http://path_to_the_site/javascripts/custom.js.
Note that you don't need to write "public" before "javascripts".

Loading scripts in a Node app

This is my folder structure:
- getable_challenge
- node_modules
- stuff
- main.html
- main.js
- backend.js
- README.md
I want to load main.js from within main.html. Previously I had been accessing the page using the URL of file:///Users/adamzerner/code/getable_challenge/main.html, and a simple <script src="main.js"></script> allowed me to load the script.
But then I set up a Node server, at localhost:3000, and now it won't load the script. It's trying to load localhost:3000/main.js, which presumably is the wrong path. I'm not sure how to structure this... what should I do?
Server code (essentially)
var express = require('express');
var app = express();
app.listen(3000);
When you use the "file" protocol like that you aren't even using the web app to serve the script, you are directly accessing it on the local file system. That works fine when you are just running your app on your local machine but it completely breaks when you try to run it as a real app since the browser will have no idea where "file:///..." is, or even have permission to access it.
You need to put the client side scripts into a separate directory, usually named 'public', and then make your application aware of it. If you're using express you would do this:
app.use(express.static(__dirname + '/public'));
You want to put your statically served scripts ("public") into a separate directory so as to control access by your clients. If you just put them into the main directory and made the main directory accessible you could expose all your other files to public view, such as config files that sometimes contain passwords.
It also makes your structure much cleaner.
Try adding this line after var app
app.use(express.static(__dirname));
This should make your resources that are within your servers folder accessible. the var __dirname is the path to where your server is executed.

Categories