Original subtitles

‫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.