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/ponents/header.js
client/ponents/mainLayout.js
client/ponents/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 ponent
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 './ponents/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
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/ponents/header.js
client/ponents/mainLayout.js
client/ponents/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 ponent
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 './ponents/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
Share Improve this question edited Dec 4, 2018 at 10:20 act-studio asked Dec 4, 2018 at 10:02 act-studioact-studio 611 gold badge2 silver badges10 bronze badges 1- maybe because nodejs and react are running in the same port and I don't think that is possible or you need to change something to make it work – Vencovsky Commented Dec 4, 2018 at 10:23
4 Answers
Reset to default 2You 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.
I ran the application again using npm
.
In the mand I entered: npm start
in the application folder after this it worked again.
In App.js, add Routes in the import. Use element instead of ponent.
For Example:
import {BrowserRouter, Routes, Route, Link, Switch} from 'react-router-dom'
<Navbar />
<BrowserRouter>
<Routes>
<Route path="/" exact element = {</>}/>
<Route path="/" exact element = {</>}/>
</Routes>
</BrowserRouter>
This can be from the browser you are using. Copy the local host address on your address bar and paste on a different browser, Chrome remended. This is based on personal experience. It kept rolling on Opera browser until I opened it on Chrome.