Beginner Express.js Tutorial | Building a Star Wars Movie App (Part 1)

In this introductory Express.js tutorial series, we are going to be building a Star Wars themed movie application. We are using Express.js, which is a web framework for Node.js.

In this part, we will go over how we can get started using Node.js and Express.js. I go over how to install Node and how to use npm to install express and other node modules. I spend time going over basic Express.js concepts, such as routing, using templates, partials, writing embedded JavaScript, and the folder structure for a typical application. I also go over how to use a JSON file to get data for an application and much much more! šŸ™‚

GitHub Repository:
https://github.com/RyanHemrick/star_wars_app

Part 2:

Timestamps:

0:00
Introduction to the application

1:12
Installing Node.js

2:24
Create the project folder and create the package.json file

4:48
Install the express node module

5:56
Create the app.js file

6:24
Create the ‘app’ and ‘express’ variables

7:50
Overview of express routes

8:24
Create the basic express ‘home’ route

9:55
Tell the app to run on localhost:3000

11:07
Create another basic route

11:54
Creating the movie_single route that accepts a parameter in the URL

15:05
Creating the route (notFound) for pages that don’t exist

16:47
Overview of Express.js templates

17:42
Installing the ejs node module

18:00
Setting the view engine to ejs

18:26
Create the Views folder and the home.ejs template file

19:05
Render the home.ejs template in the home route

20:14
Passing information into the home route template file

21:38
Loop through a movies array and output the data using embedded JavaScript

24:01
Add bootstrap

26:12
Adding the partials folder and creating the head.ejs and scripts.ejs partial files

27:02
Include the partial files in the home.ejs template

27:47
Create the ‘public’ directory for static assets and create the ‘routes’ folder

29:01
Getting the movies.json file from the GitHub repository and overview of the JSON file

30:31
Exporting the routes and moving the functionality into index.js

33:11
Getting the images from the GitHub repository

33:50
Requiring the movies.json file

35:01
Looping through the movie posters for all of the movies and displaying them in home.ejs

40:26
Showing another way to pass the movie posters into the home template

43:55
Get the styles.css styles from the GitHub repository

45:07
Add HTML code for the home.ejs template

45:55
Link to our styles.css file in the head.ejs partial

46:48
Get the Google Fonts

48:53
Add HTML classes to home.ejs to activate the CSS styles for the posters

50:59
Create the header.ejs partial file and create the navigation

56:22
Add the content for the poster overlays

58:46
Part 1 overview and Part 2 preview

Thanks for watching šŸ™‚



Tagged with:

Leave a Reply