All language subtitles for 14 - Creating our Development Environment the Development Servers English

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.