We Keep Coding

How to find full path when sending a file over a post request from Next JS functions (server)?

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.

JavaScript: How to read a local file (specifically a json file)?

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.

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.

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.

Serving files in heroku node js application

I am new to node. I have created and successfully tested the node app in Heroku. My folder structure is something like this .
app.js ( the server side socket.iofile).
index.html (publicly available file).
when i access the app through the URL from Heroku.
If i access the app.js file like appname.herokuapp.com/app.js i can access the file. Is any way to prevent accessing this server file ?
Regards
Harilal

Well, probably you are using express.static() due to which it can access any static file from your directory.Anyways, you can create a route for app.js:
var app=express();
app.use(app.router); //this will make sure that node.js will check for a route before checking for app.js file and displaying it.
app.use(express.static(__dirname+'/directoryPath'));
//now set the route for app.js
app.get('/app.js',function(req,res){
//what-ever you want should happen when u go to appname.herokuapp.com/app.js
});

Actually am not using the "express".
My code is something like this
http://pastebin.com/7BcZZsMk
My folder structure is like the following:
app
----css
--------style.css
----images
--------cup.png
--------tree.png
----app.js
----index.html