Node.javascript get on local host

Question

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?

https://stackoverflow.com/questions/44651402/serve-html-with-express — evolutionxbox, Jun 27 '22 at 23:23
Failed to load resource: the server responded with a status of 404 (Not Found) — Legible_Jibberish, Jun 28 '22 at 00:51

score 0 · Answer 1 · answered Jun 27 '22 at 23:59

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.

jfriend00 · Accepted Answer · 2022-06-28T01:53:34.380

0

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.

edited Jun 28 '22 at 01:53

answered Jun 28 '22 at 00:03

jfriend00

683,504
96
985
979

thanks for that but css file and js logic file are not being run with app.html. Any suggestions? – Legible_Jibberish Jun 28 '22 at 01:36
@Legible_Jibberish - Show us the HTML for the links to your CSS and JS files form inside of `app.html` and tell us where those files are in your file system. We need to see the exact links specified in your HTML and know exactly where those files are in your server-side file system. – jfriend00 Jun 28 '22 at 01:39
@Legible_Jibberish - See what I added to the end of my answer. – jfriend00 Jun 28 '22 at 01:48
@Legible_Jibberish - You should remove server.js from your HTML. That is presumably run by nodejs on the server and does not run in the browser. – jfriend00 Jun 28 '22 at 01:52
solved. brilliant. Thanks. I will keep that in mind for the future :) – Legible_Jibberish Jun 28 '22 at 01:53

Node.javascript get on local host

2 Answers2