Sometimes you would just like to have a very descriptive list of all beers so you could see their type, color, each beer's percentage of alcohol, or which beer is well pared with some food. In this lab, you will create a web app where the user will be able to see a list of beers, get random suggestions, and read a very descriptive explanation of each beer.
"How will we get all of this information?", you might ask. Well, we will be using an npm package 📦 as our data source.
For this exercise, we will work with the PunkAPI npm package. In the background, the package communicates with a remote database that contains all of the beers. The package enables us to use its methods that can help us to retrieve beers. Each beer has some properties, and we can play around with this data to practice working with Handlebars templates, layouts and partials.
In this lab, we can also practice reading external (PunkAPI) docs and learn how to get what we need from the database.
- Fork this repo
- Then clone this repo.
- Upon completion, run the following commands:
$ git add .
$ git commit -m "done"
$ git push origin master- Create Pull Request so your TAs can check up your work.
To run our application, the first thing you have to do is to install all of its dependencies. Run the following command:
$ npm installTo run the app:
$ nodemon app.js
# you can also run: npm run devOur starter code includes the basic configuration needed to run our app. The / route is set to render the index.hbs file. Let's start by creating a layout.
Inside the views folder, create a layout.hbs file. In the bonus iteration, you can give your app some style, but for now, let's focus on the logic.
Remember to add the {{{ body }}} to the main layout.
Add a navbar that includes links to 3 pages:
- Home ==> should navigate to
/. - Beers ==> should navigate to
/beers. - Random Beer ==> should navigate to
/random-beer.
The layout is done, let's move to create these three pages.
- The first page should be Home and should be rendered on
/. The file that gets rendered isindex.hbs. - This file should include the beer image, which you can find at
/public/images. Together with the image,index.hbsshould have two links:Check the Beers!andCheck a Random Beer. Both links should navigate to the corresponding routes (which we previously defined in our navbar as well). Later, you can style theseatags to make them look like buttons.
The next thing we will be working on is a page where we can present all the beers we will retrieve from the remote database. This page will be rendered every time the user visits the /beers route.
This leads us to the conclusion that in this step, we have two main focus areas:
- the
/beersroute and - the
beers.hbsview.
In this step, we will have a couple of micro-steps:
- Create a
/beersroute inside theapp.jsfile. - Inside the
/beersroute, call thegetBeers()method (the PunkAPI provides this method, and you can find more about it here). Calling the.getBeers()method returns a promise that should be resolved with an array of 25 beers. - Down the road, you should pass that array to the
beers.hbsview.
An example of how this method works is shown below:
punkAPI
.getBeers()
.then(beersFromApi => console.log('Beers from the database: ', beersFromApi))
.catch(error => console.log(error));- Create a
beers.hbsfile to render every time we call this route. - This file should have access to the beers we get as a response from the database. Remember, you should call the
rendermethod after getting the beers array. Hint: That means inside of the function you're passing to thethenmethod. 😉 - On the
beers.hbsview, loop over the array of beers using an{{#each}}loop. Display an image, name, description and tagline.
Now, when you click on the Beers link on the top navigation or on the Check the beers button, you should be able to see all the beers. Boom! 💥
As in the previous step, we will have to focus on creating a route to display a random beer. When a random beer is retrieved, we have to pass it to the view.
- Let's create the
/random-beerroute. - Inside the route, you should call the PunkAPI
getRandom()method. It returns a promise that will resolve with a different beer object on every call. Look at the documentation to understand the structure of the data that you're supposed to get back. 👍
An example of how this method works is shown below:
punkAPI
.getRandom()
.then(responseFromAPI => {
// your magic happens here
})
.catch(error => console.log(error));- Eventually, the received beer needs to be passed to the
random-beer.hbsfile. You still don't have this file, so let's proceed to create it.
- The
random-beer.hbsshould display the random beer that was retrieved from the database. You should display an image, name, description, tagline, food pairing and brewer tips. The following image shows how this page could look if you give it a bit of style. However, the styling will come later, so, for now, focus on rendering all the information:
Now, every time the user clicks on the Random beer link in the navbar or on the Check a random beer button on the home page, they should see this page with a new, random beer.
You've just finished all the mandatory iterations. Good job!
Let's proceed to the bonus iterations.
:::info
On every iteration, you should render a partial passing the information regarding the corresponding beer.
:::
Partials represent templates that are likely to be reused.
Let's see what beer properties we display on the /beers (the beers page) and compare them with the properties we displayed on the /random-beer (random beer) page:
| properties/ page | /beers |
/random-beer |
|---|---|---|
| image | ✅ | ✅ |
| name | ✅ | ✅ |
| description | ✅ | ✅ |
| tagline | ✅ | ✅ |
| food pairing | ❌ | ✅ |
| brewer tips | ❌ | ✅ |
As we can see, we have 4 in common properties, which means our code could be a bit more DRY if we refactor it using partials.
You should create a partial to show each beer.
- First, we need to register where our
partialswill be located. So you need to add the following code to theapp.jsfile:
hbs.registerPartials(path.join(__dirname, 'views/partials'));- Next, you should create a
partialsfolder inside theviews, and abeerpartial.hbsfile inside thepartialsfolder (Note: We're not including dashes in thehbspartial names, since handlebars partials need to follow the same naming conventions as JavaScript variables). - Our
beerpartial.hbswill display the properties that both views share: image, name, description, and tagline of the beer. - Now, you can go ahead and plug in this partial in the
beers.hbsview inside theeachloop.
After creating the partial, and looping over the array of beers, on our /beers route, we should have the following:
- Also, you can use it on the
random-beer.hbspage.
Our code shrunk by a lot just because we managed to create a reusable piece of code (the partial), which we can now place wherever we need to use this set of properties.
Make all the beers on the beers page clickable. If users click on a specific beer, they should be able to see a page with detailed information about that particular beer. You can reuse the same partial you used for iteration 5. As a matter of fact, you should. That's what partials are for. The trick is to wrap an anchor tag around every beer that has the beer id in the href property. Something like:
<a href="/beers/beer-i3f4d34s34b"><!-- name of the beer --></a>To understand how you can get the id from the URL, read this section of the Express docs.
To find out how you can get an individual beer from the punkAPI using the beerId, check out the .getBeer(id) method on the punkAPI docs.
The overall layout should look like this:
You will find the colors and fonts in the css file. Remember to link the css file to your main layout.
Let your artsy side shine! ✨
Happy Coding! ❤️
I am stuck and don't know how to solve the problem or where to start. What should I do?
If you are stuck in your code and don't know how to solve the problem or where to start, you should take a step back and try to form a clear question about the specific issue you are facing. This will help you narrow down the problem and come up with potential solutions.
For example, is it a concept that you don't understand, or are you receiving an error message that you don't know how to fix? It is usually helpful to try to state the problem as clearly as possible, including any error messages you are receiving. This can help you communicate the issue to others and potentially get help from classmates or online resources.
Once you have a clear understanding of the problem, you will be able to start working toward the solution.
When I try to run the app, I get an error "command not found: nodemon"
Make sure you have nodemon installed globally:
npm install -g nodemonThis will install nodemon globally on your system, making it available to all of your projects.
How to use then() and catch() with Promises?
When working with Promises or a function that returns a promise, you can attach .then() method to handle the resolved value and a catch() method to handle the possible rejection value.
Here is an example of how to use .then() and .catch() to handle a simple promise:
myPromise
.then((result) => {
console.log(result);
})
.catch((error) => {
console.log(error);
});Here is an example of using .then() and .catch() to handle a promise returned by a function/method:
someAPI.getData()
.then((result) => {
console.log(result);
})
.catch((error) => {
console.log(error);
});If you are trying to execute multiple promises in a sequence, you can do so by returning a promise from a .then() block. Example:
someAPI.getData()
.then((result1) => {
console.log(result1);
return someAPI.getData(); // Return another pending promise
})
.then((result2) => { // Handle the returned promise
console.log(result2);
})
.catch((error) => {
console.log(error);
})The first line someAPI.getData() initiates an asynchronous operation, which returns a promise. The .then() method is then called on the promise to handle the resolved value.
The first then() returns another promise with another call to someAPI.getData(), which allows to chain another then() function that handles the second resolved value, logging it to the console.
How to use async function and await?
You create an asynchronous function by using the async keyword before the function definition.
An async function allows you to use the await keyword inside the function body to wait for a promise to resolve.
When using an async function to handle asynchronous code (e.g. API call) that may potentially throw an error, we have to add a try/catch block to be able to handle any potential errors.
async function doSomething() {
try {
// Code that will be executed asynchronously
// that might throw an error
}
catch (error) {
// Handle the error
}
}Here is an example of using await inside of an async function to await for a promise to resolve:
async function getData() {
try {
let response = await fetch('https://api.github.com/search/repositories?q=js');
let data = await response.json();
console.log(data);
}
catch (error) {
// error message
}
}In the above example, the first await is used to wait for the promise returned by fetch() to resolve. The value of the resolved promise is then assigned to the variable response.
The second await is used to parse the response as json object, and is used to wait for the promise returned by response.json(). The resolved value is then assigned to the variable data.
The function uses the return keyword to return the data to allow consuming the value outside of the function.
The difference between a regular function and an async function is that the async function always returns a Promise.
Once defined, you can invoke an async function just like a regular function and handle the Promise it returns using .then() and .catch() or await.
Here's an example of using then and catch to handle a Promise returned by an async function:
async function greeting() {
// An `async` function always returns a promise
// This value will be returned as a Promise
return "HELLO IRONHACKERS!";
}
greeting()
.then((result) => {
console.log(result);
})
.catch((error) => {
console.log("Error:", error);
})Here's an example of handling the same async function but this time using await:
async function greeting() {
// Async function always returns a promise
// This value will be returned as a Promise
return "HELLO IRONHACKERS!";
}
// We need another wrapper `async` function so that we can use `await`
async function wrapperFunction() {
try {
const result = await greeting(
console.log(result);
}
catch (error) {
console.log("Error:", error);
}
}Note that we needed another wrapper async function to be able to use await.
How to use try / catch block?
The try/catch block is used to handle errors that occur during the execution of a program.
The try block contains the code that might throw an error, and the catch block contains the code that will handle the error.
Here is an example of using a try/catch block:
try {
// Code that might throw an error
} catch (error) {
// Handle the error
}The try/catch block is typically used in async functions when handling asynchronous code that may potentially throw an error.
Here is an example of using a try/catch block in an async function when handling a promise:
async function doSomething() {
try {
// Code that might throw an error
const result = await someAsyncFunction();
}
catch (error) {
// Handle the error
console.error(error);
}
}In the above example, the try block contains an asynchronous operation that might throw an error: await someAsyncFunction(). If an error is thrown, execution will automatically jump to the catch block.
I got the error: "Cannot find module" Node.js". How can I resolve it?
The error "Cannot find module" in a Node.js application means that the module you are trying to import or use does not exist in your project or cannot be found by Node.js. There are a few things you can try to resolve the issue:
-
Dependencies are not installed: Make sure that all dependencies are installed. To do this, run the command
npm installin the root folder of your project. This will install all of the dependencies listed in the project'spackage.jsonfile, and ensure that all of the modules that your Node'js application requires are available. -
Module is not installed: Make sure that the package you are trying to use is listed in the project's
package.jsonand that it is installed. To do this, run the commandnpm install <package_name>, replacing the<package_name>with the name of the package. This will add the package to the list of dependencies in thepackage.jsonfile, and install it in the project. -
Module is not imported: Make sure that you've imported the module/package correctly and that the
requirestatement is spelled correctly and available in the correct place in your code. -
Wrong file path: If you are importing another file as a module, make sure that the file you are trying to require is located in the correct folder and that you are using the correct file path.
-
Wrong module/package name: Check the spelling of the package name you are trying to import.
Why are my CSS styles not loading after linking the stylesheet?
There are a few reasons why your CSS styles might not be loading after linking the stylesheet:
- Incorrect file path: Make sure that the file path for the stylesheet in the
linktag of your Handlebars template is correct. If the path is incorrect, the browser will not be able to locate the stylesheet and the styles will not be applied.
For example, if the file structure of your project is as follows:
- views/
- layout.hbs
- index.hbs
- public/
- stylesheets/
- style.css
...
The correct file path for the stylesheet in the link tag of the layout.hbs file would be:
<link rel="stylesheet" href="/stylesheets/style.css">Important: The href path starts with a /, representing the path starting from the base folder where the static files are being served from, in this case, the public/ folder.
-
Incorrect file name: Make sure that you are referring to the file by its right name in the
hrefof thelinktag. -
Middleware not configured correctly: Make sure that you have the
express.staticmiddleware, that serves static files correctly configured in your Express app and that the right folder path and name are specified. If this middleware is not set up correctly, the server will not send the stylesheet when requested. -
Restart the server: Sometimes, even if you made the correct changes, the browser might still be loading an old version of the file. You should try restarting your Express server. This will ensure that the new changes are loaded and being served by the server, making sure the browser will load the most recent version of the stylesheet."
Why are my images not loading/displaying on the page?
There are a few reasons why your images might not be loading after linking the file:
- Incorrect file path: Make sure that the file path for the image in the
imgtag of your Handlebars template is correct. If the path is incorrect, the browser will not be able to locate the stylesheet and the styles will not be applied.
For example, if the file structure of your project is as follows:
- views/
- layout.hbs
- index.hbs
- public/
- images/
- dog.jpg
...
The correct file path for loading the image in the index.hbs file would be:
<img alt="dog" src="/images/dog.jpg" />Important: The src path starts with a /, representing the path starting from the base folder where the static files are being served from, in this case, the public/ folder.
-
Incorrect file name: Make sure that you are referring to the file by its right name in the
srcof theimgtag. -
Middleware not configured correctly: Make sure that you have the
express.staticmiddleware, that serves static files correctly configured in your Express app and that the right folder path and name are specified. If this middleware is not set up correctly, the server will not send the images when requested. -
Restart the server: Sometimes, even if you made the correct changes, the browser might still be loading an old version of the file. You should try restarting your Express server. This will ensure that the new changes are loaded and served by the server.
What is the difference between the .html and .hbs files?
A .hbs file is a Handlebars template file. Handlebars is a templating library, used on the server side in Node.js to generate HTML pages from template files. Handlebars allow you to write templates that are more expressive and readable than plain HTML, and it also allows you to reuse code. Handlebars uses double curly brace {{ }} syntax to specify placeholders for data in templates.
So in short, .hbs is the format of the Handlebars template files and .html is the end format and the file generated after the .hbs template has been processed.
My links are not working properly. Should I use a relative or an absolute path?
When linking to other pages within your Express app, as a general rule you should use relative paths that start with a forward slash /.
This way you ensure that the links will work correctly both in your development environment and when the app is deployed.
For example, instead of linking to a page with an absolute path like this:
<a href="http://yourdomain.com/contact"> Contact </a>You should use a relative path starting with a forward slash / like this:
<a href="/contact"> Contact </a>If you are embedding values in your Handlebars template, you should still use the relative path that starts with a forward slash / like this:
I got the error "Error: listen EADDRINUSE: Address already in use". How do I fix it?
This error means that the port is taken by another process that is still running on that port.
To fix the issue, you need to kill the process using the port and then run the command again. Here's how to do it:
To kill the process running on port 3000, run the following command in the terminal:
sudo kill -9 $(lsof -t -i:3000) Important: Replace the above example port 3000 with the port number of the process you are trying to kill.
To kill the running process on Windows using the Task Manager do the following:
- Open the Task Manager by pressing: Ctrl + Shift + Esc
- Find the Node process you want to terminate.
- Right-click and select End Task
To kill the running process on Windows using the Command Prompt do the following:
- Open the windows Start menu
- Search for CMD in the search bar
- In the search results, right-click on Command Prompt and select Run as administrator. This will open the Command Prompt terminal.
- In the Command Prompt terminal, run the following command to find the process ID:
netstat -ano|findstr "PID :3000"If the process happens to be running on another port, simply replace
3000with the number the port number the process is running on.
This will return the process id (PID). You should then run the following command using the process id (PID) you got in the previous step to terminate the process:
taskkill /PID 12345 /fImportant: Replace the above example PID 12345, with the process id (PID) you got in the previous step.
I got the error "Port is already in use". How do I fix it?
This error means that the port is taken by another process that is still running on that port.
To fix the issue, you need to kill the process using the port and then run the command again. Here's how to do it:
To kill the process running on port 3000, run the following command in the terminal:
sudo kill -9 $(lsof -t -i:3000) Important: Replace the above example port 3000 with the port number of the process you are trying to kill.
To kill the running process on Windows using the Task Manager do the following:
- Open the Task Manager by pressing: Ctrl + Shift + Esc
- Find the Node process you want to terminate.
- Right-click and select End Task
To kill the running process on Windows using the Command Prompt do the following:
- Open the windows Start menu
- Search for CMD in the search bar
- In the search results, right-click on Command Prompt and select Run as administrator. This will open the Command Prompt terminal.
- In the Command Prompt terminal, run the following command to find the process ID:
netstat -ano|findstr "PID :3000"If the process happens to be running on another port, simply replace
3000with the number the port number the process is running on.
This will return the process id (PID). You should then run the following command using the process id (PID) you got in the previous step to terminate the process:
taskkill /PID 12345 /fImportant: Replace the above example PID 12345, with the process id (PID) you got in the previous step.
I got the error "Refused to apply style ... ('text/html') is not a supported stylesheet MIME type". What should I do?
This error most commonly occurs when the browser attempts to load a resource (i.e., stylesheet) but the server instead returns an HTML page. For example, if there is an issue with the file path and the server is unable to serve the file, it may return a 404 HTML page.
There are a few things you should look at to troubleshoot this:
-
Try accessing the file directly: To verify that the server is returning an HTML page instead of the requested file, copy the file path and try to access the file directly from a new browser tab.
-
Check the file path: Make sure that the file path used is correct and that the file actually exists in that location. If there is a typo or error in the file path, the server will not be able to find the file.
-
Check the static files middleware configuration: Check that your
express.staticmiddleware, which serves static files, is correctly configured and that the right folder path and name are specified. If this middleware is not set up correctly, the server will not send the images when requested.
I am getting an error: "not defined". How do I fix it?
The "ReferenceError: variable is not defined" error in JavaScript occurs when you try to access a variable or a function that has not been defined yet, or is out of scope. To fix the issue, check that you have defined the variable or function that you are trying to use and double-check the spelling to make sure you are using the correct name. In case the variable or a function is defined in another file, make sure that the file has been imported or loaded correctly.
I am unable to push changes to the repository. What should I do?
There are a couple of possible reasons why you may be unable to push changes to a Git repository:
- You have not committed your changes: Before you can push your changes to the repository, you need to commit them using the
git commitcommand. Make sure you have committed your changes and try pushing again. To do this, run the following terminal commands from the project folder:
git add .
git commit -m "Your commit message"
git push- You do not have permission to push to the repository: If you have cloned the repository directly from the main Ironhack repository without making a Fork first, you do not have write access to the repository. To check which remote repository you have cloned, run the following terminal command from the project folder:
git remote -vIf the link shown is the same as the main Ironhack repository, you will need to fork the repository to your GitHub account first, and then clone your fork to your local machine to be able to push the changes.
Note: You may want to make a copy of the code you have locally, to avoid losing it in the process.