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