Decoupled Django : Understand and Build Decoupled Django Architectures for JavaScript Front-ends

Apply decoupling patterns, properly test a decoupled project, and integrate a Django API with React, and Vue.js. This book covers decoupled architectures in Django, with Django REST framework and GraphQL. With practical and simple examples, you’ll see firsthand how, why, and when to decouple a Django project. Starting with an introduction to decoupled architectures versus monoliths, with a strong focus on the modern JavaScript scene, you’ll implement REST and GraphQL APIs with Django, add authentication to a decoupled project, and test the backend. You’ll then review functional testing for JavaScript frontends with Cypress. You will also learn how to integrate GraphQL in a Django project, with a focus on the benefits and drawbacks of this new query language. By the end of this book, you will be able to discern and apply all the different decoupling strategies to any Django project, regardless of its size. **What You'll Learn*** Choose the right approach for decoupling a Django project * Build REST APIs with Django and a Django REST framework * Integrate Vue.js and GraphQL in a Django project * Consume a Django REST API with Next.js * Test decoupled Django projects **Who This Book Is For**Software developers with basic Django skills keen to learn decoupled architectures with Django. JavaScript developers interested in learning full-stack development and decoupled architectures with Django. Table of Contents 5 About the Author 12 About the Technical Reviewer 13 Acknowledgments 14 Introduction 15 Chapter 1: Introduction to the Decoupled World 17 Monoliths and MVC 17 What Makes a Decoupled Architecture? 18 Why and When to Decouple? 19 Hypermedia All the Things 21 Hypermedia as the Engine 23 Client-Server Separation 24 Stateless 24 Cacheable 24 Uniform Interface 26 An Introduction to GraphQL 27 Summary 31 Additional Resources 31 Chapter 2: JavaScript Meets Django 32 JavaScript and Django in Production 32 The Need for Module Bundlers 34 Webpack Fights Django (the Need for Code Splitting) 35 Modern JavaScript, Babel, and Webpack 37 A Word on TypeScript 38 JavaScript Frontend Libraries and Frameworks 39 Lightweight JavaScript UI Libraries 40 Universal JavaScript Applications 41 Static Site Generators 42 Testing Tooling 42 Other Ancillary JavaScript Tools 43 Summary 44 Additional Resources 44 Chapter 3: Modern Django and the Django REST Framework 45 What Is the Django REST Framework? 45 Class-Based Views in Django and the DRF 46 CRUD Viewsets in DRF 47 Models, Forms, and Serializers 48 From WSGI to ASGI 50 Getting Started with Asynchronous Django 51 Competing Asynchronous Frameworks and the DRF 53 Summary 54 Additional Resource 54 Chapter 4: Advantages and Disadvantages of Decoupled Architectures 55 Pseudo-Decoupled Django 55 Pseudo-Decoupled Without REST 55 Pseudo-Decoupled with REST 59 Fully-Decoupled Django 61 Fully-Decoupled with REST 62 Fully-Decoupled with GraphQL 64 Summary 65 Chapter 5: Setting Up a Django Project 66 Setting Up the Project 66 A Custom User 68 Interlude: Choosing the Right Database 69 Splitting the Settings File 69 Bonus: Running Django Under ASGI 72 Splitting the Requirements File 73 Summary 74 Chapter 6: Decoupled Django with the Django REST Framework 75 Building the Billing App 75 Building the Models 76 Enabling the App 78 Wireframing the Billing App 78 Pseudo-Decoupled with the Django REST Framework 80 Vue.js and Django 80 Building the Vue App 85 Vue.js, Django, and CSS 91 Building the REST Backend 92 Building the Serializers 93 Building the Views and the URL 94 Working with Nested Serializers 98 Fixing the Vue Frontend 99 Summary 101 Additional Resource 101 Chapter 7: API Security and Deployment 102 Django Hardening 102 Django Settings for Production 103 Authentication and Cookies in Django 105 Randomize the Admin URL 108 REST API Hardening 109 HTTPS Encryption and HSTS 109 Audit Logging 109 Cross-Origin Resource Sharing 110 Authentication and Authorization in the DRF 112 Disable the Browsable API 114 Deploying a Decoupled Django Project 115 Preparing the Target Machine 115 Configuring NGINX 116 Gunicorn and Django Production Requirements 117 Preparing Vue.js in Production with Django 118 The Deployment 119 Summary 122 Additional Resource 122 Chapter 8: Django REST Meets Next.js 123 Django as a Headless CMS 123 Building the Blog App 123 Building the Model 124 Enabling the App 125 Building the REST Backend 126 Building the Serializer 126 Building the Views and the URL 127 Introduction to the React Ecosystem 128 A Reintroduction to React 129 Introduction to Next.js 130 Building the Next.js Frontend 131 Pages and Routing 132 Data Fetching 135 Static Site Generation 138 Deploying Next.js 141 Using React with Django 141 The Vue.js Ecosystem 142 Summary 142 Additional Resource 142 Chapter 9: Testing in a Decoupled World 143 Introduction to Functional Testing 143 Getting Started with Cypress 144 Understanding Functional Testing for the Billing App 145 Creating the First Test 146 Filling and Submitting the Form 151 Introduction to Unit Testing 155 Unit Testing in the Django REST Framework 155 Django Settings for Testing 156 Installing the Dependencies and Configuring Requirements for Testing 157 Outlining Tests for the Billing REST API 157 Testing the Billing REST API 158 Summary 162 Additional Resource 162 Chapter 10: Authentication and Authorization in the Django REST Framework 163 Introduction to Token-Based Authentication and JWT 164 Token-Based Authentication: The Good and the Bad 164 JSON Web Tokens in Django: Advantages and Challenges 165 Session-Based Auth for Single-Page Apps 166 Some Words on Production and Development 167 Preparing NGINX for the New Setup 168 Handling the Login Flow with Django 169 Preparing the Vue.js App for the New Setup 173 A Note About HttpOnly Cookies 175 Handling Authentication in the Frontend 176 Authorization and Permissions in the Django REST Framework 179 Summary 181 Additional Resource 181 Chapter 11: GraphQL in Django with Ariadne 182 Getting Started with Ariadne in Django 182 Installing Ariadne 183 Designing the GraphQL Schema 183 Loading the Schema in Ariadne 186 Wiring Up the GraphQL Endpoint 187 Working with Resolvers 191 Using Query Arguments in GraphQL 193 A Word on Schema-First vs Code-First 196 Implementing Mutations 196 Adding a Resolver for the Mutation 199 Introduction to GraphQL Clients 202 Building the React Frontend 203 Getting Started with Apollo Client 204 Creating a Select Component 205 Creating a Form Component 206 Creating the Root Component and Making Queries 206 Using Apollo Hooks for React 211 Summary 214 Additional Resources 214 Chapter 12: GraphQL in Django with Strawberry 215 Getting Started with Strawberry in Django 215 Installing Strawberry 216 Designing the GraphQL Schema in Strawberry 217 Types and Enums in Strawberry 218 Working with Resolvers (Again) 221 Queries in Strawberry and Wiring Up the GraphQL Endpoint 222 Input Types and Mutations in Strawberry 224 Working Asynchronously with the Django ORM 226 Working Again on the Frontend 228 Creating Invoices with a Mutation 228 What’s Next? 237 Summary 238 Additional Resources 238 Index 239 Apply decoupling patterns, properly test a decoupled project, and integrate a Django API with React, and Vue.js. This book covers decoupled architectures in Django, with Django REST framework and GraphQL. With practical and simple examples, you’ll see firsthand how, why, and when to decouple a Django project. Starting with an introduction to decoupled architectures versus monoliths, with a strong focus on the modern JavaScript scene, you’ll implement REST and GraphQL APIs with Django, add authentication to a decoupled project, and test the backend. You’ll then review functional testing for JavaScript frontends with Cypress. You will also learn how to integrate GraphQL in a Django project, with a focus on the benefits and drawbacks of this new query language. By the end of this book, you will be able to discern and apply all the different decoupling strategies to any Django project, regardless of its size. What You'll Learn Choose the right approach for decoupling a Django project Build REST APIs with Django and a Django REST framework Integrate Vue.js and GraphQL in a Django project Consume a Django REST API with Next.js Test decoupled Django projects Who This Book Is For Software developers with basic Django skills keen to learn decoupled architectures with Django. JavaScript developers interested in learning full-stack development and decoupled architectures with Django. Apply decoupling patterns, properly test a decoupled project, and integrate a Django API with React, and Vue.js. This book covers decoupled architectures in Django, with Django REST framework and GraphQL. With practical and simple examples, you'll see firsthand how, why, and when to decouple a Django project. Starting with an introduction to decoupled architectures versus monoliths, with a strong focus on the modern JavaScript scene, you'll implement REST and GraphQL APIs with Django, add authentication to a decoupled project, and test the backend. You'll then review functional testing for JavaScript frontends with Cypress. You will also learn how to integrate GraphQL in a Django project, with a focus on the benefits and drawbacks of this new query language. By the end of this book, you will be able to discern and apply all the different decoupling strategies to any Django project, regardless of its size. You will: Choose the right approach for decoupling a Django project ; Build REST APIs with Django and a Django REST framework ; Integrate Vue.js and GraphQL in a Django project ; Consume a Django REST API with Next.js ; Test decoupled Django projects