I think the single most used way to start a React app is using create-react-app
. It’s very convenient.
One problem you might stumble upon is how to connect it to a backend you already have, or one you might want to create.
In development
When developing the app you want to take advantage of hot reloading and all the other convenient features of create-react-app. How can you combine that with a backend without having to use CORS on the server and worry about ports?
I am going to provide an example using Express in the post, but this applies to any other framework.
Assuming you are testing this, let’s create a React app:
npx create-react-app testing
then
cd testing
Now create a simple Express server in a server.js file, which you can add anywhere you want. It can even be in a separate folder altogether.
If you choose to add this file inside the create-react-app
application code, run:
npm install express
And we’re ready to go. Add this simple Express setup:
const express = require('express');
const app = express();
app.get('/hey', (req, res) => res.send('ho!'))
app.listen(8080)
Crucial point here: open the package.json
file and add this line somewhere:
"proxy": "http://localhost:8080"
This tells React to proxy API requests to the Node.js server built with Express.
Now run this Node process using node server.js
. In another window you start the CRA app using npm start
.
When the browser opens on port 3000 (by default), open the DevTools and run:
fetch('/hey')
If you check the network panel, you should have a successful response with the ho!
message.
In production
In production, you are going to run npm run build
when you are ready to deploy and we will use the Express server to serve those static files.
The whole proxy thing is now useless (and will not work in production, too - it’s meant to ease development). Which means you can leave it in the package.json
file if you find it convenient.
In the code below, we require the path
built-in Node module and we tell the 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)
Download my free React Handbook
More react tutorials:
- A React simple app example: fetch GitHub users information via API
- Build a simple counter with React
- VS Code setup for React development
- How to pass props to a child component via React Router
- Create an app with Electron and React
- Tutorial: create a Spreadsheet using React
- The roadmap to learn React
- Learn how to use Redux
- Getting started with JSX
- Styled Components
- Introduction to Redux Saga
- Introduction to React Router
- Introduction to React
- React Components
- The Virtual DOM
- React Events
- The React State
- React Props
- The React Fragment
- The React Context API
- React PropTypes
- React concepts: declarative
- React: How to show a different component on click
- How to loop inside React JSX
- Props vs State in React
- Should you use jQuery or React?
- How much JavaScript you need to know to use React?
- Introduction to Gatsby
- How to reference a DOM element in React
- Unidirectional Data Flow in React
- React Higher Order Components
- React Lifecycle Events
- React Concept: Immutability
- React Concept: Purity
- Introduction to React Hooks
- Introduction to create-react-app
- React Concept: Composition
- React: Presentational vs Container Components
- Code Splitting in React
- Server Side Rendering with React
- How to install React
- CSS in React
- Using SASS in React
- Handling Forms in React
- React StrictMode
- React Portals
- React Render Props
- Testing React components
- How to pass a parameter to event handlers in React
- How to handle errors in React
- How to return multiple elements in JSX
- Conditional rendering in React
- React, how to transfer props to child components
- How to get the value of an input element in React
- How to use the useState React hook
- How to use the useCallback React hook
- How to use the useEffect React hook
- How to use the useMemo React hook
- How to use the useRef React hook
- How to use the useContext React hook
- How to use the useReducer React hook
- How to connect your React app to a backend on the same origin
- The Reach Router Tutorial
- How to use the React Developer Tools
- How to learn React
- How to debug a React application
- How to render HTML in React
- How to fix the `dangerouslySetInnerHTML` did not match error in React
- How I fixed an issue with a React login form state and Browser autofill
- How to configure HTTPS in a React app on localhost
- How to fix the "cannot update a component while rendering a different component" error in React
- Can I use React hooks inside a conditional?
- Using useState with an object: how to update
- How to move around blocks of code with React and Tailwind