O'Reilly logo
live online training icon Live Online training

Full-Stack Angular: Build and Publish a Modern Web Application

Using Angular, Node.js, and MySQL to Create a Full-Stack Site

Topic: Web & Mobile
Shaun Wassell

Most developers are used to working on only one part of a web application - the front-end, back-end, database, or ops. In the past this made sense, since each piece of a web-application was written in a different programming language and required a lot of platform-specific knowledge to work on effectively. However, this is no longer the case. With the rise of technologies such as Angular and Node.js, JavaScript developers are now capable of creating, publishing, and managing entire web applications on their own.

The implications of this shift are huge. For businesses, it means that large development teams with complex hierarchies and endless meetings are no longer a necessity, and can be replaced with small, lean teams of talented full-stack developers. For entrepreneurs, it means that small, software-based businesses can be created far more quickly with less initial investment than before.

Of course, in order to take advantage of all this, developers must understand all the key concepts behind full-stack development. Once you learn how each piece works and how all the pieces fit together, it becomes possible to create large, performant, maintainable web applications very quickly.

What you'll learn-and how you can apply it

  • How to rapidly create a front-end using Angular and a back-end using Node.js and MySQL
  • How to effectively communicate between the front- and back-end using HTTPClient
  • How to build and host a full-stack site using Google Cloud so that it can be accessed by anyone worldwide

This training course is for you because...

  • Front- and Back-end Developers who want to better understand how all the parts of a web application work
  • Intermediate to Advanced Javascript Developers who want to know how to create a full-stack site from scratch
  • Developers who want to learn the “ops-side” of things and have the ability to host and manage their own sites

Prerequisites

    • Must have basic familiarity with Javascript, Angular, and Node.js

Course Set-up:

  • Install Node.js and NPM
  • Install MySQL locally
  • In addition, you can create a firebase account and log into the console here: https://firebase.google.com/
  • To make the example site look good, I’ll be providing some CSS, and probably the basic app setup (I don’t have it on github yet) - you’ll need to clone the repo
  • Open a “free-tier” Google Cloud account
  • Open a github account

Recommended Preparation:

Recommended Follow-up:

About your instructor

  • Shaun is a lifelong programmer and problem-solving addict. His goal is to help people build incredible software and solve meaningful problems by mastering the art of software development. He currently works as a Senior React Developer, but also has a lot of side gigs, including consulting, freelance development, and online education. Don’t hesitate to get in contact with him if you enjoy his materials.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Segment 0: The App We’ll Be Building - Length (15min)

  • The App
  • The Technology
  • The Benefits

Segment 1: Creating a Front-end with Angular - Length (50min)

  • Creating and Running an App
  • Adding the Router and Pages
  • Building the Home Page
  • Building the Articles List Page
  • Building the Article Page
  • Adding Upvotes
  • Adding Comments
  • Break (10min)

Segment 2: Creating a Back-end with Node.js and Hapi - Length (50min)

  • Creating and Running a Hapi Server
  • Testing a Server with Postman
  • Creating the articles endpoint
  • Creating the upvotes endpoints
  • Creating the comments endpoints
  • Break (10min)

Segment 3: Persisting Data with MySQL - Length (50min)

  • Setting up a local MySQL instance
  • Rewriting the articles endpoint
  • Rewriting the upvotes endpoints
  • Rewriting the comments endpoints
  • Break (10min)

Segment 4: Connecting the Front- and Back-end with HTTPClient - Length (50min)

  • Angular services
  • Loading articles from the server
  • Loading comments from the server
  • Loading upvotes from the server
  • Break (10min)

Segment 5: Building and Hosting our App on Google Cloud - Length (35min)

  • Preparing our app for production
  • Creating and setting up a Cloud instance
  • Committing and pushing our local code to github
  • Pulling our code to Cloud
  • Building and running our code on Cloud

Course wrap-up and next steps (10min)