I am struggling to figure out how to add a front end to my Rest API. I am Trying to Create a HTML page that dynamically changes based on what url is being visited. I currently get the JSON response from entering “/ListJokes” however i would like to convert this into a HTML page with a title and whatnot similar to “ListJokes.html”.
I briefly followed this Tutorial for context: https://www.freecodecamp.org/news/build-consume-and-document-a-rest-api/#how-to-build-a-rest-api-with-node-and-express
My ListJokes.html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>REST Client</title>
</head>
<body>
<div id="joke-container">
<h1 style="color:blueviolet; font-size: 60px; text-align: center;">All JOKES!</h1>
<a href="http://localhost:5000/home"><button type="button">Home Page</button></a>
<hr>
<div id="joke-list">
</div>
</div>
</body>
</html>
My index.html (homepage):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>REST Client</title>
</head>
<body>
<div class="container">
<h1 style="color:blueviolet; font-size: 60px; text-align: center;">JOKE WEBISTE</h1>
<hr>
<div style="margin-bottom: 20px; margin-top: 20px; margin-left: 15px;">
<a href="http://localhost:5000/jokes/ListJokes"><button type="button">LIST ALL JOKES!</button></a>
</div>
<form id="form" >
<div style="margin-bottom: 20px; margin-top: 20px; margin-left: 15px;">
<lable for="find joke id">ID: </lable>
<input type="number" id="find joke id" name="find joke id" style="left: 20px; top: 10px;" placeholder="Enter Joke ID">
<button type="submit" style="margin-left: 10px;">Find This Joke!</button>
</div>
</form>
</div>
<script type="module">
</script>
</body>
</html>
My Models.js script:
// This is the function definition file for the API. This will recieve data from the control file and will edit the Data Base or The HTML.
import Jokes from "./db.js"
export const listItems = () => {
try {
console.log(Jokes)
return Jokes //returns every joke in the Data Base
} catch (err) { //added error handling
console.log('Error', err) //parses error message
}
}
My Controller.js script:
// this file is the head controll file for the API. this will parse the HTTP requests to their corresponding JavaScript function in Models.js
import bodyparser from "body-parser"; //Imports Body-Parser
import {
getItem, listItems, editItem, addItem, deleteItem
} from "./Models.js" //imports functions from Models.js
export const listJokes = (req, res) => {
try {
const resp = listItems() //parses response into the function
res.status(200) //sends "It Worked" Message when recieved
res.send(JSON.stringify(resp))
} catch (err) { //added error handling
res.status(500).send(err) //sends error message to client
}
}
My Router.js script:
import express from "express"; //Imports Express Framework
import bodyparser from "body-parser"; //Imports Body-Parser
import path from "path";
import {
listJokes,
getJoke,
editJoke,
addJoke,
deleteJoke,
} from "./Controller.js"; //imports function converter from controller.js
const router = express.Router(); //initialises the router
router.get("/listJokes", listJokes); //monitors endpoint and triggers converter
router.get("/ListJokes/:id", getJoke); //monitors endpoint and triggers converter
router.put("/editJoke/:id", editJoke); //monitors endpoint and triggers converter
router.post("/addJoke", addJoke); //monitors endpoint and triggers converter
router.delete("/deleteJoke/:id", deleteJoke) //monitors endpoint and triggers converter
export default router; //allows the router to be access remotely
My server.js script:
import router from "./Router.js"
import express from 'express'
import cors from 'cors'
import path from "path";
import { fileURLToPath } from 'url';
import { dirname } from 'path';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const app = express() //Starts App
app.use(cors()) //tells app to use cors
app.use(express.json()) //tells app to use express to handle JSON files
app.use("/jokes", router) //tells app to use the routes from Router.js
app.listen(5000, () => { //Allow the server to scan port 5000 for requests
console.log("Server is running on port 5000.");
});
app.get("/home", (req, res) => {
res.sendFile(path.join(__dirname, "index.html")); //Sends index.html file when "/home" is visited
});
export default app
I Have removed some functions/parts of the scripts that are not relevent as they follow the rough structure of the ones given. (This explains any random imports or anything like that). Any Help will be appreciated 🙂