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

Cover
Praise for The Complete Developer
Title Page
Copyright
Dedication
About the Author
About the Technical Reviewer
Brief Contents
Contents in Detail
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
	Chapter 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
	Chapter 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
	Chapter 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
	Chapter 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
	Chapter 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
	Chapter 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
	Chapter 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
	Chapter 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
	Chapter 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
	Chapter 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
	Chapter 11: Setting Up the Docker Environment
		The Food Finder Application
		Building the Local Environment with Docker
			The Backend Container
			The Frontend Container
		Summary
	Chapter 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
	Chapter 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
	Chapter 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
	Chapter 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
	Chapter 16: Running Automated Tests in Docker
		Adding Jest to the Project
		Setting Up Docker
		Writing Snapshot Tests for the Header Element
		Summary
Appendix A: Typescript Compiler Options
Appendix 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
Appendix C: Common Matchers
	Built-in Matchers
	The JEST-DOM Matchers
Index
Back Cover