https://DevOpsCloud.io -- Cloud Monk Losang Jinpa

Return to The Complete Developer

“ (CmplDv 2024)

CONTENTS IN DETAIL

PRAISE FOR THE COMPLETE DEVELOPER

TITLE PAGE

COPYRIGHT

DEDICATION

ABOUT THE AUTHOR AND TECHNICAL REVIEWER

ACKNOWLEDGMENTS

INTRODUCTION

Who Should Read This Book?

What’s in This Book?

The Parts of a Full-Stack Application

The Frontend

The Middleware

The Backend

A Brief History of JavaScript and Full-Stack Development

Setting Up

PART I: THE TECHNOLOGY STACK

1

NODE.JS

Installing Node.js

Working with npm

The package.json File

Required Fields

Dependencies

Development Dependencies

The package-lock.json File

Creating a Project

Initializing a New Module or Project

Installing the Dependencies

Installing the Development Dependencies

Auditing the package.json File

Cleaning Up the node_modules Folder

Updating All Packages

Removing a Dependency

Installing a Dependency

Using npx to Execute a Script Only Once

Exercise 1: Build a “Hello World” Express.js Server

Setting Up

Writing the Server Code

Summary

2

MODERN JAVASCRIPT

ES.Next Modules

Using Named and Default Exports

Importing Modules

Declaring Variables

Hoisted Variables

Scope-Abiding Variables

Constant-Like Data

Arrow Functions

Writing Arrow Functions

Understanding Lexical Scope

Exploring Practical Use Cases

Creating Strings

Asynchronous Scripts

Avoiding Traditional Callbacks

Using Promises

Simplifying Asynchronous Scripts

Looping Through an Array

Dispersing Arrays and Objects

Exercise 2: Extend Express.js with Modern JavaScript

Editing the package.json File

Writing an ES.Next Module with Asynchronous Code

Adding the Modules to the Server

Summary

3

TYPESCRIPT

Benefits of TypeScript

Setting Up TypeScript

Installation in Node.js

The tsconfig.json File

Dynamic Feedback with TypeScript

Type Annotations

Declaring a Variable

Declaring a Return Value

Declaring a Function’s Parameters

Built-in Types

Primitive JavaScript Types

The union Type

The array Type

The object Type

The tuple Type

The any Type

The void Type

Custom Types and Interfaces

Defining Custom Types

Defining Interfaces

Using Type Declaration Files

Exercise 3: Extend Express.js with TypeScript

Setting Up

Creating the tsconfig.json File

Defining Custom Types

Adding Type Annotations to the routes.ts File

Adding Type Annotations to the index.ts File

Transpiling and Running the Code

Summary

4

REACT

The Role of React

Setting Up React

The JavaScript Syntax Extension

An Example JSX Expression

The ReactDOM Package

Organizing Code into Components

Writing Class Components

Providing Reusable Behavior with Hooks

Working with Built-in Hooks

Managing the Internal State with useState

Handling Side Effects with useEffect

Sharing Global Data with useContext and Context Providers

Exercise 4: Create a Reactive User Interface for the Express.js Server

Adding React to the Server

Creating the Endpoint for the Static HTML File

Running the Server

Summary

5

NEXT.JS

Setting Up Next.js

Project Structure

Development Scripts

Routing the Application

Simple Page Routes

Nested Page Routes

API Routes

Dynamic URLs

Styling the Application

Global Styles

Component Styles

Built-in Next.js Components

The next/head Component

The next/link Component

The next/image Component

Pre-rendering and Publishing

Server-Side Rendering

Static Site Generation

Incremental Static Regeneration

Client-Side Rendering

Static HTML Exporting

Exercise 5: Refactor Express.js and React to Next.js

Storing Custom Interfaces and Types

Creating the API Routes

Creating the Page Routes

Running the Application

Summary

6

REST AND GRAPHQL APIS

REST APIs

The URL

The Specification

State and Authentication

HTTP Methods

Working with REST

Reading Data

Updating Data

GraphQL APIs

The Schema

The Resolvers

Comparing GraphQL to REST

Over-Fetching

Under-Fetching

Exercise 6: Add a GraphQL API to Next.js

Creating the Schema

Adding Data

Implementing Resolvers

Creating the API Route

Using the Apollo Sandbox

Summary

7

MONGODB AND MONGOOSE

How Apps Use Databases and Object-Relational Mappers

Relational and Non-Relational Databases

Setting Up MongoDB and Mongoose

Defining a Mongoose Model

The Interface

The Schema

The Model

The Database-Connection Middleware

Querying the Database

Creating a Document

Reading a Document

Updating a Document

Deleting a Document

Creating an End-to-End Query

Exercise 7: Connect the GraphQL API to the Database

Connecting to the Database

Adding Services to GraphQL Resolvers

Summary

8

TESTING WITH THE JEST FRAMEWORK

Test-Driven Development and Unit Testing

Using Jest

Creating an Example Module to Test

Anatomy of a Test Case

Arrange

Act

Assert

Using TDD

Refactoring Code

Evaluating Test Coverage

Replacing Dependencies with Fakes, Stubs, and Mocks

Creating a Module with Dependencies

Creating a Doubles Folder

Using a Stub

Using a Fake

Using a Mock

Additional Types of Tests

Functional Tests

Integration Tests

End-to-End Tests

Snapshot Tests

Exercise 8: Add Test Cases to the Weather App

Testing the Middleware with Spies

Creating Mocks to Test the Services

Performing an End-to-End Test of the REST API

Evaluating the User Interface with a Snapshot Test

Summary

9

AUTHORIZATION WITH OAUTH

How OAuth Works

Authentication vs. Authorization

The Role of OAuth

Grant Types

Bearer Tokens

The Authorization Code Flow

Creating a JWT Token

The Header

The Payload

The Signature

Exercise 9: Access a Protected Resource

Setting Up the Client

Logging In to Receive the Authorization Grant

Using the Authorization Grant to Get the Access Token

Using the Access Token to Get the Protected Resource

Summary

10

CONTAINERIZATION WITH DOCKER

The Containerization Architecture

Installing Docker

Creating a Docker Container

Writing the Dockerfile

Building the Docker Image

Serving the Application from the Docker Container

Locating the Exposed Docker Port

Interacting with the Container

Creating Microservices with Docker Compose

Writing the docker-compose.yml File

Running the Containers

Rerunning the Tests

Interacting with Docker Compose

Summary

PART II: THE FULL-STACK APPLICATION

11

SETTING UP THE DOCKER ENVIRONMENT

The Food Finder Application

Building the Local Environment with Docker

The Backend Container

The Frontend Container

Summary

12

BUILDING THE MIDDLEWARE

Configuring Next.js to Use Absolute Imports

Connecting Mongoose

Writing the Database Connection

Fixing the TypeScript Warning

The Mongoose Model

Creating the Schema

Creating the Location Model

The Model’s Services

Creating the Location Service’s Custom Types

Creating the Location Services

Testing the Services

Summary

13

BUILDING THE GRAPHQL API

Setting Up

The Schemas

The Custom Types and Directives

The Query Schema

The Mutation Schema

Merging the Typedefs into the Final Schema

The GraphQL Resolvers

Adding the API Endpoint to Next.js

Summary

14

BUILDING THE FRONTEND

Overview of the User Interface

The Start Page

The List Item

The Locations List

The Page

The Global Layout Components

The Logo

The Header

The Layout

The Location Details Page

The Component

The Page

Summary

15

ADDING OAUTH

Adding OAuth with next-auth

Creating a GitHub OAuth App

Adding the Client Credentials

Installing next-auth

Creating the Authentication Callback

Sharing the Session Across Pages and Components

The Generic Button Component

The AuthElement Component

Adding the AuthElement Component to the Header

The Wish List Next.js Page

Adding the Button to the Location Detail Component

Securing the GraphQL Mutations

Summary

16

RUNNING AUTOMATED TESTS IN DOCKER

Adding Jest to the Project

Setting Up Docker

Writing Snapshot Tests for the Header Element

Summary

A

TYPESCRIPT COMPILER OPTIONS

B

THE NEXT.JS APP DIRECTORY

Server Components vs. Client Components

Server Components

Client Components

Rendering Components

Fetching Data

Static Rendering

Dynamic Rendering

Exploring the Project Structure

Updating the CSS

Defining a Layout

Adding the Content and Route

Catching Errors

Showing an Optional Loading Interface

Adding a Server Component That Fetches Remote Data

Completing the Application with the Navigation

Replacing API Routes with Route Handlers

C

COMMON MATCHERS

Built-in Matchers

The JEST-DOM Matchers

INDEX

Fair Use Sources:

• B0BZH15BDB (CmplDv 2024)