Node Express - requesting any file returns 404 not found-CodePudding

I have deployed an AWS LightSail Node server with Express on it. Starting the app on port 3000 correctly activates app.js and display in the browser the projected string (http://my.ip.address:3000): Welcome to the Whiteboard server! this is the home page on port 3000 with base dir: /opt/bitnami/apache/htdocs/whiteboard

This is the app.js:

const express = require("express");
const app = express();
const port = 3000;

global.__basedir = __dirname;

app.use(express.json());
app.listen(port, () => {
  console.log(`Whiteboard listening on port: ${port}`);
});

app.get("/", (req, res) => {
  res.send(`Welcome to the Whiteboard server! this is the home page on port ${port} with base dir: ${__basedir}`);
});

However, Trying to request any file residing in the root folder (...apache/htdocs/whiteboard) such as:

http://my.ip.address:3000/Jeanette_Blog1.png

http://my.ip.address:3000/index.html

Always returns this message in the browser:

Cannot GET /Jeanette_Blog1.png

Shows as 404 error in the console.

Btw, although the path shows apache, I have actually installed node with needed modules and express - as can be seen in the app.js file up here. The apache is just part of the node image AWS LightSail creates through their partner Bitnami.

What am I missing?

CodePudding user response：

An express server by itself does not serve any files by default. If you want to serve a directory or a directory hierarchy of static files, you have to use express.static() (or something similar) in a route definition.

You should not configure express.static() to point at the same directory that contains your server code because that would enable people to look at your server files. It is a popular convention to make a sub-directory (often called "/public", either below or at the same level as your server files. Here's an example with express.static() configured for a directory at the same level. You would add this line:

app.use(express.static(path.join(__dirname, "../public")));

And, it would all look like this:

const express = require("express");
const app = express();
const path = require('path');
const port = 3000;

global.__basedir = __dirname;

// serve public files    
app.use(express.static(path.join(__dirname, "../public")), {index: false});

app.use(express.json());
app.listen(port, () => {
  console.log(`Whiteboard listening on port: ${port}`);
});

app.get("/", (req, res) => {
  res.send(`Welcome to the Whiteboard server! this is the home page on port ${port} with base dir: ${__basedir}`);
});

Then, you would move your static files such as index.html and Jeanette_Blog1.png to that /public directory. They can be referred to from the browser as URLS such as /index.html and /Jeanette_Blog1.png. The express.static() middleware will check the incoming path to see if it matches a filename in the /public directory and, if so, it will serve it. If it doesn't match a file, then it will continue routing to other route handlers you have defined.