Home > Software engineering >  How to run html file on localhost3000?
How to run html file on localhost3000?

Time:12-05

I have all my .js files and html linked to my server file. but when I lunch localhost3000, I get "cannot get/"

I tried anything I though could be helpful but couldn't fix the problem. Anyone knows how to fix it?

I have this for my server side

const express = require('express');
const app = express();
app.listen(3000, () => console.log('listening at port 3000!'));

app.use(express.static('codefreeze.html'));

and I have this for client side

<!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">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="codefreeze.js"></script>
    <link rel="stylesheet" href="codefreeze.css">
    <link href = "https://fonts.googleapis.com/css?family=Schoolbell&v1" rel="stylesheet">
    <title>DIARY</title>
</head>
<body onl oad="Name()">
    <h1>HELLO!</h1>
    <p>Welcome <span id="name"></span></p>
    <p id="date"></p>

    <script>
        document.getElementById("date").innerHTML = DATE();
    </script>

    <div id="user">

        <label id="lbl1">Passage #1</label><br>
        <textarea id="psg1" rows="10" cols="30"></textarea><br>

    </div>

    <button id="save" onclick="save()">SAVE</button>
    <button id="add" onclick="add()">ADD</button>
    <button id="delete" onclick="del()">DELETE</button>

</body>
</html>

I know something I'm doing is wrong but I cannot seem to find what.

CodePudding user response:

It looks like you are trying to serve the codefreeze.html file using the express.static() middleware, but this middleware is not being used correctly.

The express.static() middleware is used to serve static files, such as images, CSS, and JavaScript files, from a specified directory. It does not serve HTML files directly, so you will need to use a different approach to serve the codefreeze.html file.

To fix this problem, you can use the app.get() method to define a route that will serve the codefreeze.html file when a GET request is sent to the root URL (/). This method takes two arguments: the path of the route (in this case, /) and a callback function that will be called when the route is matched.

Here's an example of how you can use the app.get() method to serve the codefreeze.html file:

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

app.listen(3000, () => console.log("listening at port 3000!"));

// Define a route that will serve the codefreeze.html file
app.get("/", (request, response) => {
  // Use the response.sendFile() method to send the codefreeze.html file
  response.sendFile(__dirname   "/codefreeze.html");
});

CodePudding user response:

app.get("/", (req, res) => {
  response.sendFile(*your file path*);
});

This should work

  • Related