Express static works for index.html but not other static pages-CodePudding

I'm setting up a basic server in NodeJS, and for some reason, when telling Express to use the public folder for static files, only index.html is successfully loaded. So, my / route works, but /pageone and /pagetwo routes return

Error: ENOENT: no such file or directory, stat '/page1.html'

Here's my file structure:

.
├── public
│   ├── index.html
│   └── client.js
|   └── page1.html
|   └── page2.html
├── app.js

Here are my files:

app.js

const express = require('express')
const app = express()
app.use(express.static('public'))

app.get('/', function(req, res) {
    res.sendFile('/index.html');
});

app.get('/pageone', function(req, res) {
    res.sendFile('/page1.html');
});

app.get('/pagetwo', function(req, res) {
    res.sendFile('/page2.html');
});

app.listen('8000', function() {
    console.log("Server is running on port 8000.")
})

client.js

$(function main() {
    $('#page-one-b').click(function() {
        window.location.href = '/pageone'
    }); 

    $('#page-two-b').click(function() {
        window.location.href = '/pagetwo'
    }); 
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>
<body>
    <h1>Welcome home!</h1>
    <p>This is the home page</p>
    <button id="page-one-b">Page 1 button</button>
    <button id="page-two-b">Page 2 button</button>
</body>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"
            integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem O00="
            crossorigin="anonymous"></script>
<script type="text/javascript" src="client.js"></script>
</html>

page1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page 1</title>
</head>
<body>
    <p>Page 1 text</p>
</body>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"
            integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem O00="
            crossorigin="anonymous"></script>
<script type="text/javascript" src="client.js"></script>
</html>

page2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page 2</title>
</head>
<body>
    <p>Page 2 text</p>
</body>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"
            integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem O00="
            crossorigin="anonymous"></script>
<script type="text/javascript" src="client.js"></script>
</html>

CodePudding user response：

sendFile is for sending files, it doesn't work with static pages.

try

const express = require('express')
const app = express()

app.get('/', function(req, res) {
res.sendFile(__dirname   '/public/index.html');
});

app.get('/pageone', function(req, res) {
res.sendFile(__dirname   '/public/page1.html');
});

app.get('/pagetwo', function(req, res) {
res.sendFile(__dirname   '/public/page2.html');
});

app.listen('8000', function() {
console.log("Server is running on port 8000.")
})