Angular: Creating and Hosting a Full-Stack Site

Course details

You've learned Angular and can create amazing front-end interfaces—but deploying them requires more than just Angular. You need logic running on the server, and a place to put that logic. If you want to apply your Angular skills to a broader range of projects—but you're not very familiar with server-side development—then this course is for you. Join instructor Shaun Wassell as he steps through how to build a full-stack, Angular-powered website from scratch. Shaun demonstrates how to create an Angular 9 front end and write a back end in Node.js using hapi. He then shows how to add MySQL to your back end, connect the front and back ends, add Firebase Authentication to your project, and move your full-stack application to the cloud.

Concepts

0. Introduction

01 - Front-end to back-end creating and hosting a full-stack site
02 - What you should know
03 - Install Node.js and npm
04 - Exercise files
05 - The approach

1. Creating an Angular Front End

06 - Why Angular
07 - Set up an Angular project
08 - Angular project structure
09 - Create your first Angular component
10 - Routes and routing in Angular
11 - Add fake data
12 - Implement the Listings page
13 - Create a Listing Detail page
14 - Create a Contact Seller page
15 - Create a My Listings page
16 - Create a New Listings page
17 - Create a Listing Data form
18 - Create an Edit Listing page
19 - Create a navigation bar

2. Creating a Node Back End

20 - Why Node.js
21 - Set up a hapi server
22 - Test a hapi server with Postman
23 - Create a listings endpoint
24 - Restart a Node server automatically
25 - Create an individual listing endpoint
26 - Errors in hapi using hapi boom

3. Adding MySQL to Your Back End

27 - Why MySQL
28 - Install MySQL and MySQL Workbench
29 - Set up a MySQL database
30 - Connect to a MySQL database from Node
31 - Rewrite the listings endpoints
32 - Create an endpoint for adding views
33 - Create an endpoint to get a user listing
34 - Create an endpoint to create listings
35 - Create an endpoint to edit listings
36 - Create an endpoint to delete listings

4. Connecting the Front and Back Ends

37 - Services in Angular
38 - RxJS and the Angular HttpClient
39 - Avoid CORS errors
40 - Connect the Listing Detail page
41 - Connect the My Listings page
42 - Connect the New Listing page
43 - Connect the Edit Listing page

5. Authentication

44 - What is Firebase Auth
45 - Set up a Firebase account
46 - Add Firebase to Angular
47 - Add Firebase to hapi
48 - Sign in and out
49 - Load user listings with Auth
50 - Create listings with Auth
51 - Edit listings with Auth
52 - Delete listings with Auth

6. Hosting Your Site

53 - Move a full-stack app to the cloud
54 - Installing the Google Cloud CLI
55 - Moving MySQL to the cloud
56 - Environment variables
57 - Host a Node server on Google Cloud
58 - Build and serve an Angular app

Conclusion

59 - Next steps