All language subtitles for 13 - Connecting Node React English

And with that, we're almost done with the theory.

Now there's just one more thing left and that is related to how we host our different parts.

You know from the big picture that we have three big blocks, the React app, the Node Express app and

the MongoDB database and the server that database runs on.

Now the question is, where are the different pieces served from?

Now we got two main options here,

we can have one server, one computer which hosts both our Node API and the React single page application

under the same domain,

so my mypage.com/ might return our single page application and then under

mypage.com/api, we might have the endpoints for that single page application to talk to.

The alternative is that we have two separated servers,

one very simple server which simply serves our single React.js application HTML page and all the

Javascript files

that application needs and one server which hosts our API. So if we take a closer look, for the left case

that we have one single server, we have a Node Express API which handles incoming requests on that server,

for example under /api,

any requests targeting these paths might reach our API and requests which are not targeting our API routes

would return the React single page application in the end,

so these requests would get us a single HTML file and the associated Javascript files that are required

to run the React app. Between the React app and the Node API,

even though they're running on the same server, we have that separation you learned about, so they don't really know much

about each other

other than that they run on the same server,

data is still exchanged with these Ajax background requests in JSON format.

If we have the two separated servers,

then we really have two different machines, one which has our Node API on it,

our Node Express API and one which is served from that very simple, so-called static host, static because

it will be a server which doesn't need to execute any server side code because it is a server that

doesn't run any Node or any other programming language application on it,

instead it's just a server which returns our HTML file and Javascript files and the CSS files

and so on.

So therefore we got our two ends served on different servers and data is exchanged in JSON format

when we sent these background HTTP requests.

So that's always the same,

in one case they're just served from the same machine, in the other case from two machines,

in both cases we got these logically separated apps.

Now regarding the MongoDB database, that always has its own database server but just like

the Node server and the React app, this server could be installed on the same physical machine as our

Node and maybe also React app runs on or on a separate machine and often you want to use different

machines here to make sure that just because you're getting a lot of requests, you're not slowing down

on your database requests or database queries and the other way around,

so therefore separating the Node Express app and the database server onto two different machines is

a good idea.

Technically you could run everything on the same machine,

you'll always have the same logical separation though.

Now actually, there also is a third way which I really don't want to talk too much about though,

you could have your Node Express server and not build a REST or GraphQL API there but instead, render

HTML pages on the fly, on that server with templating engines like EJS or Pug.

If you took my Node.js - The Complete Guide course, you learned about this approach as well.

Now you therefore really rendered different HTML pages for different requests on the server and

that rendered HTML code is returned. Now to get React into the equation,

you could have some parts of these pre-rendered HTML pages which are controlled by React in a widgetlike

way, so React only controls parts of the page instead of the entire page.

This is possible but it takes away from the great, highly reactive user experience

we can build with single page applications. Since we create and return HTML pages from the server

for everything the user does,

we constantly reload pages, we add a slight delay and we don't have that highly reactive mobile applike

feeling we can achieve with single page applications.

Therefore this is not the approach we will use here,

technically of course though you could build an application with the same technologies, MongoDB

Express React and Node, so MERN, with this approach but you would not get the same great user experience

and therefore typically when we talk about MERN, we talk about the logically separated ends, no matter if

they're served by the same physical machine or not,

we don't talk about this approach. Well and with that all out of the way, let's have a look at the very

simple first MERN application so that you can see the big picture

also in code before we den dive into the different course modules where we will get a refresher on React

Node Express and MongoDB and then more importantly, build the different building blocks of our

course project which is such a MERN app and then also connect these building blocks.