DEV Community

Running React and Node.js in one shot with concurrently!

Vikas Raj on July 22, 2019

Often time working on a full stack project can be intimidating. I often found myself in the same situation whether it is a personal or proffesional...
Collapse
 
iameddieyayaya profile image
Eddie Gomez

Is it preferable to use two package.json for frontend and backend?

How would you hook up Express, and React with one Package.json?
And if you were to set up react from scratch. Not using create-react-app but setting up webpack?

Collapse
 
numtostr profile image
Vikas Raj

Why do you want to use a single package.json for both frontend and backend?

IMO You should always make your apps i.e. Frontend and Backend decoupled from each other as much as possible which I always do. I personally don't have any reason to use single package.json for both and never really tried.

Closest thing that I have done is that after building react app. I served the static build from the express server.

Ummm.. Setting up react from scratch with webpack, I will pass.

Hope this helps. :-)

Collapse
 
iameddieyayaya profile image
Eddie Gomez

I was just wondering what common practice is. And, how to set it up if you were only using a single package.json.
I'm working on a project with a buddy; They prefer not to use create react app. Because it's "bloated".

All examples i've seen have like you said Frontend and Backend decoupled from each other.

Thanks for the reply!

Thread Thread
 
numtostr profile image
Vikas Raj • Edited

IMO, create-react-app is not bloated. It's a production ready environment. But, thats a whole another discussion.

And, most developers prefers a decoupled setup. If you want a decoupled setup, then just look into yarn workspaces.

Collapse
 
zullubalti profile image
Zullu

Can you show how can someone serve the static build from express server.
In some automatic way (not just copy/paste the build folder in the public folder of express)

Thread Thread
 
numtostr profile image
Vikas Raj

You do need to serve the static build from the server.

Just serve the build files when NODE_ENV==="production"

The automatic part is that the copy/paste part will be handled by your docker image.

Collapse
 
codingjlu profile image
codingjlu

It's preferable so you can separate your client-side packages from the server-side ones. It's more organized.

Collapse
 
deepanshu207_21 profile image
deepanshu singh • Edited

I have the same project structure as yours and same files as yours.
I have installed concurrently, added proxy in package.json of client. Still the concurrenly command is giving the error.
dev-to-uploads.s3.amazonaws.com/i/...

The error i am getting is this one:
dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
omermizrahi profile image
omer-mizrahi

I also have the same problem, have you been able to solve it?

Collapse
 
deepanshu207_21 profile image
deepanshu singh • Edited

Yes, it's working now... The issue was with the OS version and windows , concurrently was not working in some circumstances
Can you please tell what OS and bit version you are working on ?

Collapse
 
omermizrahi profile image
omer-mizrahi

try this :
"client": "cd frontend/ && npm start --perfix frontend",

Collapse
 
nasreenkhalid profile image
NasreenKhalid

were you able to fix this error? I got the same error and unable to fix...
Can you please help
Thanks

Collapse
 
nasreenkhalid profile image
NasreenKhalid

Nevermind..I figured out the issue..it was a typo in the proxy address :S

Collapse
 
hosmercury profile image
HMerc

please specify which package.json , coz there is 2

Collapse
 
numtostr profile image
Vikas Raj

If you want add proxy, add it in the client's package.json.

Collapse
 
hosmercury profile image
HMerc

Thx for your great effort
Thats i told for clarity

Collapse
 
thisismanaswini profile image
Manaswini

Thank you for this Vikas!!! I'm so happy right now..I connected my project's React Front-end to Node Back-end!

Collapse
 
ksullihis profile image
ksulli-his

Would you know anything about how to get this built and then hosted?