Modern Full-Stack Development: Using TypeScript, React, Node.js, Webpack, Python, Django, and Docker

Table of Contents
About the Author
About the Technical Reviewer
Acknowledgments
Introduction
Chapter 1: Server-Side Action: Node and NPM
	Of JavaScript Runtimes and Building (Mostly) Servers
	First Baby Steps with Node: Installation
	More Useful: Executing JavaScript Source Files
	Node’s Partner in Crime: NPM
	A Few More NPM Commands
	Initializing a New NPM/Node Project
	Adding Dependencies
	A Quick Aside: Semantic Versioning
	Fisher Price’s “My First Node Web Server”
	Bonus Example
	Summary
Chapter 2: A Few More Words: Advanced Node and NPM
	NPM: More on package.json
	NPM: Other Commands
	Auditing Package Security
	Deduplication and Pruning
	Finding/Searching for Packages sans Browser
	Updating Packages
	Publishing/Unpublishing Packages
	Node: Standard Modules
	File System (fs)
	HTTP and HTTPS (http and https)
	OS (os)
	Path (path)
	Process
	Query Strings (querystring)
	URL (url)
	Utilities (util)
	The Rest of the Cast
	Summary
Chapter 3: Client-Side Adventures: React
	A Brief History of React
	Yeah, Okay, History Nerd, That’s All Great, but What IS React?!
	The Real Star of the Show: Components
	Components Need Info: Props
	Components (Sometimes) Need Memory: State
	Making Them Look Good: Style
	In the End, Why React?
	Summary
Chapter 4: A Few More Words: Advanced React
	A Better Way to Write React Code: JSX
	Yeah, Okay, So What Does It LOOK LIKE?!
	A Slight Detour into Babel Land
	Compile JSX
	And Now, Put It All Together
	Whither Props?
	Default Props
	Typing Props
	Component Lifecycle
	Summary
Chapter 5: Building a Strong Foundation: TypeScript
	What Is TypeScript?
	Jumping into the Deep End
	Beyond the Playground
	Configuring TypeScript Compilation
	The Nitty-Gritty: Types
	String
	Number
	Boolean
	Any
	Arrays
	Tuples
	Enums
	Function
	Object
	Null, Void, Undefined, and Never
	Custom Type Aliases
	Union Types
	TypeScript == ES6 Features for “Free”!
	The let and const Keywords
	Block Scope
	Arrow Functions
	Template Literals
	Default Parameters
	Spread and Rest (and As an Added Bonus: Optional Arguments)
	Destructuring
	Classes
	Properties
	Member Visibility
	Inheritance
	Getters and Setters
	Static Members
	Abstract Classes
	Summary
Chapter 6: A Few More Words: Advanced TypeScript
	Interfaces
	Argument/Object Interfaces
	Methods in Interfaces
	Interfaces and Classes
	Extending Interfaces
	Namespaces and Modules
	Namespaces
	Modules
	Decorators
	Decorator Factories
	Third-Party Libraries
	Debugging TypeScript Apps
	Source Maps
	Optional Chaining and Nullish Coalescing
	Summary
Chapter 7: Tying It Up in a Bow: Webpack
	What’s a Bundle, and How Do I Make One?
	What’s Webpack All About?
	Dependency Graph
	Entry
	Output
	Loaders
	Plugins
	Modes
	Browser Compatibility
	Getting Started with Webpack
	Getting More Complex
	Configuration
	Using Modules
	Wither TypeScript?
	Tip
	Summary
Chapter 8: Delivering the Goods: MailBag, the Server
	What Are We Building?
	Basic Requirements
	Setting Up the Project
	Source File Rundown
	Adding Node Modules
	Adding Types
	A More Convenient Development Environment
	The Starting Point: main.ts
	A Quick Detour: Time to Take a REST
	URLs for Fun and Profit
	Giving Methods Meaning
	Data Format Smackdown
	A Bonus Pillar: Response Status Codes
	Another Quick Detour: Express, for Fun and Profit
	Back to the Code!
	REST Endpoint: List Mailboxes
	REST Endpoint: List Messages
	REST Endpoint: Get a Message
	REST Endpoint: Delete a Message
	REST Endpoint: Send a Message
	REST Endpoint: List Contacts
	REST Endpoint: Add Contact
	REST Endpoint: Delete Contact
	Gotta Know What We’re Talking to: ServerInfo.ts
	Time to Send the Mail: smtp.ts
	A Quick Detour: Nodemailer
	Another Quick Detour: Generics
	Back to the Code!
	Worker.sendMessage( )
	Time to Get the Mail (and Other Stuff): imap.ts
	A Quick Detour: emailjs-imap-client and mailparser
	Back to the Code!
	Worker.listMailboxes()
	Worker.listMessages( )
	Worker.getMessageBody( )
	Worker.deleteMessage( )
	Reach Out and Touch Someone: contacts.ts
	A Quick Detour: NoSQL
	Another Quick Detour: NeDB
	Back to the Code!
	Worker.listContacts( )
	Worker.addContact( )
	Worker.deleteContact( )
	Testing It All
	Suggested Exercises
	Summary
Chapter 9: Delivering the Goods: MailBag, the Client
	What Are We Building?
	Basic Requirements
	Setting Up the Project
	Source File Rundown
	The Starting Point: index.html
	The Starting Point, Redux: main.tsx
	A Quick Detour: State’ing the Obvious
	Back to the Code!
	A Bit of Configuration: config.ts
	A Worker for All Seasons
	A Quick Detour: AJAX
	Getting Some Help: Axios
	Mirroring the Server Part 1: Contacts.ts
	Listing Contacts
	Adding a Contact
	Deleting a Contact
	Mirroring the Server Part 2: IMAP.ts
	Listing Mailboxes
	Listing Messages
	Getting the Body of a Message
	Deleting a Message
	Mirroring the Server Part 3: SMTP.ts
	A Cavalcade of Components
	A Quick Detour: MUI
	Another Quick Detour: CSS Grid
	Yet Another Quick Detour: main.css
	BaseLayout.tsx
	A Quick Detour: Functional Components
	Toolbar.tsx
	MailboxList.tsx
	ContactList.tsx
	ContactView.tsx
	MessageList.tsx
	MessageView.tsx
	WelcomeView.tsx
	Suggested Exercises
	Summary
Chapter 10: Time for Fun: BattleJong, the Server
	What Are We Building?
	Basic Requirements
	Setting Up the Project
	Some tsconfig.json Changes
	Adding Node Modules
	Adding Types
	Source File Rundown
	The Starting Point (the ONLY Point, in Fact!): server.ts
	A Quick Detour: WebSockets
	Back to the Code!
	Serving the Client: The Express Server
	Handling Messages: The WebSocket Server and Overall Game Design
	Message: “match”
	Message: “done”
	Finishing Up the WebSocket Server
	Of Tiles and Board Layouts
	Shuffling the Board
	Suggested Exercises
	Summary
Chapter 11: Time for Fun: BattleJong, the Client
	What Are We Building?
	Basic Requirements
	Setting Up the Project
	Some tsconfig.json Changes
	Some webpack.config.js Changes
	Adding Libraries
	Adding Types
	Source File Rundown
	The Starting Point: index.html
	The REAL Starting Point: main.tsx
	The Basic Layout: BaseLayout.tsx
	Feedback and Status: ControlArea.tsx
	Scores
	Game State Messages
	Where the Action Is: PlayerBoard.tsx
	A Quick Detour: Custom Type Definitions
	Back to the Code!
	The Render Process
	Talking to the Server: socketComm.ts
	Handling Server-Sent Messages
	Sending Messages to the Server
	The Main Code: state.ts
	A Few Interfaces for Good Measure
	The Beginning of the State Object
	A Quick Detour: TypeScript-Type Assertions
	Back to the Code!
	Message Handler Methods
	The Big Kahuna: tileClick( )
	Helper Function: canTileBeSelected( )
	Helper Function: anyMovesLeft()
	Suggested Exercises
	Summary
Chapter 12: Bringing the Dev Ship into Harbor: Docker
	An Introduction to Containers and Containerization
	The Star of the Show: Docker
	Installing Docker
	Your First Container: “Hello, World!” of Course!
	A Quick Rundown of Key Docker Commands
	Listing Images
	Listing Containers
	Starting (and Stopping) Containers
	Remove Containers and Images
	Pulling Images
	Searching for Images
	Attaching to a Container
	Viewing Container Logs
	Creating Your Own Image
	Deploying to Docker Hub
	Wrapping Up MailBag and BattleJong
	Suggested Exercises
	Summary
Chapter 13: Feed Your Face: Fooderator, the Server
	Wait, What Are We Building?!
	Python Slithers In
		Uhh, I Can Has Python?!
	Django Unchained
		Creating a Django Project
		Creating an App
	Taking a REST with DRF
		Setting Up the API
		Adding Endpoints
		Creating Models to Model Our Data
		Migrations
		Serializers to Handle Our Models
		Finally: Adding Those Views I Promised!
			Recipes
			Menu Items
		A Special Case: The Shopping List
	Automatic Documentation Generation
	Use Postman to Test
	Serving Static Content Alongside the API
	Suggested Exercises
	Summary
Chapter 14: Feed Your Face: Fooderator, the Client
	A New Component Library to Play With
	Hook, Line, and Sinker: React Hooks with Functional Components
		The useState Hook
		The useEffect Hook
		Other Hooks
	The (New) State of Things: Hookstate
	Charting a Course with React Router
	Your First Look at Fooderator
	Setting Up the Basics
		Client App Directory Structure
		package.json
		Some Minor Webpack Changes
	Into the Breach: index.html and main.tsx
		index.html
		main.tsx
	The State of Things: globalState.ts
	The Home Screen: App.tsx
		The Component Definition
		useEffect Hook
	The Menu Screen (Menu.tsx)
		The Component Definition
		Event Handler Functions
	The Shopping List Screen (ShoppingList.tsx)
		The Component Definition
		useEffect Hook
		The Component Definition
	The Recipe List Screen (Recipes.tsx)
		The Component Definition
		Event Handler Functions
	The Recipe Edit Modal Dialog (Recipes_edit.tsx)
		Basic Recipe Info
		The Ingredients Section
		Event Handler Functions
	Suggested Exercises
	Summary
Index