1

I created a basic react app with Create React App. I removed all default files and added this into index file.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
constructor() {
    super();
    this.state = {};
}

async componentDidMount() {
    const response = await fetch('/express_backend');
    const json = await response.json();
    this.setState({ data: json.express });
}

render(){
    return (
        <div>{this.state.data}</div>
    );
}
}

ReactDOM.render(<App/>, document.getElementById('root'));

This app works. I can add some letters between divs and it reloads when saving. But when I add simple Express server the reloading stops. I also add "proxy": "http://localhost:5000/" into package.json inside CRA to connect server and client

Here is the server

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

app.listen(port, () => console.log(`Listening on port ${port}`));

// create a GET route
app.get('/express_backend', (req, res) => {
res.send({ express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' });
});

I restarted both Create react app and server in console but now when I add smth between divs in the component nothing is reloading. I guess webpack dev server starts working improperly. How can I make reloading in CRA work and make request to express each time when I change smth in component?

11
  • I don't think 5000 is the standard port for webpack-dev-server so it's probably not a conflict between express and webpack. Do you notice any error in the console or in the network panel ? Commented Apr 29, 2019 at 14:56
  • I have no errors in console or anywhere.Everything is fine Commented Apr 29, 2019 at 14:59
  • 1
    Can you see your query being correctly returned from the server ? Commented Apr 29, 2019 at 15:04
  • yes it is returned from server. I see it on the screen Commented Apr 29, 2019 at 15:24
  • 1
    I just used this tutorial: dev.to/loujaybee/using-create-react-app-with-express and it works great. Apperently, you'll need to run express and the react app in different processes (i.e different terminals). I'll tell you this, this thing lags pretty bad. I have a custom HMR setup with keystonejs and I don't experience any lag such as this. Commented Apr 29, 2019 at 16:05

1 Answer 1

1

When running create-react-app with express, you'll need to run your server.js express app in a separate node process than the react-js-app. Also, you'll need to specify the proxy in your package.json.

Utilize these commands in separate terminals:

node server.js

and in separate terminal:

npm start

Kudos to this tutorial: https://dev.to/loujaybee/using-create-react-app-with-express

Sign up to request clarification or add additional context in comments.

2 Comments

I am sorry I didnt mention that I ran them in 2 terminals from the very start.
Weird, this was a very easy setup. Perhaps try changing from port 5000? I'm not sure what this project uses for webpack-dev-server port, but you never know. If this isn't the issue, I'm at a loss. You may want to start over and re-install all deps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.