I am currently working on my first little Node/Express project, and I am having difficulties with the express.static function. Unfortunately, I couldn't find any solution for my issue amongst all the other threads about this topic on here. I have also gone through all the docs I could find. It seems that I am still not getting any further.
Here's my set up:
I have added a "/public" folder to my project dir. In "public" I have "documentation.html". The structure looks like this:
-project_folder
--public
----documentation
It is the "documentation.html" I would like to serve for the endpoint "/documentation".
By now I have tried the following:
The example from the Express docs:
app.use(express.static('public'));
With the endpoint "/documentation" I get a status: 301, moved permanently, type: document/redirect, and initiator: other for "documentation, and a status: 404, not found and type: document and initiator: :8080/documentation, redirect for "documentation/".
A suggestion to add a "/" before the "public":
app.use(express.static('/public'));
With the endpoint "/documentation" I get a status: 301, moved permanently, type: document/redirect, and initiator: other for "documentation, and a status: 404, not found and type: document and initiator: :8080/documentation, redirect for "documentation/".
The recommended way from the Express docs (I did require path for this one):
app.use(express.static(path.join(__dirname, 'public')));
With the endpoint "/documentation" I get a status: 301, moved permanently, type: document/redirect, and initiator: other for "documentation, and a status: 404, not found and type: document and initiator: :8080/documentation, redirect for "documentation/".
The endpoint "/movies" does return a JSON object, and the endpoint "/" does return "Some text".
Another thing to mention: I had an index.html within the "public" folder before. With
app.use(express.static('public'));
and the endpoint "/documentation" I received the "index.html" file.
Here is the code:
//Requiring Express
const express = require('express');
//Setting Express to var "app"
const app = express();
let topMovies = [{ title: '', director: '' }, { title: '', director: '' }, { title: '', director: '' }, { title: 'Die Hard', director: '' }, { title: '', director: '' }, { title: '', director: '' }, { title: '', director: '' }, { title: '', director: '' }, { title: '', director: '' }, { title: '', director: '' }];
//GET requests
app.get('/movies', (req, res) => {
res.json(topMovies);
});
app.get('/', (req, res) => {
res.send('Some text')
});
//Serving static files from "public" folder using express "static" function
app.use(express.static('public'));
//Server PORT
app.listen(8080, () => {
console.log('Server running...');
});
As mentioned, this is my first time working with Node/Express. I am quite confident that I checked all the docs and threads with similar issues before creating this post. However, I apologize in advance if I overlooked something at this point.
Edit/Addition:
I have been able to run another test, which however, confuses my beginner brain even more. Here is the code:
const express = require('express');
const app = express();
const PORT = 3000;
app.use(express.static('public'));
let topMovies = [{ name: 'test' }, { name: 'testone' }, { name: 'testtwo' }];
app.get('/', (req, res) => {
res.send('Hello World');
});
app.get('/movies', (req, res) => {
res.json(topMovies);
});
app.listen(PORT, () => console.log(`Server listening on port: ${PORT}`));
I used this folder structure:
project_root index.js public index.html
With this code and folder structure, I can get the static files served on "localhost:3000".
What becomes clear to me is:
- The file name of "index.html" in /public works, while "documentation.html" doesn't.
- "/movies" still returns the JSON object
- The folder structure is the same in both examples.
- I simply changed the PORT # and how the PORT was "referenced" in app.listen
- I just don't know what the f I'm doing.
2条答案
按热度按时间but5z9lq1#
关键问题是
GET /
的API调用冲突,绑定点有两个,一是返回'Some Text',二是返回静态文件。要解决此问题,您应该通过删除
app.get('/',...
或为静态文件添加另一个前缀来分隔这些端点:app.use('/ui', express.static('public'));
要提供您的文档,只需将
document.html
重命名为index.html
并绑定目录:app.use('/document', express.static('document'));
最佳实践
强烈建议为所有API调用添加默认前缀。
第一个
zed5wv102#
好吧,经过大量的尝试和错误,我找到了答案。以下是对我有效的方法:
文件夹结构:
现在,我获得了端点“/documentation.html”的“documentation.html”,并且其他端点也正确返回。
结论:我有正确的文件夹结构,但我需要将“__dirname”添加到express.static根目录,并通过添加“/"使“public”文件夹成为路径。