After uploading an image with Multer to the uploads folder which is located in the root with server folder and client folder, React cannot access the images in the uploads folder, as the api/upload route returns just a string as /uploads/the_image_name.
I thought I should upload the images to the public folder in the React folder but I found that the convention is using an uploads folder in the root.
Server :
app.use('/uploads', express.static(path.join(__dirname, '/uploads')))
This line should probably solve it:
app.use("/uploads", express.static('uploads'))
You need to actually serve the images that reside in your uploads folder. One way to do this is to use the express static middleware. Assuming your uploads folder resides in your app's root, you'd simply add to your express app:
app.use("/uploads", express.static('uploads'))
Related
I understand that Express needs to be told where to serve static files from using something like server.use(express.static('public'); if all your static files reside in the public folder.
However there are static files in my app which MUST be served from the root of the site e.g.
http://example.com/ads.txt
http://example.com/sitemap.xml
http://example.com/app.webmanifest
I cannot create a separate route for each static file in the root folder because there can be many. When they are bundled up into the dist folder for deployment, they reside in the root of the site alongside the package.json file etc.
How can it be possible to serve the app's homepage at the route of '/' and also static files from that same route? e.g.:
server.use('/', express.static('/client'));
server.get('/', async (req, res) => {
// serve homepage here
})
var app = express()
app.use(express.static('folder_name'))
Or
app.use(express.static(__dirname + '/folder_mame'));
app.set('folder_name', __dirname);
According to official docs:
Serving static files in Express
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.
The function signature is:
express.static(root, [options])
The root argument specifies the root directory from which to serve static assets. For more information on the options argument, see express static.
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
Serving static files Express
At Plesk server there are nodejs and reactjs build on hit url the build run but when we hit the nodejs file url of js files it open directly on browser means nodejs files are not secure.
So, it sounds like you are using express.static(), yet the user is able to fetch your server files that are not meant to go to the client. That apparently means that you've pointed express.static at a directory that contains your server files. Instead, you need to point express.static() at a directory hierarchy that ONLY contains files meant to be sent to the client. That means it has to be a separate directory from your server files and it has to not be above your server files directory.
There are many possible places to put it. Here are a couple ways to organize things:
projectDirectory
serverFiles
server.js
clientFiles
index.html
login.html
Then, when running server code from the serverFiles directory, you would use an express.static() like this:
const path = require('path');
app.use(express.static(path.join(__dirname, "../clientFiles")));
Or, you can do it like this:
projectDirectory
serverFiles
server.js
clientFiles
index.html
login.html
const path = require('path');
app.use(express.static(path.join(__dirname, "clientFiles")));
The idea is that the clientFiles directory hierarchy contains only client-side files and express.static() by default will not allow ../ syntax in the URLs to go above it.
I have created server using nodeJS where I adding dist folder created by webpack.
server.js
app.use(express.static(path.join(__dirname, "dist")))
There is js folder also including all js files.
How can I add also js folder in correct way in server file?
Thanks in advance.
__dirname will return a relative path for your nodejs project.
You can print path.join(__dirname, "dist") in console and make sure that this folder is exists.
I'm trying to serve a vue.js single page app with a node.js server but I'm having an issue with some express middleware.
Basically I'm trying to serve two things right now. My index.html and a dist folder that holds all of my static files. On localhost my index.html is served correctly but I'm getting a GET error for my dist folder and can not find it in the sources tab.
I've used more or less this same line of code for many single page apps before to serve my static assets but for some reason with this set up it's not serving the dist folder.
app.use(express.static(path.join(__dirname, '/dist')));
Anyone with express experience know why this line isn't working?
You are using express.static incorrectly. By default, express.static will serve the content you have INSIDE of that dist folder.
What you want to do is this:
app.use('/dist', express.static(path.join(__dirname, '/dist')));
This will force express to serve those static assets under the '/dist' route.
I want to make express serve files requested as http://localhost/uploads/image.png serve the files out of a dynamic directory (based on environment) process.env.NODE_UPLOAD_DIR which would be something like:
/home/user/data/uploads but the app is served out of ~/www/domain.com.
Is this possible?
I tried this, but it just redirects to homepage in browser when I request it (its an angular app if that makes any difference):
app.use(express.static(path.join(proces.env.NODE_UPLOAD_DIR, 'uploads')));
If you want the "uploads" portion in both the URI and the filesystem path, you need to use it as a prefix:
app.use('/uploads', express.static(
path.join(process.env.NODE_UPLOAD_DIR, 'uploads'))
);