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

Explore what React, Node, TypeScript, Webpack, and Docker have to offer individually, and how they all fit together in modern app development. React is one of the most popular web development tools available today, and Node.js is extremely popular for server-side development. The fact that both utilize JavaScript is a big selling point, but as developers use the language more, they begin to recognize the shortcomings, and that's where TypeScript comes in and why it's gaining in popularity quickly. Add Webpack and Docker to the mix, and you've got a potent full development stack on which to build applications. You'll begin by building a solid foundation of knowledge and quickly expand it by constructing two 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. By the end, you will have a solid grasp of building apps with React, Node.js, and TypeScript and a good grasp on how Webpack can be used to optimize and organize your code for deployment. 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. What You'll Learn Get a project started and logically structure it Construct a user interface with React and Material-UI Use WebSockets for real-time communication between client and server Build a REST API with Node and Express as another approach to client-server communication Package the app with Webpack for optimized delivery Take a completed app and wrap it up with Docker for easy distribution Review a host of other ancillary topics including NPM, Semantic versioning, Babel, NoSQL, and more Who This Book Is For Web developers with basic knowledge of HTML, JavaScript, CSS, and CLI tools who are interested in and in all aspects of application development, and using TypeScript instead of straight JavaScript. 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, and Undefined 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 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? 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.addContat() Worker.deleteContact() Testing It All Optional Tooling 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: Material-UI 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 Interface 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 Index Explore What React, Node, Typescript, Webpack, And Docker Have To Offer Individually, And How They All Fit Together In Modern App Development. React Is One Of The Most Popular Web Development Tools Available Today, And Node.js Is Extremely Popular For Server-side Development. The Fact That Both Utilize Javascript Is A Big Selling Point, But As Developers Use The Language More, They Begin To Recognize The Shortcomings, And That’s Where Typescript Comes In And Why It’s Gaining In Popularity Quickly. Add Webpack And Docker To The Mix, And You’ve Got A Potent Full Development Stack On Which To Build Applications.you’ll Begin By Building A Solid Foundation Of Knowledge And Quickly Expand It By Constructing Two 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. By The End, You Will Have A Solid Grasp Of Building Apps With React, Node.js, And Typescript And A Good Grasp On How Webpack Can Be Used To Optimize And Organize Your Code For Deployment. 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. What You'll Learn Get A Project Started And Logically Structure It Use React And Material-ui To Construct A User Interface Use Websockets For Real-time Communication Between Client And Server Build A Rest Api With Node And Express As Another Approach To Client-server Communication Package The App With Webpack For Optimized Delivery Take A Completed App And Wrap It Up With Docker For Easy Distribution Learn About And Use A Host Of Other Ancillary Topics Including Npm, Semantic Versioning, Babel, Nosql, And More Who This Book Is For Web Developers With Basic Knowledge Of Html, Javascript, Css, And Cli Tools Who Are Interested In And In All Aspects Of Application Development, And Using Typescript Instead Of Straight Javascript. Explore what React, Node, TypeScript, Webpack, and Docker have to offer individually, and how they all fit together in modern app development. React is one of the most popular web development tools available today, and Node.js is extremely popular for server-side development. The fact that both utilize JavaScript is a big selling point, but as developers use the language more, they begin to recognize the shortcomings, and that's where TypeScript comes in and why it's gaining in popularity quickly. Add Webpack and Docker to the mix, and you've got a potent full development stack on which to build applications.You'll begin by building a solid foundation of knowledge and quickly expand it by constructing two 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. By the end, you will have a solid grasp of building apps with React, Node.js, and TypeScript and a good grasp on how Webpack can be used to optimize and organize your code for deployment. 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 will: Get a project started and logically structure it Construct a user interface with React and Material-UI Use WebSockets for real-time communication between client and server Build a REST API with Node and Express as another approach to client-server communication Package the app with Webpack for optimized delivery Take a completed app and wrap it up with Docker for easy distribution Review a host of other ancillary topics including NPM, Semantic versioning, Babel, NoSQL, and more 1. Server-Side Node.js and NPM 2. A Few More Advanced Node and NPM 3. Client-Side React4. A Few More Advanced React5. Building a Strong TypeScript6. A Few More Advanced TypeScript7. Tying it up in a Webpack8. Delivering the MailBag, the Server9. Delivering the MailBag, the Client10. Time for BattleJong, the Server11. Tying It Up in a Bow with Webpack12. Bringing the Dev Ship into Harbor With Docker