Practice: Node.js and Express Foundations

Welcome to the lab:

Practice: Node.js and Express Foundations

This lab provides a hands-on environment to help you practice the concepts learned in the course Node.js and Express Foundations

Feel free to reference the course if you have any questions regarding the concepts covered in this lab.

In the next Step you will begin developing the Express application in the app.mjs file.

info> Each of the following Steps contain several Tasks to accomplish. If you are stuck on any task, attempting to Validate the task 3 times will present you with the solution.

To get started click the > Next step button.

The first step is to configure a simple express server in the app.mjs file.

Opening the src/app.mjs file, you'll notice that the app variable is currently being initialized to an empty object.

This will need to be changed to an Express application.

To start the Express application you can execute the following command in the Terminal window.

node --watch src/index.js

Then switch to the Web Browser tab and click the Refresh circle button.

info>The above command is using the --watch flag which should rebuild the application whenever you make any changes. To stop the application you can use the key combination ctrl+c

The next step is to host static files that can be served directly to the browser. To help test that the static file configuration has been configured correctly, the file hello.html has been placed at the root of the public directory.

If you have not yet started the Express application in --watch mode, you can now start the application by executing the following command in the Terminal.

node --watch src/index.js

Then in the Web Browser tab you can change the url in the address bar to localhost:3000/hello.html and refresh the page.

You should now see Hello, Static File in the Web Browser.

Now that you have added support for static files, you can now use the concert templates in the src/public/views directory.

This application is using the EJS templating engine. Your next step is to configure the EJS engine and add a concerts endpoint that will serve up the concerts.ejs template. To view the results of this new route, switch to the Web Browser tab and change the url in the address bar to point to the route localhost:3000/concerts

You may notice that the page is currently reporting that No Concerts Have Been Scheduled.

Opening the file src/public/views/concerts.ejs and scrolling down to line 32, notice that this template is iterating over a concerts array. Your next task is to pass this concerts array to the template. Refreshing the Web Browser, you should now see a list of available concerts.

Now that you have the /concerts page listing all available concerts, your next step is to create a route to display the details of each concert.

If you click on the PURCHASE DETAILS button you should receive an error message stating Cannot GET /concerts/1. If you still have the Express application running, you can view this change by typing the following detail path in the Web Browser address bar.

localhost:3000/concerts/1

The final step of this lab is to add a middleware error handler that will capture all unhandled application errors and respond to the user with a more friendly message. To test this error handler, you can simulate an error situation by modifying the root route to immediately throw an error. Such as:

app.get('/', (request, response) => {
  throw new Error()
})

Then change the url in the Web Browser to the root path localhost:3000 and refresh the browser.

Congratulations on completing all of the steps of this practice lab!

The Node.js and Express Foundations course covers several more concepts than those explored in this lab. Feel free to continue using this environment to explore other concepts that were addressed.

Wishing you the best as you continue your Node.js learning journey and looking forward to seeing what you will create!