As part of a student exercise, I am attempting to access an API containing information about presidents and style them using CSS. However, I am facing issues with linking the style.css file.
I have tried various methods to change the path and public path in the server.js file, as well as the line
app.use(express.static(path.join(__dirname, 'public')));Here is the file structure:
/public
. css
.. styles.css
/views
. layout.hbs
. presidents.hbs
/index.html
/server.js
server.js
const fetch = require('node-fetch');
const express = require('express');
const app = express();
const path = require('path');
const publicPath = path.join(__dirname, '../public');
app.set('view engine', 'hbs');
async function fetchAndParseData() {
const r = await fetch('https://api.sampleapis.com/presidents/presidents');
const data = await r.json();
return data;
}
app.use(express.static(path.join(__dirname, 'public')));
// The method `.use` sets up middleware for the Express application
app.use(express.json());
// this parses requests that may use a different content type
app.use(express.urlencoded({ extended: true }));
app.get('/presidents', async (req, res) => {
const data = await fetchAndParseData();
res.render('presidents', { data });
});
app.get('/', (req, res) => {
res.send('<h1>Presidents Site</h1>');
});
app.listen(4001, () => {
console.log('SomeApp HTML');
});
layout.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Express HTML Site</title>
</head>
<body>
{{{body}}}
</body>
</html>
presidents.hbs
<h1>All our presidents</h1>
{{#each data}}
<section id="presidents">
<figure class="president">
<img src={{this.photo}} alt={{this.name}}/>
<caption>{{this.name}}</caption>
</figure>
{{/each}}
</section>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/styles.css" />
<title>Document</title>
</head>
<body></body>
</html>