Node.javascript get on local host-CodePudding

I'm trying to follow a video but still can't get when I load by local host in the web browser.

I am get a console log of listening at 3000 but it seems that this line:

"app.use(express.static("/Users/name/Desktop/Weather App/public/app.html"));" is not working.

Any suggestions?

const express = require("express");
const app = express();
app.listen(3000, () => {
    console.log("listening at 3000");
});
app.use(express.static("/Users/name/Desktop/Weather App/public/app.html"));

This the code Im using now.

server.js

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

app.get("/", (req, res) => {
    res.sendFile(
        "/Users/name/Desktop/Weather App/public/app.html"
        // "/Users/name/Desktop/Weather App/public/style.css"
    );
});

// serve any HTML files located in /Users/name/Desktop/Weather App/public
// app.use(express.static("/Users/name/Desktop/Weather App/public"));

app.listen(3000, () => {
    console.log("listening at 3000");
});

app.html

<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
</head>

<body>
  
  <h1>Weather App</h1>
  
  
  
  
  
  <div id ="container">
    <p>
      
      Place: <span id = "places"></span><br/><br/>
      
      Temperature: <span id="temperature"></span>&degC<br/><br/>
      
      Feels like: <span id="feels"></span>&degC<br/><br/>
      
      Minimum Temp: <span id="min"></span>&degC<br/><br/>
      
      Maximum Temp: <span id="max"></span>&degC<br/><br/>
      
      Humidty: <span id="hum"></span>&percnt;<br/> 
      
    </p>    
    <div>
      <input id="inputter" type="text" ></input><br/><br/>
      
      <button id="entButton">Click here for weather forecast</button><br/><br/>
      <button id="geoEnter">Click here for fast weather</button><br/>
    </div>
  </div>
  <div>
    
    
    
    
    
    
  </div>
   <script href="/Users/name/Desktop/Weather App/server.js"></script>
<script src="/Users/name/Desktop/Weather App/public/app.js" ></script>
<link href="/Users/name/Desktop/Weather App/public/style.css" rel="stylesheet" type="text/css"/>


  
</body>
</html>

any suggestions?

CodePudding user response：

If you just want app.html to show when http://localhost:3000 is the URL, then you can do this:

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

app.get("/", (req, res) => {
    res.sendFile("/Users/name/Desktop/Weather App/public/app.html");
});


app.listen(3000, () => {
    console.log("listening at 3000");
});

If you have more files in /Users/name/Desktop/Weather App/public that you want to automatically serve to the client when requested, then you can add this:

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

app.get("/", (req, res) => {
    res.sendFile("/Users/name/Desktop/Weather App/public/app.html");
});

// serve any HTML files located in /Users/name/Desktop/Weather App/public
app.use(express.static("/Users/name/Desktop/Weather App/public"));

app.listen(3000, () => {
    console.log("listening at 3000");
});

So, if styles.css was located in /Users/name/Desktop/Weather App/public, then a URL for /styles.css would automatically serve the file /Users/name/Desktop/Weather App/public/styles.css.

Change the links in your app.html page to this:

<script src="/app.js"></script>
<link href="/style.css" rel="stylesheet" type="text/css"/>

The URLs in these tags need to be relative to the directory specified in your express.static() file and will usually start with a / so they are independent of the containing page URL.

CodePudding user response：

The file system path supplied to express.static is too long.

express.static takes a directory path argument, not a file path. If the get request to the static server endpoint does not include a filename on the end (e.g. ".../app.html) express static middleware looks for a configurable default file name (initially set to index.html) for content to serve.

See also express.static documentation and in particular the index and extensions properties of the options object.