Search icon CANCEL
Subscription
0
Cart icon
Cart
Close icon
You have no products in your basket yet
Save more on your purchases!
Savings automatically calculated. No voucher code required
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Modern Full-Stack React Projects

You're reading from  Modern Full-Stack React Projects

Product type Book
Published in Jun 2024
Publisher Packt
ISBN-13 9781837637959
Pages 506 pages
Edition 1st Edition
Languages
Author (1):
Daniel Bugl Daniel Bugl
Profile icon Daniel Bugl
Toc

Table of Contents (28) Chapters close

Preface 1. Part 1:Getting Started with Full-Stack Development
2. Chapter 1: Preparing for Full-Stack Development 3. Chapter 2: Getting to Know Node.js and MongoDB 4. Part 2:Building and Deploying Our First Full-Stack Application with a REST API
5. Chapter 3: Implementing a Backend Using Express, Mongoose ODM, and Jest 6. Chapter 4: Integrating a Frontend Using React and TanStack Query 7. Chapter 5: Deploying the Application with Docker and CI/CD 8. Part 3:Practicing Development of Full-Stack Web Applications
9. Chapter 6: Adding Authentication with JWT 10. Chapter 7: Improving the Load Time Using Server-Side Rendering 11. Chapter 8: Making Sure Customers Find You with Search Engine Optimization 12. Chapter 9: Implementing End-to-End Tests Using Playwright 13. Chapter 10: Aggregating and Visualizing Statistics Using MongoDB and Victory 14. Chapter 11: Building a Backend with a GraphQL API 15. Chapter 12: Interfacing with GraphQL on the Frontend Using Apollo Client 16. Part 4:Exploring an Event-Based Full-Stack Architecture
17. Chapter 13: Building an Event-Based Backend Using Express and Socket.IO 18. Chapter 14: Creating a Frontend to Consume and Send Events 19. Chapter 15: Adding Persistence to Socket.IO Using MongoDB 20. Part 5:Advancing to Enterprise-Ready Full-Stack Applications
21. Chapter 16: Getting Started with Next.js 22. Chapter 17: Introducing React Server Components 23. Chapter 18: Advanced Next.js Concepts and Optimizations 24. Chapter 19: Deploying a Next.js App 25. Chapter 20: Diving Deeper into Full-Stack Development 26. Index 27. Other Books You May Enjoy

Setting up Socket.IO

To set up the Socket.IO server, we are going to base our code on what we had in Chapter 6, Adding Authentication and Roles with JWT, as it already includes some boilerplate for a backend and frontend with JWT authentication. Later in this chapter, in the Adding authentication by integrating JWT with Socket.IO section, we are going to make use of JWT to add authentication to Socket.IO:

  1. Copy the existing ch6 folder to a new ch13 folder, as follows:
    $ cp -R ch6 ch13
  2. Open the ch13 folder in VS Code.
  3. Now, we can start setting up Socket.IO. First, install the socket.io package in the backend folder by running the following commands:
    $ cd backend/
    $ npm install socket.io@4.7.2
  4. Edit backend/.env and change DATABASE_URL so that it points to a new chat database:
    DATABASE_URL=mongodb://localhost:27017/chat
  5. Edit backend/src/app.js and import the createServer function from node:http and the Server function from socket.io:
    import { createServer } from &apos...
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $15.99/month. Cancel anytime