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.

GitHub

View Github