Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/esausilva/example-create-react-app-express
Example on using create-react-app with a Node Express Backend
https://github.com/esausilva/example-create-react-app-express
create-react-app express node react
Last synced: 4 days ago
JSON representation
Example on using create-react-app with a Node Express Backend
- Host: GitHub
- URL: https://github.com/esausilva/example-create-react-app-express
- Owner: esausilva
- License: mit
- Created: 2017-11-14T13:20:46.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:08:31.000Z (about 2 years ago)
- Last Synced: 2025-01-13T00:09:54.374Z (11 days ago)
- Topics: create-react-app, express, node, react
- Language: JavaScript
- Homepage: https://esausilva.com/2017/11/14/how-to-use-create-react-app-with-a-node-express-backend-api/
- Size: 2.78 MB
- Stars: 374
- Watchers: 9
- Forks: 141
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# create-react-app React Project with Node Express Backend
> Example on using create-react-app with a Node Express Backend
## Usage
Install [nodemon](https://github.com/remy/nodemon) globally
```
npm i nodemon -g
```
Install server and client dependencies
```
yarn
cd client
yarn
```
To start the server and client at the same time (from the root of the project)
```
yarn dev
```
Running the production build on localhost. This will create a production build, then Node will serve the app on http://localhost:5000
```
NODE_ENV=production yarn dev:server
```
## How this works
The key to use an Express backend with a project created with `create-react-app` is on using a **proxy**. We have a _proxy_ entry in `client/package.json`
```
"proxy": "http://localhost:5000/"
```
This tells Webpack development server to proxy our API requests to our API server, given that our Express server is running on **localhost:5000**
## Tutorial
Visit my [blog post](https://esausilva.com/2017/11/14/how-to-use-create-react-app-with-a-node-express-backend-api/) entry for a detailed step-by-step guide.
[Deployed app](https://cra-express.herokuapp.com/)
## Giving Back
If you would like to support my work and the time I put into making tutorials, consider getting me a coffee by clicking on the image below. I would really appreciate it!
[](https://www.buymeacoffee.com/esausilva)
-Esau