Setting up a local with React, Socket.io, and WebRTC in 2024

Are you making a React App that uses Socket.io and Express? Or a WebRTC app? Do you need HTTPS on both sides? Adapter.js? In this video, Rob takes you through the process of setting up your local environment for apps that use React, Socket.io, and (optional!) WebRTC. The video doesn't focus on implementing... it is focused on getting everything in place so you can start developing. This is useful if you are going to use React and Socket.io with or without WebRTC because the process is going to be nearly identical (I always use socket.io for my signaling server in WebRTC)! There are 5 main steps in the process (skip any that aren't relevant): 1. Setup Create React App with HTTPS 2. Setup a Socket.io Server (if for WebRTC, this is for signaling) 3. Add HTTPS to the Server 4. (if WebRTC) Add Adapter.js 5. Test the React/Socket.Io Connection (and getUserMedia() Whether you're new to these technologies or just want to see how someone else does it, this video will guide you step by step. Get ready to start coding with React, Socket.io, and WebRTC. Don't forget to subscribe for more helpful tutorials! Links: Why Socket.io instead of native WebSockets: https://youtu.be/e7K9bfB1ZrI What Is a Shim (Adapter.js) Video: https://youtu.be/hGIAj_QQPoQ Code: https://github.com/robertbunch/webrtc-local-setup Full WebRTC course on Udemy - https://www.udemy.com/course/mastering-webrtc-part-2-real-time-video-and-screen-share/?couponCode=7F716748A8840A182DAB ($13 good till 10-5-24) 0:00 - What We Are Doing 1:30 - Why Do We Need This Video? 3:00 - The Steps 3:46 - 1. Create React App 5:11 - 2. Add HTTPS (way 1) 6:27 - 2b. Add HTTPS with mkcert (way 2) 10:50 - Install socket.io-client 11:12 - Express Server Setup 13:20 - Server Certs for Https 15:59 - Socket.io Setup 17:50 - Add Adapter.js (WebRTC only) 19:40 - Connect React to Socket.io 21:31 - Test getUserMedia() (WebRTC only)