So my problem is i was originally serving my files i believe static using
app.use(express.static(clientPath));
Since then i realised i need to get some pentameters from the connecting url.
now when i use the connection as below i only get the index.html so there is no css with it or any images so i was wondering how i can send all my files in the client folder?
app.get('/username/:userID/hash/:hash', function (req,res) {
var userDetails = {
username : req.params.userID,
hash : req.params.hash
}
res.sendFile(path.join(__dirname + '/../client/index.html'));
});
Continue to use the static module to serve static files.
Make sure that the URLs you use to reference CSS, images, etc are still correct (since the URL of the HTML document has changed so relative paths will resolve differently).
Related
In the Next JS server-side pages/api, I have a function that makes a post request to a service requiring two files.
I am trying to read these files using the following code:
var fullPhotoPath = process.cwd() + '/public/photos/photo.png'
var photoStream = fs.createReadStream(fullPhotoPath)
This works when I run the app locally, but it fails with file not found error when deployed.
I assume the pathing in server changes because of webpack, though I am not familiar with NextJS.
Things I have tried:
Use relative path
Move photo files to different locations either public or private folders
Deploy in different environments: same error in both Firebase or Vercel hosting.
Workaround with getStaticProps/getServerSideProps: can't send file to API functions since they aren't JSON-able.
Thanks for suggestions.
My question is very simple:
I'd like to read a configuration json file relying on the front end side and not on the server.
The file name and path is hard-coded in the JS file.
I am not the getting its name from some file dialog like in many examples on SO.
I also tried some suggestions to use fetch like:
fetch('./data/properties.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.log(error));
but I always got errors like
exh.js:30 Fetch API cannot load
file:///C:/Users/myusername/WebAppsProjects/BBSimFE/data/properties.json.
URL scheme must be "http" or "https" for CORS request.
I also installed and CORS Chrome extension and turned it on => no help.
I also tried to understand whether I can use FileReader.
For example:
var fr = new FileReader();
fr.readAsText(new File([""], "./data/properties.json"));
fr.onload = function(evt){
alert(fr.result);
}
But this returns nothing.
Also, I am not using node.js so I cannot use require();
Please assist.
Thanks
For security purposes, fetch does not work for file urls, so opening your file in the browser won't work. You should set up a local testing server so XHR requests work properly. Some options include running python -m http.server 8080 in the directory that your files are in then navigating to http://localhost:8080 in the browser, or using a plugin like vscode's live server plugin.
Hey) For security purposes you should not store important configuration info on your frontend side. It should be on server side.
But if you store not important info in your config file, you need to lift a server on localhost, port may be any. Also you need to do your folder with config.json is static on server side. After that you have a static folder with needed for you files, at current case it's config.json. On frontend side you need send
fetch('http://localhost:<your_port>/static/config.json', options);
if you set your static folder is static if no then replace static by your static folder name. You can check if your static file is available just go http://localhost:<your_port>/static route and you should see all files|folders inside static folder.
I'm learning Node.js with Express to get a little server running for studying. I'm getting response code 404 for all requests to files linked in my index.html file (e.g. the .css, .js, and image files).
The code I used to send index.html:
routes.get('/', (req, res) => {
res.sendFile(path.join(__dirname, "/clientSide/index.html"));
})
If I change the path to the whole folder instead:
routes.get('/', (req, res) => {
res.sendFile(path.join(__dirname, "/clientSide"));
})
I get in my browser the path from my hard drive to the folder, but I still can't view the files that way.
The clientSide folder contains index.html, app.js, style.css, and 2 or 3 images, all in the same folder. I can't view any of them.
I changed the filenames and folder name, and checked for capitalization to no avail.
SOLVED
I was using app.use(express.static(path.join(__dirname, "static/")));
With app = express();
That does not work, but using routes.use instead of app.use, while routes = express.Router();, is what solves that
The end
In your first code snippet, when you write:
routes.get('/', (req, res) => {
res.sendFile(path.join(__dirname, "/clientSide/index.html"));
})
You defined a new middleware function for requests to route /; that's what routes.get('/', ...) does. Assuming your server is running on port 3000, route / maps to http://127.0.0.1:3000/. For exactly that URL, and no other, Express executes your provided function, which replies with the the file clientSide/index.html. Thus, when your browser requests http://127.0.0.1:3000/, Express responds correctly.
But you've said nothing about the other files, such as http://127.0.0.1:3000/style.css, which would be route /style.css. You haven't defined any middleware for that route. So Express, not knowing what to do, by default responds with 404 and an error message. Thus, when your browser tries to load http://127.0.0.1:3000/style.css while fetching the resources referenced in index.html, the stylesheet fails to load.
Your second code snippet doesn't fix anything. It really makes things worse, because res.sendFile() can't send folders (how would that even work?) and that generates errors. You still haven't defined routes other than /, and now all your files are inaccessible.
To actually solve the problem, you could, theoretically, tediously define a route for every file, or more cleverly define one route with a route parameter. But serving a static folder with Express is a solved problem. You can simply offload the work to express.static by replacing all your code with:
routes.use(express.static(path.join(__dirname, "clientSide/")));
To go even further, you don't need Express or Node.js for a static file server. Try nginx. And for simple webpages, you don't need a server at all; just double-click index.html and let your browser open it.
I am creating a very simple project that uses JWT. I am serving everything via express, I do not have a frontend and backend. What I want to do is serve SPECIFIC html files based on the user's authorization (serving on https://localhost:3000 entry point server.js)
People keep recommending to use (server.js):
app.use(express.static('static'))
but this of course does not work as I can access ANY of those files by going to https://localhost:3000/whatever.i.want.
I have also tried (server.js):
app.use( '/secret' , authMiddleware, function(req,res){
if(auth){
res.sendFile(__dirname + '/static/secret.html')
}
});
but gives 404s on my stylesheet and script, as well as some weird MIME type error
Refused to execute https://localhost:3000/script.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.
It works if I add:
app.get( '/styles.css' , function(req,res){
res.sendFile(__dirname + '/static/styles.css')
});
app.get( '/script.js' , function(req,res){
res.sendFile(__dirname + '/static/script.js')
});
But do I really have to do this for every single stylesheet and script I use? There has to be a better way!!!
1.) What is the best way that people do this? Specifically, is it possible to create authorized web-apps without using a frontend and serving all your static files from the backend?
2.) Is it necessary that your static directory is publicly accessible? Meaning you can only cast authorization constraints on certain endpoints, then use a script file that calls those endpoints? Which would still allow you to view the base HTML, just not any results of the API calls. Which in effect works but is gross.
File system
server.js
/static
/blah.html
/secret.html
/secret.css
/secret.js
If you want to selectively serve assets from the express server, you could do something like this:
let secrets = ['secrets.html', 'my_diary.html']
app.use((req, res, next) => {
let shouldBeAuthorised = secrets.some(s => req.url.includes(s))
if (shouldBeAuthorized)
// check they are authorized to be served this content
else
// just serve the content, carry on... no need to worry
})
app.use(express.static('static'))
My use of req.url.includes is very shaky, and with a more complicated list of files, could result in you requiring authorization for files that aren't explicitly in the blacklist... but the basic structure of the above code should achieve what you're looking to achieve.
You can solve this by having a folder called public, which you can put all the css, js in that folder. And use static middleware to serve the public folder
app.use(express.static('public'))
Then there is another folder called secret, which you will build routes, validate JWT token and serving html files based on user permission
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.