React/NodeJS – Web page doesn’t work when go at localhost:3000

first of all i’d like to say that i’m a new developer of React and NodeJS.

I want use this technologies: – React as a client – NodeJS as a server – Webpack for build my files.

My project structure is the follow:

my-application/

webpack.server.js

webpack.client.js

server.js

client/client.js

client/app.js

client/components/header.js

client/components/mainLayout.js

client/components/footer.js

The header and footer files are not important so i’m not writing here. The important file are the following:

mainLayout.js

import React, { Component } from 'react';

// import component
import Header from './header';
import Footer from './footer';

class MainLayout extends React.Component {
  constructor (props) {
    super(props)
  }

  render() {
        return (
          <div className="App">
            <Header />

              {this.props.children}

            <Footer />
          </div>
        );
    }
}

export default MainLayout;

app.js

import React, { Fragment } from 'react';
import { Route, Switch } from 'react-router-dom';

import MainLayout from './components/mainLayout'

const AppComponent = () =>
    <Switch>
        <Route path="/" exact render={props => (
            <MainLayout>
                <h1>Hello World</h1>
            </MainLayout>
        )} />
    </Switch>
;

export default AppComponent;

client.js

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';

import AppComponent from './app';

ReactDOM.hydrate(
    <BrowserRouter>
        <AppComponent />
    </BrowserRouter>,
    document.querySelector('#root')
);

server.js

import express from 'express';
import React from 'react';

import AppComponent from './client/app'

var app = express();

const PORT = 3000;

app.use("/", express.static("build/public"));

app.get("/", (req, res) => {
    res.send(<AppComponent />)
});

app.listen(PORT, () => console.log('Now browse to localhost:3000'));

Run my project:

npm run build

npm run dev

but when i’m going at http://localhost:3000 my page response is {“key”:null,”ref”:null,”props”:{},”_owner”:null,”_store”:{}}.

I don’t understand why i have the error, something probably escapes me but i don’t what.

Can you help me please?

Thanks you in advance, AS

Answer

You are running both front and back end on the same port. Go to package.json for your react app and replace your start script with the following script:

"scripts": {
    "start": "set PORT=3007 && react-scripts start",
     // the rest of your scripts
}

This will be the first step for resolving your issue. If you keep getting errors after that, let us know what are they.