Basic Node and Express - Serve an HTML File not pass the test

#1

I see the Welcome to Glitch! webpage but the code fails on the test. On console I don’t get any error.

"use strict";

var express = require('express');
var app = express();

app.get("/", (request, response) => response.sendFile(__dirname + "/views/index.html"));

//---------- DO NOT EDIT BELOW THIS LINE --------------------

 module.exports = app;

I tried also the ES5 syntax, same result…

Use the .env File: I don't understand somethings?
#2

Hi @lendoo , I don’t know if it could help, but try to change the names of request and response to the standard req and res. I know that technically it should not matter, but maybe the tests check for those specific names as well :frowning:

1 Like
#3

Hi, I tried also that solution but did not work…

#4

Did you remember to comment out the app.get() you did before this challenge? I.e. the res.send('Hello Express'); challenge.

Edit: I guess you did based on the code you posted in the other thread.

#5

The code you posted works for me, can you please post a link to your Glitch project.

#6

Hi,
This is the Glitch project

and below is the myApp.js file:

"use strict";

var express = require('express');
var app = express();

// --> 7)  Mount the Logger middleware here
app.use((request, response, next) => {
  console.log(`${request.method} ${request.path} - ${request.ip}`);
  next();
});

// --> 11)  Mount the body-parser middleware  here


/** 1) Meet the node console. */
console.log("Hello World");
console.log(process.env.PORT);


/** 2) A first working Express Server */
// app.get("/", (request, response) => response.send("Hello Express"));

/** 3) Serve an HTML file */
const absolutePath = __dirname;
app.get("/", (request, response) => response.sendFile(absolutePath + "/views/index.html"));

/** 4) Serve static assets  */
app.use("/", express.static(absolutePath + "/public"));

/** 5) serve JSON on a specific route */

/** 6) Use the .env file to configure the app */
app.get("/json", (request, response) => {
  let message = "Hello json";
  process.env.MESSAGE_STYLE === "uppercase" ? message = message.toUpperCase() : "";
  response.json({message: message});
});

/** 7) Root-level Middleware - A logger */
//  place it before all the routes !


/** 8) Chaining middleware. A Time server */
app.get("/now", (request, response, next) => {
  request.time = new Date().toString();
  next();
}, (request, response) => {
  response.json({
    time: request.time
  });
});

/** 9)  Get input from client - Route parameters */
app.get("/:word/echo", (request, result) => {
  const { word } = request.params;
  result.json({
    echo: word
  });
});

/** 10) Get input from client - Query parameters */
// /name?first=<firstname>&last=<lastname>
app.get("/name", (request, response) => {
  const firstName = request.query.first;
  const lastName = request.query.last;
  response.json({
    name: `${firstName} ${lastName}`
  });
});
  
/** 11) Get ready for POST Requests - the `body-parser` */
// place it before all the routes !


/** 12) Get data form POST  */



// This would be part of the basic setup of an Express app
// but to allow FCC to run tests, the server is already active
/** app.listen(process.env.PORT || 3000 ); */

//---------- DO NOT EDIT BELOW THIS LINE --------------------

 module.exports = app;
#7

It looks like you didn’t start with the right starter project, so your HTML isn’t right. Go into the views folder and paste in this HTML instead.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>Hello HTML</title>
		<link rel="stylesheet" href="/style.css">
	</head>
	<body>
		<h1>Hello, HTML.</h1>
		<p>Do not use until Challenge #12</p>
     <form action="/name" method="post">
      <label>First Name :</label>
      <input type="text" name="first" value="John"><br>
      <label>Last Name :</label>
      <input type="text" name="last" value="Doe"><br><br>
      <input type="submit" value="Submit">
    </form> 
	</body>
</html>

I’m not sure if anything else in your project is different enough from the starter to cause issues with other challenges. But if you want to make sure you can start a new project based on this link and just copy and paste the code you already have into that project.

1 Like
#8

Yes, thank you… the wrong html file was the problem.

#9

Thank you so much This was the answer after an hour of trial and error. You would think I would have tried this sooner with how frequently FCC is picky with this.

#10