Ask coding questions

← Back to all posts
ReactJS with Express
426729 (145)

After using React a bit in the Repl.it environment, I have decided to use an Express-React app. The React rendering and hosting style is foreign to me, so I do not understand how to merge that with an Express app. How would I do so?

Commentshotnewtop
timmy_i_chen (952)

Took me a while to figure this out, but here's a template you can use: https://repl.it/@timmy_i_chen/react-express-template (kudos to nathandalal, whom i had the pleasure of working with last year)

Basically, you use webpack to compile the client (written in react) into a single bundle.js file, which you serve to your users. The express server works as you'd expect, serving static files + the bundle.js file.

Note that when using my template when making changes to the client you won't need to restart the server (but you will need to refresh the preview window after a second when it rebuilds). Webpack is run with the --watch flag which will re-bundle everything after any files are changed.

426729 (145)

@timmy_i_chen Thanks so much! Is there any way that I could use this with multiple React pages?

426729 (145)

@timmy_i_chen Thanks! That makes a lot of sense!

timmy_i_chen (952)

@426729 Is this when you try to view mine or when you try to fork it?

JohnsonTheGreat (25)

@timmy_i_chen Out of curiosity, how do you decide when to use Express for your routing and when to use React?

timmy_i_chen (952)

@JohnsonTheGreat I think the recommendation is to use express routing for HTTP requests (like sending or receiving data from the database), whereas react routing is for anything related to the front-end (pages that the user will see).

MerhawieWoldezi (0)

@timmy_i_chen Great example -- but I can't get it to work? Granted, I started with a Node REPL and cannot get the bundle.js to write into my app/public directory. The funny thing is the spawned worker/process doesn't error out.

timmy_i_chen (952)

@MerhawieWoldezi Can you link me to the repl you're trying it with? It takes a second for the bundle to build so it may not be reflected directly in the webview

MerhawieWoldezi (0)

@timmy_i_chen Sure -- here you go: https://repl.it/@MerhawieWoldezi/BustedSlimyEngine. Thank you in advance for your help. I've been stymied for too long

timmy_i_chen (952)

@MerhawieWoldezi Hi! After playing around (need to divert my time to something else for now, may return later) - try running this, which should provide more helpful errors for debugging:
https://repl.it/@timmy_i_chen/BustedSlimyEngine

Let me know if you figure out what went wrong!

MerhawieWoldezi (0)

@timmy_i_chen I think it was a misconfiguration in the config file. Thank you for your help -- I couldnt figure out the error writing.