I can not get a page to render in node.js, see title for description. (Note, the “customer-list” page worked 3 times before and displayed correctly. After saving all changes and and refreshing local host 3000, everything still worked correctly. However, upon closing my work folder in Visual Studio Code, and then re-opening to test, the “customer-list” page will not display and comes back with the “Cannot GET / customer-list” error. How can I fix this?
Below is the code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="customer-list">
<!--google fonts, gstatic fonts, cdn icons style sheets -->
<link href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!--title of page-->
<title><%- title %></title>
<!--css stylesheet-->
<link rel="stylesheet" href="styles/customer-list.css">
</head>
<!--body of page-->
<body>
<a name="top"></a>
<!--imports headers from partials-->
<%- include('./partials/_header_5.html') %>
<!--main content section, must be here or footer will not display properly-->
<main>
<!--card for nav links and images-->
<section class="company-info">
<div class="card">
<div class="nav">
<nav>
<a href="/">Home</a>
<a href="registration">Register</a>
<a href="boarding">Boarding</a>
<a href="grooming">Grooming</a>
<a href="training">Training</a>
<a href="booking">Booking</a>
<a href="my-appointments">My Appointments</a>
</nav>
</div>
</div>
<!--second horizontal rule-->
<hr class="second">
<div class="images">
<img src="images/happy-man.jpg" alt="Happy Man">
<img src="images/smile.jpg" alt="Woman smiling">
<img src="images/girl-dog.jpg" alt="Girl holding a dog">
</div>
<!--table and card for customer list-->
<section class="table">
<div class="card2">
<p>Customer List</p>
<hr class="third">
<section>
<div>
<% if(customers.length > 0) { %>
<table>
<tr>
<th>Email</th><br>
<th>Customer ID</th>
</tr>
<tbody>
<% customers.forEach(function(customer) { %>
<tr>
<td>
<%= customers.email %>
</td>
<td>
<%= customers.customerID %>
</td>
</tr>
<% }) %>
</tbody>
</table>
<% } else { %>
<h2>Customers have not been added to database. Add some to MongoDB now!</h3>
<% } %>
</div>
</section>
</section>
<br>
<!--card for contact info-->
<section class="contact">
<div class="card1">
<form>
<input type="email" placeholder="enter email address">
<a href="#top">Contact Us</a><br>
<p>Phone: 865-227-4641</p>
</form>
</div>
</section>
</main>
<br><br>
<!--imports footer from partials-->
<%- include('./partials/_footer.html') %>
</body>
</html>//requiring express & ejs
const express = require('express');
const ejs = require('ejs');
const app = express();
const path = require('path');
const mongoose = require('mongoose');
const Customer = require('./models/customer');
//render HTML w/ EJS
app.engine('html', require('ejs').__express);
//set views folder as path for HTML files
app.set('views', path.join(__dirname, 'views'));
app.set('views', './views');
app.set('view engine', 'html');
//set public folder as path for static files
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
//app listen on port 3000
const PORT = process.env.PORT || 3000;
//connection to mongodb
const conn = 'mongodb+srv://web340_admin:[email protected]/web340DB';
mongoose.connect(conn).then(() => {
console.log('Connection to the database was successful');
}).catch(err => {
console.log('MongoDB Error: ' + err.message);
})
//sends landing/home page
app.get('/', (req, res) => {
res.render('index', {
title: 'Home',
})
});
//sends grooming page
app.get('/grooming', (req, res) => {
res.render('grooming', {
title: 'Grooming',
})
});
//sends boarding page
app.get('/boarding', (req, res) => {
res.render('boarding', {
title: 'Boarding',
})
});
//sends training page
app.get('/training', (req, res) => {
res.render('training', {
title: 'Training',
})
});
//sends registration page
app.get('/registration', (req, res) => {
res.render('registration', {
title: 'Registration',
})
});
// post customer info to database
app.post('/customer', (req, res, next) => {
// console.log the sent data
console.log(req.body);
console.log(req.body.customerID);
console.log(req.body.email);
// creates new customer object
const newCustomer = new Customer({
customerID: req.body.customerID,
email: req.body.email,
});
console.log(newCustomer);
// Save the new customer to the database
Customer.create(newCustomer, (err, customer) => {
// If there is an error, log it
if (err) {
console.log(err);
next(err);
// If there is no error, log the customer and redirect to the home page
} else {
console.log(`New Customer: ${customer} has been added to the database`);
res.render('index', {
title: 'Home',
})
}
});
});
app.get('/customer', (req, res) => {
Customer.find({}, function(err, customer) {
if (err) {
console.log(err);
next(err);
} else {
res.sendFile('customer-list', {
title: 'Customer List',
customers: customer
})
}
})
})
//port declared & message to console that the app has started
app.listen(PORT, () => {
console.log('The App has started and listens on port ' + PORT);
});
/**
*stylings for body
*/
body {
margin: 0;
padding: 0;
font-family: 'Oswald', Verdana, Arial, sans-serif;
background-color: #E6450F;
}
/**
*stylings for header
*/
header {
height: 180px;
background-color: #E2A865;
border: 1px solid black;
left: 0;
}
header h3 {
font-size: 50px;
text-align: center;
margin-left: -2%;
padding-top: 1%;
margin-top: .5%;
font-weight: normal;
}
/**
*stylings for nav links
*/
.nav {
float: center;
padding-top: 3%;
}
.nav a {
color: #AD330B;
font-size: 25px;
text-decoration: none;
padding: 3%;
margin: -10px;
}
.nav a:hover {
color: #E6450F;
transition: .20s;
}
/**
*stylings for call cards on the page
*/
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
transition: .3s;
background-color: #F5855F;
min-height: 250px;
}
.card-title {
text-align: center;
font-size: 2em;
font-weight: 400;
}
.card-content {
padding: 2px 16px;
text-align: center;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);
}
.company-info {
text-align: center;
margin-top: -2%;
font-family: 'Oswald', Verdana, Arial, sans-serif;
width: 55%;
margin-left: 22%;
}
.company-info p {
font-size: 35px;
margin-top: 5%;
}
/**
*stylings for the 3 images on page
*/
img {
height: 150px;
width: 150px;
border-radius: 50%;
border: 1px solid black;
margin: 5px 75px 0 0;
margin-left: 8%;
}
.images {
display: inline;
}
/**
*stylings for the 3 horizontal rules on the page
*/
.first {
height: 1px;
background-color: #0e0d0d;
border: none;
width: 85.5%;
margin-left: 7.5%;
margin-top: -1.5%;
}
.second {
height: 1px;
background-color: #0e0d0d;
border: none;
width: 85.5%;
margin-left: 7.5%;
margin-top: -17%;
}
.third {
height: 1px;
background-color: #0e0d0d;
border: none;
width: 85.5%;
margin-left: 7.5%;
margin-top:-2%;
}
/**
*stylings for the contact card
*/
.contact {
height: 25px;
text-align: center;
font-size: 25px;
padding-bottom: 7%;
}
.contact form {
padding-top: 2%;
margin-left: 1%;
}
.contact form a {
color: #AD330B;
}
.contact form p {
color: #AD330B;
font-size: 25px;
margin-top: 1%;
}
.card1 {
box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
transition: .3s;
background-color: #F5855F;
height: 105px;
}
.card-title1 {
text-align: center;
font-size: 2em;
font-weight: 400;
}
.card-content1 {
text-align: center;
margin-top: -1%;
}
.card:hover1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);
}
.card2 {
box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
transition: .3s;
background-color: #F5855F;
min-height: 450px;
}
/**
*stylings for the footer
*/
footer {
background-color: #E2A865;
bottom: 0;
left: 0;
height: 55px;
padding: 1%;
}
footer p {
text-align: center;
font-size: 25px;
margin-top: .5%;
margin-left:-2%;
}
/**
* styling for table headers
*/
table {
border-collapse: collapse;
width: 70%;
margin-left: 15%;
}
th {
text-align: center;
background-color: #E2A865;
font-family: 'Oswald', Verdana, Arial, sans-serif;
font-weight: normal;
}
tr {
background-color: #fff;
}
tbody {
font-family: 'Oswald', Verdana, Arial, sans-serif;
font-weight: normal;
font-size: 20px;
}
td, th{
border: 1px solid rgb(7, 7, 7);
padding: 7px;
}
tr:hover {
background-color: #E6450F;
cursor: pointer;
}