Connecting a React app to a backend on the same origin can be a challenge, especially when it comes to handling CORS and ports. In this article, we will explore a solution that allows you to serve your React app and a server-side backend from the same origin without the need for CORS.

When developing a React app, one commonly used approach is to utilize the create-react-app tool. It provides a convenient way to start and develop a React app. However, integrating it with an existing backend or creating a new one can be tricky.

Development Environment

To begin, let’s assume that you are testing this integration. Start by creating a React app using create-react-app:

npx create-react-app testing

Then, navigate to the app directory:

cd testing

Next, create a simple Express server in a server.js file. You can place this file anywhere you prefer, even in a separate folder. If you choose to add it inside the create-react-app application code, install Express using the following command:

npm install express

Once installed, open the server.js file and add the following code:

const express = require('express');
const app = express();

app.get('/hey', (req, res) => res.send('ho!'))

app.listen(8080)

One crucial point to note is that you need to modify the package.json file. Add the following line somewhere in the file:

"proxy": "http://localhost:8080"

This configuration tells React to proxy API requests to the Node.js server built with Express.

Now, you can run the Node.js server by executing node server.js. In another terminal window, start the CRA app using npm start. When the browser opens on port 3000 (by default), open the DevTools and run the following code:

fetch('/hey')

If you check the network panel, you should receive a successful response with the message ho!.

Production Environment

In a production environment, you’ll run npm run build to build and deploy your React app. In this setup, you will use the Express server to serve the static files.

The proxy configuration is not needed in production and will not work either since it’s designed to ease development. However, you can leave it in the package.json file if you find it convenient.

In the code snippet below, we first require the path module and instruct the Express app to serve the static build of the React app:

const express = require('express')
const path = require('path')
const app = express()

app.use(express.static(path.join(__dirname, 'build')))

app.get('/ping', (req, res) => {
  return res.send('pong')
})

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'))
})

app.listen(8080)

By using the express.static() middleware, we serve the static files from the build directory. Additionally, we define two routes: one to handle a /ping request and another to handle the root / request.

In summary, by following the steps outlined in this article, you can easily connect your React app to a backend on the same origin. This approach allows you to develop and serve your React app seamlessly, without worrying about CORS and ports.

Tags

React, backend integration, same origin, create-react-app, CORS