Step 4
Open your terminal to the root folder of the YouNote API. (Use the lates version where we have connected the API to a MongoDB cluster in the cloud.)
Run the YouNote API on a port different than that of the YouNote App. If you've been following along, I have the API running on port 4567
and frontend app running on port 7000
.
We are going to use a Node package called axios which provides an interface for fetching resources though HTTP requests.
Axios is similar to JavaScript's fetch in functionality, however, it provides a more powerful and flexible feature set. (See e.g. Axios vs. Fetch.)
Stop the frontend app and install axios:
npm install axios
Next, import axios in index.js
const axios = require("axios");
Now update the route handler for "dashboard" view:
app.get("/dashboard", async (req, res) => {
const username = req.query.uname;
const data = {
nickname: username,
};
try {
let response = await axios.get(`http://localhost:4567/api/notes?author=${username}`);
data.notes = response.data.data;
} catch (error) {
console.log(error);
data.notes = [];
}
res.render("dashboard.njk", data);
});
Save the file and run your frontend application. Select a user (author) which you have some notes stored in your younote-db
cloud database. The notes must be displayed when you visit the dashboard for that user.
Here is a good tutorial on Axios: How to make HTTP requests like a pro with Axios.