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]
markdown guide
 

Hi,

First of all thanks for the article, it is a great help.:D
I have done all the things you mentioned and I am facing 2 issues,
1) res.json() in List.js gives an error that '<' token is found i.e. syntax error but I didn't use the method just for sake to deploy on heroku.
2) I deployed on heroku succesfully but when I open my app on heroku I am shown "Not Found" error (most probably 404).

Can you help?

 
 

Be sure to remove the git folder (generated by Create React App) in the client directory. Doing so will allow Heroku to build your React app and fix the "Not Found" error.

 

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

 

Hi,
how are you doing

i am interested to be a part of experienced developers to enhance my skills
i am a software engineer having 5 years or working experience in mobile web and desktop apps development

looking forward to hearing from you soon

best regards
devasad

 

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

 

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...

 

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.

 

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

 

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.?

 

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

 

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?

 

try adding cors headers if you're facing the cors related problem

 

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

 

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

 

The proxy will work in local machine only, in heroku the port might be different isn't it?

 

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.

 
 

Great article. Helped me a lot.
Keep up the good work.

code of conduct - report abuse