在 Replit 上将 html 文件暴露给 express.static 中间件

Question

On Replit, rendering the html file using res.sendFile inside a app.get works perfectly fine, AND I am able to add logos, styles, and js logic file by passing in express.static middleware. BUT when I try to also include the html as a static file passed to express.static middleware, the page does not render.

Here's the replit: https://replit.com/@yanichik/NodeJSandExpressFullCourseFCC#02-express-tutorial/app.js

Renders as expected when html passed in with res.sendFile :

const express = require('express'); const path = require('path');

const app = express();

// setup static & middleware // static -> file that server does NOT have to change app.use(express.static(path.resolve(__dirname, './public')))

app.get('/', (req, res) => { res.sendFile(path.resolve(__dirname, './navbar-app/index.html')) })

app.all('*', (req, res) => { res.status(404).send('Resource not found.') })

app.listen(5000, () => { console.log('Server listening on port 5000...') })

module.exports = app;

Now, DOES NOT render as expected when html passed in with express.static middleware:

const express = require('express'); const path = require('path');

const app = express();

// setup static & middleware // static -> file that server does NOT have to change app.use(express.static(path.resolve(__dirname, './public')))

// app.get('/', (req, res) => { //
res.sendFile(path.resolve(__dirname, './navbar-app/index.html')) // })

app.all('*', (req, res) => { res.status(404).send('Resource not found.') })

app.listen(5000, () => { console.log('Server listening on port 5000...') })

module.exports = app;

Answer 1

You have to specifically request for the statically exposed files like so:

https://baseURL.com/navbar-app/index.html

When you comment out get routes.

If you have your get route uncomented route then

https://baseurl.com

Will return the html file