JavaScript Everywhere Building Cross-Platform Applications with GraphQL, React, React Native, and Electron Adam D. Scott Praise for JavaScript Everywhere JavaScript Everywhere is an incredible book that will give you everything you need to build applications with JavaScript on any platform. The title is the truth: JavaScript is everywhere, and this book performs the unique feat of putting everything in context for developers at all levels. Read this book then write code and make technology decisions with confidence. —Eve Porcello, Software Developer and Instructor at Moon Highway JavaScript Everywhere is the perfect companion for navigating the ever-changing modern JavaScript ecosystem. Adam teaches React, React Native, and GraphQL in a clear, approachable way so you can build robust web, mobile, and desktop applications. —Peggy Rayzis, Engineering Manager at Apollo GraphQL JavaScript Everywhere Building Cross-Platform Applications with GraphQL, React, React Native, and Electron Adam D. Scott Beijing Boston Farnham Sebastopol Tokyo JavaScript Everywhere by Adam D. Scott Copyright © 2020 Adam D. Scott. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://oreilly.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or [email protected]. Acquisitions Editor: Jennifer Pollock Indexer: WordCo Indexing Services, Inc. Development Editor: Angela Rufino Interior Designer: David Futato Production Editor: Christopher Faucher Cover Designer: Karen Montgomery Copyeditor: Rachel Monaghan Illustrator: Rebecca Demarest Proofreader: Christina Edwards February 2020: First Edition Revision History for the First Edition 2020-02-06: First Release See http://oreilly.com/catalog/errata.csp?isbn=9781492046981 for release details. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. JavaScript Everywhere, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc. The views expressed in this work are those of the author, and do not represent the publisher’s views. While the publisher and the author have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the author disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights. 978-1-492-04698-1 [LSI] For my dad, who both brought home my first hacked-together computer and proofread every paper that I wrote. I wouldn’t be here without you. You are missed. Table of Contents Foreword. xiii Preface. xv 1. Our Development Environment. 1 Your Text Editor 2 The Terminal 2 Using a Dedicated Terminal Application 2 Using VSCode 2 Navigating the Filesystem 2 Command-Line Tools and Homebrew (Mac Only) 3 Node.js and NPM 4 Installing Node.js and NPM for macOS 4 Installing Node.js and NPM for Windows 5 MongoDB 5 Installing and Running MongoDB for macOS 6 Installing and Running MongoDB for Windows 6 Git 6 Expo 7 Prettier 7 ESLint 8 Making Things Look Nice 8 Conclusion 8 2. API Introduction. 9 What We’re Building 9 How We’re Going to Build This 10 Getting Started 11 vii Conclusion 12 3. A Web Application with Node and Express. 13 Hello World 13 Nodemon 14 Extending Port Options 15 Conclusion 16 4. Our First GraphQL API. 17 Turning Our Server into an API (Sort Of) 17 GraphQL Basics 21 Schemas 21 Resolvers 23 Adapting Our API 23 Conclusion 30 5. Database. 31 Getting Started with MongoDB 32 Connecting MongoDB to Our Application 34 Reading and Writing Data from Our Application 37 Conclusion 44 6. CRUD Operations. 45 Separating Our GraphQL Schema and Resolvers 45 Writing Our GraphQL CRUD Schema 49 CRUD Resolvers 49 Date and Time 51 Conclusion 53 7. User Accounts and Authentication. 55 Application Authentication Flow 55 Encryption and Tokens 56 Encrypting Passwords 57 JSON Web Tokens 58 Integrating Authentication into Our API 59 User Schemas 59 Authentication Resolvers 61 Adding the User to the Resolver Context 64 Conclusion 67 8. User Actions. 69 Before We Get Started 69 viii | Table of Contents Attach a User to New Notes 70 User Permissions for Updates and Deletes 72 User Queries 73 Toggling Note Favorites 76 Nested Queries 80 Conclusion 82 9. Details. 83 Web Application and Express.js Best Practices 83 Express Helmet 83 Cross-Origin Resource Sharing 84 Pagination 84 Data Limitations 87 Other Considerations 88 Testing 88 Subscriptions 88 Apollo GraphQL Platform 88 Conclusion 89 10. Deploying Our API. 91 Hosting Our Database 91 Deploying Our Application 97 Project Setup 97 Deployment 99 Testing 100 Conclusion 100 11. User Interfaces and React. 101 JavaScript and UIs 102 Declarative Interfaces with JavaScript 103 Just Enough React 103 Conclusion 108 12. Building a Web Client with React. 109 What We’re Building 109 How We’re Going to Build This 110 Getting Started 110 Building Out the Web Application 112 Routing 114 Linking 117 UI Components 118 Conclusion 120 Table of Contents | ix 13. Styling an Application. 121 Creating a Layout Component 121 CSS 124 CSS-in-JS 124 Creating a Button Component 125 Adding Global Styles 127 Component Styles 129 Conclusion 132 14. Working with Apollo Client. 135 Setting Up Apollo Client 136 Querying an API 138 Some Style 146 Dynamic Queries 148 Pagination 150 Conclusion 152 15. Web Authentication and State. 153 Creating a Sign-up Form 153 React Forms and State 157 signUp Mutation 158 JSON Web Tokens and Local Storage 161 Redirects 162 Attaching Headers to Requests 162 Local State Management 163 Logging Out 166 Creating a Sign-In Form 168 Protected Routes 173 Conclusion 175 16. Create, Read, Update, and Delete Operations. 177 Creating New Notes 177 Reading User Notes 183 Updating Notes 186 Deleting Notes 193 Toggling Favorites 195 Conclusion 199 17. Deploying a Web Application. 201 Static Websites 201 Our Deployment Pipeline 203 Hosting Source Code with Git 203 x | Table of Contents Deploy with Netlify 205 Conclusion 206 18. Desktop Applications with Electron. 207 What We’re Building 207 How We’re Going To Build This 208 Getting Started 208 Our First Electron App 209 macOS Application Window Details 211 Developer Tools 211 The Electron API 213 Conclusion 213 19. Integrating an Existing Web Application with Electron. 215 Integrating Our Web Application 215 Warnings and Errors 216 Configuration 218 Content Security Policy 219 Conclusion 222 20. Electron Deployment. 223 Electron Builder 223 Configuring Electron Builder 224 Build for Our Current Platform 225 App Icons 225 Building for Multiple Platforms 226 Code Signing 226 Conclusion 227 21. Mobile Applications with React Native. 229 What We’re Building 230 How We’re Going To Build This 230 Getting Started 231 Conclusion 234 22. Mobile Application Shell. 235 React Native Building Blocks 235 Style and Styled Components 237 Styled Components 240 Routing 242 Tabbed Routing with React Navigation 242 Stack Navigation 245 Table of Contents | xi Adding Screen Titles 249 Icons 251 Conclusion 253 23. GraphQL and React Native. 255 Creating List and Scrollable Content Views 256 Making a List Routable 261 GraphQL with Apollo Client 263 Writing GraphQL Queries 264 Adding a Loading Indicator 269 Conclusion 271 24. Mobile Application Authentication. 273 Authentication Routing Flow 273 Creating a Sign-in Form 282 Authentication with GraphQL Mutations 287 Authenticated GraphQL Queries 289 Adding a Sign-up Form 293 Conclusion 299 25. Mobile Application Distribution. 301 app.json Configuration 301 Icons and App Loading Screens 303 App Icons 303 Splash Screens 304 Expo Publish 305 Creating Native Builds 306 iOS 307 Android 307 Distributing to App Stores 308 Conclusion 308 Afterword. 309 A. Running the API Locally. 311 B. Running the Web App Locally. 313 Index. 315 xii | Table of Contents Foreword In 1997 I was a junior in high school. A friend and I were goofing around with the web-connected computer in our school library when he showed me that you could click View → Source to see the underlying code of a web page. A few days later, another friend showed me how to publish my own HTML. My mind was blown. After that, I was hooked. I went around borrowing the bits of the websites I liked to construct my own Franken-site. I spent much of my free time at the pieced-together computer in my family’s dining room tinkering away. I even “wrote” (OK, copied and pasted) my first JavaScript, to implement hover styles on links, which was not yet doable with simple CSS. And in a turn of events that I’ve come to think of as a nerdy and wholesome version of the film Almost Famous, my homegrown music site gained reasonable popularity. Because of this, I received promotional CDs in the mail and was put on the guest list at concerts. More important to me, however, was that I was sharing my interests with other people around the world. I was a bored suburban teenager, in love with music, and was able to reach people I’d never meet. That was, and still is, such an empower‐ ing feeling. Today, we can build powerful applications using only web technologies, but it can be daunting to get started. APIs are an invisible background that serves up data.