Full stack Angular – live coding – talk notes

I spoke (and live-coded) at the Advanced Angular Lunch in St. Louis, August 2019. The talk description:

Watch or heckle as Kyle from Oasis Digital live codes a full-stack Nx + Angular + Node + Nest + GraphQL project, with concurrent explanation and Q&A along the way. Mistakes will be made, and perhaps corrected. Lessons will be learned, but perhaps forgotten. You (might) see the productivity possible with “full stack Angular” – but this is real live coding so anything could happen.

In this abbreviated version of the talk, I explained more Nx than planned, but left off the final step (converting a REST API to GraphQL).

We recorded and streamed the talk. (If the video starts with silence, skip to 2:30.)

In lieu of slides, I used these notes during the talk (which was 80% live-coding).

Introduction

Let’s aim for an app that shows some people and some items of work they are supposed to do. Fortunately we already have some (very fake “Lorem”) data of this nature. Of course the app doesn’t matter, and is not intended to be interesting. But it will give us an opportunity to fetch data via GraphQL.

Already Installed

Node – nvm install 10
VSCode – https://code.visualstudio.com/
A back-end REST server: https://api.angularbootcamp.com/
Angular CLI – no install needed
Nest CLI – no install needed
Nx CLI – no install needed

To get started, I created an Nx project:

yarn create nx-workspace app-one

Project type: Choose “angular-nest”
Name: AppOne Use a name with no spaces
CSS: CSS

cd app-one
yarn add @nestjs/graphql apollo-server-express graphql-tools graphql

It can take a while to download everything, especially the first time.

Work in the project

Launch an IDE:

code-insiders .

Run the Angular app for development in one terminal window:

yarn nx serve

Run the Nest (Node) server in another terminal window:

yarn nx serve api

Remember to restart after adding libraries. Other than that, ideally (modulo imperfections in the tooling) you should be able to develop extensively without restarting the tools.

Quick Tour

This freshly created project has reasonable baseline modern practices done for you:

Project-level monorepo
Automatic formatting and linting
Intra-app dependency management
Unit and E2E test tools ready to use
Share client/server code

It’s 2019. This stuff is not the future, it is the present.

Avoid global scripts?

This is not necessarily a best practice, but it’s possibly a good practice. It should be on your radar. Install the Nest CLI locally in the project

yarn add -D @nestjs/cli

Then add nest to the list of package scripts. These serve as hooks to allow use of typically-global tools without a global install.

"ng": "ng",
"nx": "nx",
"nest": "nest",

Work around a Nx-Nest problem

The Nx Nest support is a work in progress. For the moment something like this is necessary to make it the schematics work.

Create a file nest-cli.json with the contents:

{
"language": "ts",
"collection": "@nestjs/schematics",
"sourceRoot": "apps/api/src"
}

Live Coding – as time allows

Show list of employees:
Nest API server fetch from “legacy backend”.

yarn nest generate controller employee

Borrow syntax from a previous example.

Click to show detail: Detail page, show emp and task detail…

Fetch with GraphQL instead of REST

Do a mutation

Track selected emps, put state in Apollo addon

Adopt practices and layout?

Many teams spend countless hours and dollars discussing whether to do these things, how to do these things, when to do these things. Making plans about which release to start doing them. Carefully scheduling incremental rollout.