Angular: Creating and Hosting a Full-Stack Site

Introduction

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

1. Creating an Angular Front End

• Why Angular?
• Set up an Angular project
• Angular project structure
• Create your first Angular component
• Routes and routing in Angular
• Add fake data
• Implement the Listings page
• Create a Listing Detail page
• Create a Contact Seller page
• Create a My Listings page
• Create a New Listings page
• Create a Listing Data form
• Create an Edit Listing page
• Create a navigation bar

2. Creating a Node Back End

• Why Node.js?
• Set up a hapi server
• Test a hapi server with Postman
• Create a listings endpoint
• Restart a Node server automatically
• Create an individual listing endpoint
• Errors in hapi using hapi/boom

3. Adding MySQL to Your Back End

• Why MySQL?
• Install MySQL and MySQL Workbench
• Set up a MySQL database
• Connect to a MySQL database from Node
• Rewrite the listings endpoints
• Create an endpoint for adding views
• Create an endpoint to get a user listing
• Create an endpoint to create listings
• Create an endpoint to edit listings
• Create an endpoint to delete listings

4. Connecting the Front and Back Ends

• Services in Angular
• RxJS and the Angular HttpClient
• Avoid CORS errors
• Connect the Listing Detail page
• Connect the My Listings page
• Connect the New Listing page
• Connect the Edit Listing page

5. Authentication

• What is Firebase Auth?
• Set up a Firebase account
• Add Firebase to Angular
• Add Firebase to hapi
• Sign in and out
• Load user listings with Auth
• Create listings with Auth
• Edit listings with Auth
• Delete listings with Auth

6. Hosting Your Site

• Move a full-stack app to the cloud
• Installing the Google Cloud CLI
• Moving MySQL to the cloud
• Environment variables
• Host a Node server on Google Cloud
• Build and serve an Angular app

Conclusion

• Next steps