The Complete Developer - Master the Full Stack with TypeScript, React, Next.js, MongoDB, and Docker 9781718503298, 9781718503281

Table of contents :
Cover
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