Thread

Sudhama

Founder, www.muzenly.com

Mar 2, 2016

Separating API's from rendering in Mern kit and isomorphic redux apps

For better performance, we wish to separate the rendering from api calls for data, and hence we want to have api's being served from a different server than the one rendering pages.

Does anyone have experience with this approach for a production quality app and have any inputs?
Anyone has an example of how to do this, specially with the Mern.io starter kit?

#mern

Responses(3)

Sandeep Panda

co-founder, Hashnode

Mar 2, 2016

If you want to serve data from a different server, you can just change the base url. This can be done by passing env variable BASE_URL while starting the server. Take a look at this line.

Does that answer your question?

thanks Sandeep, specially for the promptness! So am i right in also assuming then that all the server side code - controllers, models, routes, tests folders as well as the config.js would sit on a different code base as opp to this kit? so we'd be left with only the server.js ( minus the mongoose stuff ) and the fetchData.js under utils right? so a very light weight server

Rick Hanlon II

Just a dev from Akron, Ohio.

Mar 11, 2016

Keep in mind that MERN has just one server which handles both the web rendering and the API. It just does a really good job at separating the code.

So if you use a different API with BASE_URL, you'll probably want to gut this from your server.js:

app.use('/api', posts);

IMO MERN should move to different processes for the web tier and API tier. I think react-redux-universal-hot-example is a good example of this.

Zach Sosana

all things javascript

Mar 2, 2016

@sandeep & @sudb thought for sure you where talking about Cross-origin resource sharing (CORS) but sounds like you would be using same server domain correct?

hey Zach, I was not planning to use the same server domain, so basically one server ( on a different host perhaps ) would only be responsible for rendering and serving the components, and the other would be responsible for serving api calls - addPost, deletePost , etc. This would allow the api server to not worry about the rendering n stuff. We think later on this model could scale better. Any thoughts? But ya, I am running into Cross-origin issues and somehow simply setting 'Access-Control-Allow-Origin': '*' did not fully help.. so trying to debug it

Hi Rick, we managed to do what you are saying. Like you said, MERN is defined perfectly like a starter kit should be and simple enough to separate out the api server. I put up a couple of sample repos which have the code separated out github.com/sudhamab/mern-without-api-server and https://github.com/sudhamab/mern-api-server. These can be run in conjunction and it took very little effort to do this. I think the kit is great in that it lets you keep things simple if you want to or then modify it.

As for the other Universal Hot example you were mentioning, thats really good too and we like it a lot, but it packs in a lot of stuff so initially we got a bit overwhelmed because the reasoning behind how certain things were done were not obvious to us. I think at some point we'll have to learn from both these and create our own version of it. Thanks for mentioning it though.

PS: The credit for the underlying code for the 2 sample repos above has been given to the Hashnode team. I just wanted to share it as an example for reference in case it helps others like us.

Search Hashnode

Separating API's from rendering in Mern kit and isomorphic redux apps

Responses(3)