Deploying a React app with React-Router and an Express Backend

Nicolas Rousseau Burgess on June 19, 2018

In this article we will cover how to create a React application using React-Router for routing and an Express backend. We will then deploy it to ... [Read Full]
 

are you interested to form a team for reactjs freelance projects ? i'm looking for react developers everyway

 

Hi Ahmed,

I am interested in undertaking React projects. I am fairly new to it, but I am confident I can contribute in a React team. Feel free to contact me if you want to continue our conversation.

 

Hi Ahmed, I am very much interested in React projects. You can contact me anytime

 

Hey, Nicolas thank you for this awesome tutorial, it's was very helpful to understand the connection between both layers.

I create my own project structure using KeystoneJS and react and was great! I'm using in my personal projects right now.

 

What is the purpose of npm install --only=dev in the heroku-postbuild script for building the client? I tried removing that bit and it still worked.

 

At the time of writing, I believe that Heroku installed only the production dependencies by default, ignoring the development dependencies under devDependencies. npm install --only=dev had to be added for the project to build correctly. I think this default behavior has been changed so it may no longer be needed!

 

Hello Nicolas,

First of all, thanks a lot for your work. Anyway, I have an issue with your project. If you run the server and then:

cd client
npm install
npm run build
http-server build

The App will be deployed in localhost:8080 and works. But, if I access to the list and reload the page:

[Thu Nov 08 2018 11:35:00 GMT+0100 (GMT+01:00)] "GET /list" Error (404): "Not found"

That's because the HTTP static server doesn't found the list file.

I'm pretty sure that if you access directly to: yourHerokuServer/list you will find the same problem.

There is a little workaround: copy the index.html to list and mark its content type as text/html, but I strongly believe that we need another solution to this issue :/

Thanks for your time.

UPDATE: Same question resolved here: stackoverflow.com/questions/279283...

 

I have a followed your approach but i am facing a issue.

I have one home page route at express from which i want to pass through a middle-ware function isResturantOpen when ever the user visits the react app.

app.get('/',passportConfig.isResturantOpen, (req,res) =>{
console.log('reached')
res.sendFile(path.join(__dirname+'/client/build/index.html'));
});

but when i ever i tries to visit my website home of react.js at this url
localhost:5000/ then my above route does not work

but all the routes are being going to this main route.

app.get('*', (req,res) =>{
console.log(req)
// console.log(res)
res.sendFile(path.join(__dirname+'/client/build/index.html'));
});

so now if i want to apply some different express.js middle ware functions on each different routes then how can i do this..?

Can you please help me on this.?

 

So I would need to run npm start for both express and the client? Is the proxy you added just for local development? How would I deploy this test code of yours to production

 

You would need to run npm start for both locally. It works in production as well, I'll add a section on deployment tonight.

 

For running locally from your ./client folder, you can modify your package.json script to start both at the same time:

"scripts": {
    "start": "node ../index.js | react-scripts start",
    ...
}

And when you C to terminate batch job, it will terminate both front and back localhosts.

 

Thanks. I would guess you would want to compile the code in the client folder so yeah, would love to read about that process

I've added a short section, I hope that everything is clear

Yes this makes sense. Your creating a Node Heroku setup and it will run that. Thanks

 

Hi Nicolas,

Thanks for the article. It seems that when I make the fetch request for the list at ('api/getList') I get a 404 error. It seems that the request is ignoring the proxy and trying to go to 'localhost:300/api/getList' rather than 'localhost:5000/api/getList'.

If I fully define the path in the fetch request ie fetch('localhost:5000/api/getList') then I get an error:
Access to fetch at 'localhost:5000/api/getList' from origin 'localhost:3000' has been blocked by CORS policy: blah blah blah

I understand that one should never really unblock CORS. So my question is, how to I make get requests to my server? And what is the point in the 'proxy' if it does not solve this problem?

 

I wasted my 4 hours in looking for this way. Thanku for this article

 

Super helpful guide! Straight forward setup and introduced me to some technologies and concepts.

 

Nicolas this is wonderful explanation. Keeping everything simple! Thank you!

 

How can we publish in plesk? We have a shared server with Windows - I think with IIS - and node.js (if necessary)... Can you help us?

 

The only guide I found that worked right away, thanks broski

 
 

Great article, Nicolas! It really helped me with a project I was hitting the wall with. Cheers.

 
code of conduct - report abuse