Original subtitles

‫So let's see that big picture or at least parts of it

‫because MongoDB requires this extra database server setup which we'll tackle in a separate module

‫but let's see this part at least, the React and Node Express API communication part in action in a simple

‫application

‫and no worries, this is just a short demo application, we'll build one, a way bigger one in the course project

‫from the ground up throughout the rest of this course. Attached, you find a zip folder which can unzip and in

‫there, you'll find a frontend and a backend folder.

‫Now combined, this makes up your MERN application and this is a very simple dummy application which

‫I prepared for you.

‫The frontend holds React application, the frontend folder here was created

‫or this project here was created with create-react-app which is a tool by the React team to create React

‫projects

‫and it holds a React application with some components because React is all about components as you will

‫also learn again in the React refresher in a separate module,

‫for now you can just take it for granted, so we'll have the different components, the building blocks of

‫our frontend user interface so to say and with the backend folder, with exactly one core file, server.js.

‫Now to run these ends here, you need to install Node.js. You can install it from nodejs.org

‫and there, simply download the latest version, 13 in my case but that of course will change over

‫time, does not really affect the way Node works or looks like however and simply download that latest

‫word and walk through the installer you get there, the default settings are fine and this will install

‫Node.js, so this special Javascript runtime onto your machine. It will also install one other tool onto your

‫machine and that's npm, the Node package manager.

‫This is a tool which is required anyway to install the various dependencies, so third-party libraries

‫we use in both our backend code as well as our frontend code because even though the frontend code

‫is not run by Node.js, it still will use third-party libraries which are then simply used by the browser

‫or also an important part, by our build setup,

‫our development setup where we have a dummy server that serves our frontend which reloads the page

‫whenever we change something, which optimizes our code and so on.

‫These are all steps which are not run once we deploy our finished frontend but which help us during

‫development and for that, we also need third-party libraries and actually also the Node runtime which

‫runs this entire frontend build process,

‫so we definitely need Node.js to do anything here.

‫Now you also see I opened this project here in an IDE, in an integrated development environment.

‫This is Visual Studio Code, a great free to use IDE

‫you can find if you google for VSCode and which you can then install from the page you get to,

‫code.visualstudio.com.

‫It's free and available for all operating systems, so simply download it and walk through the installer

‫if you want to use that same IDE

‫here as I do. Now in that IDE here,

‫I also installed some so-called extensions,

‫you can get to the extensions menu with view extensions and there specifically, the extensions

‫I recommend that you install are the material icon theme to make sure your file icons look like mine

‫if you like that look, path intellisense which can help you with auto completion of file names, prettier

‫which helps you with autoformatting your code

‫so that it is easy to read and you don't have to format it manually and with all that installed,

‫also if you go back to the Explorer or use the shortcut you see here,

‫I also recommend that you look into the themes you got configured, under code, preferences, colour theme,

‫there you can switch it to a different theme,

‫I'm using the dark plus default dark theme here which gives me the look you see here.

‫You also here see the file icons I got from the material icon theme.

‫Last but not least,

‫I already talked about prettier and that auto formatting,

‫you can always check out your keyboard shortcuts and there specifically the format document shortcut

‫is one you should bind because that will help you use that prettier extension to automatically reformat

‫your code but with that, that's basically the setup I have here.

‫Then I opened that extracted folder which holds the backend and frontend folder and I'm now ready

‫to go, well or almost. First of all, as I mentioned, every end has some packages, some dependencies

‫it uses, you'll find those in the package.json file which is your project management file you

‫could say and you'll see that I treat backend and frontend as separate projects because they are logically

‫separated.

‫Now you see here for the backend in the package.json file, I got three dependencies, three third

‫party libraries

‫this project uses. For the frontend, for the React application,

‫I got these three dependencies - React, the library we use, React DOM which is also part of React and React

‫scripts which in the end helps us with our build setup and with this dummy server that serves the React

‫application and so on.

‫Now to install these dependencies, you need to open up your terminal or command prompt and you can use

‫the one integrated into your IDE,

‫you can go to terminal, new terminal here to open it and then navigate into your frontend folder and

‫in there, run npm install

‫and this uses the npm tool which was installed together with Node.js to install all the dependencies

‫which are mentioned in the package.json file.

‫It will then create such a node modules folder where these dependencies and their dependencies are actually

‫stored in.

‫Now doing this just for the frontend alone is not enough,

‫so I will open a second terminal and also navigate into the backend folder because there, I also want

‫to install all the dependencies, so that for both the frontend and the backend, we got that installed.

‫So let's wait for this installation process to finish and thereafter,

‫let's start our two servers and see how they communicate with each other.

‫So the installation of all the dependencies in both the frontend and backend folder finished and now let's

‫simply see what we got there before we have a look at the code.

‫Now keep in mind, we have two logically separated ends here and here during development at least, we will

‫also have two separated servers.

‫Now of course both runs on our machine here, on our computer but actually we will run these two different

‫ends under two different domains.

‫Now let's see what we got here, in the frontend folder,

‫you can run npm start to start a development server that's part of the setup basically added by this React

‫scripts dependency which will host your React application, this React

‫single page application.

‫So it's a development server which in the end hosts this single index.html file which you find in the

‫public folder there which then in turn will import all the scripts it needs and launch your React app.

‫You find that application, it should open up automatically actually, under localhost:3000.

‫Localhost might look strange but this is your domain,

‫it's available on your local machine, it's a special domain there and :3000 is the port on

‫which we're visiting this and combined,

‫this actually is a domain as it would be the case for

‫yourpage.com,

‫so this combined is the actual domain

‫and if you would visit another page on let's say localhost:5000, that might look very similar but

‫it would actually be a totally different domain as if it were served by a totally different machine.

‫So here React automatically runs on localhost:3000 and that's our React single page application.

‫Now let's go to the backend folder and there, you can also run npm start.

‫Now here, nothing opens up automatically but you will see that you're now in a process which doesn't

‫stop, so you can't enter a new command,

‫by the way it's the same for the frontend.

‫That is the default and that is what should be the case because that means you have a running server.

‫You can always stop these processes by hitting control c on your keyboard but then of course the server

‫will be down,

‫so as long as you're developing, you should have it up and running. So we get these two running servers

‫and the Node backend server here actually will run under localhost:5000,

‫however if you enter that you will not see anything because this specific endpoint, / is

‫not supported.

‫Remember when I said that you as a developer decide which endpoints you want to support and you want

‫to execute code on,

‫well that's not one of them. Things change if you enter /products there however, you see now you

‫get back in the end a Javascript object,

‫this is actually this JSON notation I was talking, about which holds a product's key and then an empty

‫array.

‫So here we seem to get back some data, even though it's empty and that already looks quite promising

‫and now really keep in mind, localhost:5000 is a totally different server than

‫localhost:3000.

‫Now obviously here we have some communication problems, with your Node server up and running however,

‫reload the React app on localhost:3000 and you will see that the loading part goes away and

‫instead we see could not find any products.

‫Now let's add a book here for let's say 12.99 and click add product and what you see is

‫it now appears down there.

‫Now that's nice but what you will also see if you reload now and you keep both servers up and running in

‫between, you still get that, you see loading for a fraction of a second and then you see a book here.

‫So it looks like the book we created here really was stored somewhere, was stored on our backend server

‫and when we reload the React app, we're fetching data from that server

‫and since the server runs on its own domain

‫but technically of course on the same machine as our frontend, that request is super fast which

‫is why we see that loading text only for the fraction of a second if we see it at all.

‫But the really important thing here is that we are storing data on our backend, so on the Node Express

‫app or with help of the Node Express app and we're fetching it from there.

‫Now that's how it works,

‫let's now have a look at the code to get a rough understanding of what's working together there.