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:
https://www.youtube.com/watch?v=TVrfhONc8Jw&feature=youtu.be
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 :)
