DEV Community

Cover image for create-react-app and Express, together on Glitch

create-react-app and Express, together on Glitch

Angelo Stavrow on February 14, 2020

Glitch is the fastest way to get an app or site up and running live on the web, but it runs apps on only one port. Sometimes you need more, like wh...
Read full post
Collapse
 
angelostavrow profile image
Angelo Stavrow •

🛎 UPDATE 🛎

There's a breaking change in http-proxy-middleware between the v0.2.0 version that shipped with this app and the latest and greatest v1.0.0 — I've updated the embedded app to address this

Also, I added an MIT license because you should absolutely to remix and use this app as you see fit!

Collapse
 
aceslowman profile image
Austin Lee Slominski •

For some reason this proxy won't work for me, webpack-dev-server is starting up and working without issues, but sending a GET request to https://my-glitch-app.glitch.me/api/ping results in an error Cannot GET /api/ping. There seems to be something going on with sockjs as well, as webpack-dev-server is having issues with live-reloading.

Is there any reason why, with the configuration you've given, this fetch wouldn't work?:

fetch('https://my-app-name.glitch.me/api/ping').then(d => d.json()).then(d => console.log(d))
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sejori profile image
Sebastien John Ringrose •

Super-duper awesome. This is so damn helpful. You sir, are a saint and I can’t thank you enough. Have a great week and please keep up the good work. Earned my follow.

Collapse
 
angelostavrow profile image
Angelo Stavrow •

Thanks so much for the kind words. I'm glad you found it helpful!

Collapse
 
mindsgaming profile image
MindsGaming • • Edited

Very Cool, was trying this out and ran into a cool feature with Firefox Nightly

dev.to/mindsgaming/quick-apps-on-f...

Collapse
 
angelostavrow profile image
Angelo Stavrow •

Oh, that's really neat. Thanks for sharing!

Collapse
 
osde8info profile image
Clive Da •

somebody has been drinking the mktg coolaid :) "glitch is ONE of the fastest ways to get an app or site up and running"

Collapse
 
filipczapeczka profile image
Filip Czapeczka •

Would you suggest on how to add to this socket.io working with client or this is too much and should be done as a separate project for FE and BE?

Collapse
 
filipczapeczka profile image
Filip Czapeczka •

And of course, very helpful article!

Collapse
 
lucasverra profile image
Lucas Verra •

why don't you use 2 separates projects; one backend and one front end ?

Collapse
 
angelostavrow profile image
Angelo Stavrow •

You certainly could! 🙂

If you just need a simple back-end API for your React project (or, alternatively, a basic React front-end for your API project), you can use the approach in this article. But if the complexity of the overall project grows past that, you're right — it's probably better to use two different Glitch apps, one for the back-end, and one for the front-end.