Example Demonstrating React with Realtime API Backend
Getting Started with React Realtime Example App
This project contains two folders ./client
and ./server
.
- The server binds to port
4000
, with CORS enabled on the origin which is used by the React app development server (localhost:3000) - CORS config is supplied to the server on initialization:
const s = new Server({ cors: { // origin of react app origin: "http://localhost:3000", methods: ["GET", "POST"] } });
- The React app connects to the server via the Api module:
import openSocket from 'socket.io-client'; const socket = openSocket('http://localhost:4000');
Run the server
Inside the project ./server
directory, run:
yarn start
This will run the socket.io server which will bind to port 4000
.
Run the client
Inside the project ./client
directory, run:
yarn start
This will run the React app in development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
See the section about deployment for more information.