Mangabo Kolawole / Мангабо Колаволе - Full Stack Django and React: Get hands-on experience in full-stack web development with Python, React, and AWS / Полный стек Django и React: Получите практический опыт полнофункциональной веб-разработки с помощью

Примеры страниц

Оглавление

Preface xv
Part 1: Technical Background
1
Creating a Django Project 3
An overview of software development 3
Understanding backend development 4
Responsibilities of backend developers 5
What is an API? 6
Understanding REST APIs 7
What is Django? 8
Setting up the work environment 10
Creating a virtual environment 10
Installing Django 11
Creating a sample project 11
Configuring the database 14
Postgres configuration 15
Connecting the database 16
Installing an HTTP request client 18
Summary 18
Questions 18
2
Authentication and Authorization Using JWTs 19
Technical requirements 19
Understanding JWTs 20
Understanding how JWTs are used in authentication 21
Organizing a project 21
Creating a user model 23
What are Django models? 23
Writing the User model 25
Writing UserSerializer 32
Writing UserViewset 33
Adding a router 35
Writing the user registration feature 39
Adding the login feature 45
Refresh logic 48
Summary 50
Questions 50
3
Social Media Post Management 51
Technical requirements 51
Creating the Post model 52
Designing the Post model 52
Abstraction 53
Writing the AbstractSerializer 55
Writing the AbstractViewSet 56
Writing the Post model 57
Writing the Post serializer 60
Writing Post viewsets 61
Adding the Post route 63
Rewriting the Post serialized object 66
Adding permissions 67
Deleting and updating posts 69
Adding the Like feature 71
Adding the posts_liked field to the User model 72
Adding the like, remove_like, and has_liked
methods 73
Adding the likes_count and has_liked fields
to PostSerializer 73
Adding like and dislike actions to PostViewSet 75
Summary 76
Questions 76
4
Adding Comments to Social Media Posts 77
Technical requirements 77
Writing the Comment model 78
Adding the Comment model 79
Creating a comment in the Django shell 80
Writing the comment serializer 80
Nesting routes for the comment
resource 82
Creating nested routes 84
Writing the CommentViewSet class 85
Testing the comments feature with Insomnia 87
Updating a comment 89
Deleting a comment 91
Summary 92
Questions 92
5
Testing the REST API 93
Technical requirements 93
What is testing? 93
What is software testing? 94
Why is software testing important? 95
What are the various types of testing? 95
Understanding manual testing 95
Understanding automated testing 96
Testing in Django 97
The testing pyramid 97
Configuring the testing environment 99
Writing your first test 100
Writing tests for Django models 101
Writing tests for the User model 102
Writing tests for the Post model 103
Writing tests for the Comment model 105
Writing tests for your Django
viewsets 106
Writing tests for authentication 107
Writing tests for PostViewSet 109
Writing tests for CommentViewSet 112
Writing tests for the UserViewSet class 117
Summary 118
Questions 118
Part 2: Building a Reactive UI with React
6
Creating a Project with React 121
Technical requirements 121
Understanding frontend development 121
What is React? 122
Creating the React project 123
Installing Node.js 123
Installing VS Code 125
Adding VS Code extensions 126
Creating and running a React app 128
Installing a debugging plugin in the browser 131
Configuring the project 132
Adding React Router 132
Adding React Bootstrap 133
Creating the Home page 134
Configuring CORS 136
Useful ES6 and React features 138
const and let 138
Template literals 139
JSX styling 140
Props versus states 141
The Context API 143
useMemo 144
Handling forms – controlled components and
uncontrolled components 145
Summary 147
Questions 147
7
Building Login and Registration Forms 149
Technical requirements 149
Understanding the authentication
flow 149
Writing the requests service 150
Protected routes 154
Creating a protected route wrapper 154
Creating the registration page 156
Adding a registration page 156
Registering the registration page route 163
Creating the login page 165
Adding the login page 165
Registering the login page 169
Refactoring the authentication flow
code 171
What is a hook? 171
Writing code for a custom hook 172
Using the functions in code 175
Summary 177
Questions 177
8
Social Media Posts 179
Technical requirements 179
Creating the UI 179
Adding the NavBar component 181
Adding the Layout component 184
Using the Layout component on the home page 186
Creating a post 186
Adding the Toast component 190
Adding toaster to post creation 192
Adding the CreatePost component to the
home page 193
Listing posts on the home page 196
Writing the Post component 196
Adding the Post component to the home page 201
Updating a post 206
Minor refactoring 208
Summary 212
Questions 212
9
Post Comments 213
Technical requirements 213
Creating a UI 213
Tweaking the Post component 214
Adding a back button to the Layout component 216
Creating the SinglePost component 217
Creating a comment 221
Listing the comments 226
Deleting a comment 230
Updating a comment 231
Adding the UpdateComment modal 231
Liking a comment 237
Summary 239
Questions 239
10
User Profiles 241
Technical requirements 241 Listing profiles on the home page 242
Table of Contents xi
Displaying user information on their
profile page 247
Configuring the default avatar 249
Writing the ProfileDetails component 251
Editing user information 257
Adding the edit method to useUserActions 257
The UpdateProfileForm component 258
Creating the EditProfile page 264
Summary 266
Questions 266
11
Effective UI Testing for React Components 267
Technical requirements 267
Component testing in React 267
The necessity of testing your frontend 268
What to test in your React application 268
Jest, the RTL, and fixtures 268
Writing testing fixtures 269
Running the first test 270
Extending the RTL render method 273
Testing authentication components 274
Testing Post components 278
Mocking the localStorage object 278
Writing post fixtures 279
Writing tests for the Post component 280
Testing the CreatePost component 282
Testing the UpdatePost component 286
Snapshot testing 289
Summary 291
Questions 291
Part 3: Deploying Django and React on AWS 293
12
Deployment Basics – Git, GitHub, and AWS 295
Technical requirements 295
Basics of software deployment 296
Tools and methods of web
application deployment 296
Using Git and GitHub 297
Platforms for web application deployment 301
Creating an EC2 instance 301
Configuring the server for the Django project 307
Postgres configuration and deployment 308
Errors made when deploying on EC2 310
Summary 312
Questions 313
13
Dockerizing the Django Project 315
Technical requirements 315
What is Docker? 315
Dockerizing the Django application 316
Adding a Docker image 316
Using Docker Compose for multiple
containers 320
Writing the docker-compose.yaml file 321
Configuring environment variables
in Django 324
Writing NGINX configuration 327
Launching the Docker containers 328
Summary 329
Questions 330
14
Automating Deployment on AWS 331
Technical requirements 331
Explaining CI/CD 331
CI 332
CD 332
Defining the CI/CD workflow 333
What is GitHub Actions? 333
How to write a GitHub Actions workflow file 334
Configuring the backend for
automated deployment 335
Adding the GitHub actions file 335
Configuring the EC2 instance 337
Summary 343
Questions 344
15
Deploying Our React App on AWS 345
Technical requirements 345
Deployment of React applications 345
What is a production build? 346
Deploying on AWS S3 346
Creating a build of Postagram 346
Adding environment variables and building
the application 347
Deploying the React application on S3 349
Automating deployment with
GitHub Actions 354
Writing the workflow file 355
Summary 357
Questions 357
Table of Contents xiii
16
Performance, Optimization, and Security 359
Technical requirements 359
Revoking JWT tokens 359
Adding a logout endpoint 360
Handling the logout with React 363
Adding caching 365
The cons of caching 365
Adding caching to the Django API 366
Using caching on the endpoints 369
Optimizing the React application
build 372
Integrating webpack 373
Using pnpm 376
Securing deployed applications with
HTTPS with AWS CloudFront 378
Configuring the React project with
CloudFront 378
Summary 381
Questions 381
Appendix 383
Logging 383
Database queries optimization 383
Security 383
Answers 385
Index 395
Other Books You May Enjoy 406