MODERN FULL-STACK DEVELOPMENT : using typescript, react, node.js, webpack, python, django, and... docker

Explore what React, Node, Python, Django, TypeScript, Webpack, and Docker have to offer individually, and how they all fit together in modern app development. This updated version will show you how to build apps with React, Node.js or Django, and TypeScript, and how Webpack can be used to optimize and organize your code for deployment. You’ll begin by building a solid foundation of knowledge and quickly expand it by constructing three different real-world apps. These aren’t just simple, contrived examples but real apps that you can choose to install on your servers and use for real. You’ll also understand how Docker can be used to run the apps you build in a clear and well-defined way, all of which will be able to springboard you into creating more advanced apps on your own. You'll see why React is one of the most popular web development tools available today, and why Node.js is also frequently used for server-side development. The fact that both utilize JavaScript is a big selling point, but there are shortcomings. Modern Full-Stack Development highlights how adding Django, Webpack, and Docker to the mix resolves any issues by creating a potent full development stack on which to build applications – two possible stacks, really!! What You'll Learn: Review the basics of TypeScript and writing both React and Node apps with it Construct a project with NPM and Webpack, configuration and usage Utilize client-side and server-side development Employ REST APIs and database usage across two tech stacks, Node and Python/Django Deploy apps using Docker Who This Book Is For: Web developers and software architects. 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