DEV Community

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 He...
Collapse
 
rebaiahmed profile image
Ahmed Rebai

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

Collapse
 
developerasad profile image
DeveloperAsad

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

Collapse
 
iambenkay profile image
B_aaS

I am really interested. Is this still up?

Collapse
 
jidemobell profile image
Olajide Olaniyan

Interested in this Ahmed

Collapse
 
jrodriguez2076 profile image
Jose Rodriguez

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.

Collapse
 
mohanant profile image
MohananT

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

Collapse
 
tanveerali_s profile image
Tanveer Ali

Hey Ahemd,

Lemme know if this is still open, I'm interested

Collapse
 
crownedlake profile image
SACHIN CHAND

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?

Collapse
 
jfkinslow profile image
Joshua Kinslow

i have the same issue with deploying to heroku.

Collapse
 
gn profile image
GN

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.

Collapse
 
davegrnr profile image
davegrnr

I'm running into the same problem now - did you ever happen to find a solution to this?

Collapse
 
verheyenkoen profile image
Koen Verheyen

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.

Collapse
 
nburgess profile image
Nicolas Rousseau Burgess

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!

Collapse
 
jnusan profile image
jnusan

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.

Collapse
 
mohamed82157221 profile image
Mohamed

Error when typing "npm start" in home directory

thats what it says
npm ERR! code ELIFECYCLE
npm ERR! errno 255
npm ERR! react-express-ex@1.0.0 start: node ../index.js | react-scripts start
npm ERR! Exit status 255
npm ERR!
npm ERR! Failed at the react-express-ex@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

any solution to this problem

Collapse
 
aaronplanell profile image
Aaron Planell López • Edited

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

Collapse
 
jrock2004 profile image
John Costanzo • Edited

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

Collapse
 
nburgess profile image
Nicolas Rousseau Burgess

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

Collapse
 
mccoyrjm profile image
Ryan McCoy

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.

Collapse
 
jrock2004 profile image
John Costanzo

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

Thread Thread
 
nburgess profile image
Nicolas Rousseau Burgess

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

Thread Thread
 
jrock2004 profile image
John Costanzo

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

Collapse
 
mosesa0609 profile image
Alonzo Moses

I'm getting this error when I try to start the react app:

Failed to compile
./src/index.js
Module not found: Can't resolve 'react-router-dom' in 'C:\Users...'

I followed the tutorial. Am I missing something?

Collapse
 
mmilmore profile image
m-milmore

in client folder do npm install react-router-dom. It wasn't mentioned in the tutorial

Collapse
 
usamamashkoor profile image
usamamashkoor

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

Collapse
 
jsampayoramos profile image
jsampayoramos

Hi Nicolas,
Thanks for this article. It was really useful for me to get started with a React/Express project.
I would like to ask you if there is a way to deploy by uploading a build folder manually to a server. I am a React beginner so apologies for any mistake in my question.
Kind regards,
João

Collapse
 
dbmi profile image
dbMI

I have the same problem. The router entry in package.json doesn't seem to be working. the /api calls still go to the react app on port 3000.
Here is my package.json file:
{
"name": "ubwo",
"version": "0.1.0",
"private": true,
"proxy":"localhost:5000/",
"dependencies": {
"react": "16.8.6",
"react-dom": "16.8.6",
"react-redux": "7.1.0",
"react-router": "5.0.1",
"react-router-dom": "5.0.1",
"react-scripts": "3.0.1",
"redux": "4.0.1",
"redux-thunk": "2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"resolutions": {
"browserslist": "4.6.2",
"caniuse-lite": "1.0.30000974"
}
}

Any ideas what I can try to get this working?

Collapse
 
giacomo9999 profile image
James Gary • Edited

You could try using http://localhost:5000 instead of what you have now (localhost:5000/). (Actually, having written that I'm not sure that IS the problem...this board seems to be reformatting URLs that aren't backtick-ed.)

Just FYI: I started from zero with this tutorial a few hours ago and got everything 100% working (including a Heroku deploy). So any bugs you might encounter are probably not in the posted code.

Collapse
 
codingjlu profile image
codingjlu

path.join should be passed two arguments. It's redundant the way you're using it in your main express file.

Collapse
 
jharper8393 profile image
James Harper

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?

Collapse
 
crownedlake profile image
SACHIN CHAND

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

Collapse
 
mccoyrjm profile image
Ryan McCoy

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

Collapse
 
rexyou profile image
Rexyou • Edited

Hi Nicolas, I had follow your steps to do a easier version. But When I deploy to heroku, it's just present "Not Found", could you please advice any solution for current heroku deployment? Below provided client side package json

Collapse
 
rexyou profile image
Rexyou

Hi Nicholas, I had found out the reason that my page is showing "Not Found". May I know is there anyway to push the client folder to heroku? Because I cloned the whole file and found out my client folder is totally empty.

Collapse
 
singhbhavneet profile image
Bhavneet Singh

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

Collapse
 
crownedlake profile image
SACHIN CHAND

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

Collapse
 
jasonrundell profile image
Jason Rundell

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

Collapse
 
burntsugar profile image
Rach

Rad walkthrough. Thanks! :)

Collapse
 
sanion profile image
Elvin Damirov

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

Collapse
 
hegazy360 profile image
Mohamed Hegazi

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

Collapse
 
diegooferreira profile image
diegooferreira

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?

Collapse
 
madza profile image
Madza

Is it possible to deploy this on Apache?

Collapse
 
johnnybar profile image
Jonathan Bareket

Great tutorial, thanks! Helped me a lot with setting up a project and saved a lot of headache:)

Collapse
 
tomeraitz profile image
Tomer Raitz

Thank you so much for this! I have been looking for a solution for a few hours

Collapse
 
theashishmaurya profile image
Ashish maurya

While doing this there is a Problem i get when i manually input the routes like \list i get error of cannot GET \list . How to solve this ??.

Collapse
 
nunogervasio profile image
Nuno Gervasio

Great post. Thanks!

Collapse
 
mohamed82157221 profile image
Mohamed

Awesome .best totorial I have ever came onto in devto

Collapse
 
spattk profile image
Sitesh Pattanaik

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

Collapse
 
bawhari profile image
bawhari • Edited

hi
How to fix this error?
thepracticaldev.s3.amazonaws.com/i...

Collapse
 
babolfazl profile image
Abolfazl

Thanks a lot. It solved my problem with the BrowserRouter of React.js.
The trick for me was proxy in manifest.json