Now, as we are done with creation of Docker files both for front end and API services, let me talk
about importance of presence of such folders as node modules and don't the envy in our application folders.
You are in the Images Gallery project.
You already understand that container file system is completely different from the files that we have
now.
You're inside of the Images Gallery project.
There we have two different subfolders API and front end.
But during build process for the API service, we call all those goldens of this folder to the image.
Similarly, we did.
For front and image, we put all those files to the image and inside of the image.
We installed all necessary dependencies using npm and no inside of the front and container.
There is more modules folder and we just verify that in the previous lecture.
But now inside of the front end folder here in our Project Load Modules folder is absent because I asked
you to remove it.
And no, let me explain to your practice which consequences it might help for heroes of development
if there was no node modules folder inside of the front and folder.
First of all, please notice that, no, I am running out front end application in the web browser because
all necessary dependencies are inside of the container.
And though this container is actually serving this web page.
But what happens if you try to run front and application no directly from the terminal in the Visual
Studio code, not using Docker container?
Let's try to do that.
Let's open up a better terminal here and let me go out from the API folder and let me go to front and
folder like that and he'll let's try to start react application using npm start.
Same as we did before.
And beams start, and I see her error.
Error is falling.
Let me scroll a bit up.
Error is our scripts command not found.
Application was not started due to absence of the React Scripts executable file and previously such
executable as React Scripts was located inside of the Node Modules folder in the front and folder and
there was.
This would be in the folder with all executable files, including React scripts.
And of course, now when node modules folder is absent here, you will be able to run applications like
that like we did before this first issue that you have if there was no node modules folder in the front
and application.
Second problem is, follow me.
Let me go, for instance, to SLC folder and open up of the file and look at that here.
We imported, for instance, your state from the React Library and React module was actually installed
as an dependency and it was available in Sadhus and Load Modules folder.
If I hover, mouse now overreact.
I see that the BioScope recognizes that it is a module, but both for this module is full user Bogden
Library Caches, TypeScript and so on.
It means that now the escort resolved name of this module to the module located in case in the library.
And of course, not always such module will be present in such GIFs, I guess could be deleted or written
and so on.
Same applies, for instance, to React Bootstrap module BioScope has resolved it, but it found it also
in the cache folder and this way?
No, if I try, for instance, to import something from React Bootstrap like we did here, let me add
here comma and try to start typing.
For instance, button, you'll see suggestions from BioScope.
It means that IntelliSense works correctly because this module was found somewhere on the computer.
But again, it is not located inside of the front end folder, and you should have all modules that
you are using in your application in order to be able to correctly use all IntelliSense features in
video scored or any other code editor.
This way, if you want to continue development of your project on such computer, you must install node
modules folder using an install command.
And let's not go ahead and do that and see how your module resolution will be changed.
Let's open up time and old back again and in the front end folder.
Make sure that you are in the front and folder type and beam install.
Let's go ahead and install all dependencies, and they will be installed now in our project folder.
Note inside I was a Docker container.
They are.
We already have node modules folder.
All right, all npm modules were installed and the No Node Modules folder or should appear here in the
front and folder.
Let me refresh your files view and yes, now I see here node modules folder with all necessary subfolders.
And also no.
There was again load bin folder with all executables that I'm able to run, though inside of the front
and application rate.
No less Hormel's at the React module and now I see that to be a scored.
As a result, this module pulls a module located in the node modules folder in the front and folder
and this correct behavior.
Same applies, for instance, to React Bootstrap module.
It is also resolved to the React Bootstrap module in the Node Modules folder in the front and application.
And of course, now I'm able to run our applications same as I did before using and start command.
But I will do it now because I'm already running front and application inside of the container.
But I hope you got an idea and now you understand why we need to have a node modules folder both here
in our application and inside.
It was a container.
Please note is that same applies to the API folder there we created both V and the folder, and there
are all necessary files, including all dependencies of our Python project, such as flask and others.
They are listed here.
And this way we were able to run our service locally on our computers inside of the EPA folder due to
presence of these in the environment.
And if I delete this beautiful environment folder now, I will be able to start EPA service any more
locally, not inside of the container.
And the reason is exactly the same as for front and application.
There will be no mystery executable files inside of the EPA folder in correspondence computer environment.
That's why we need to have packages that our API is said.
It was depends on both locally, on our computers and inside all the containers.
Also, same as for no just project.
You need the all packages on your local computer in order to make the escort IntelliSense work correctly.
For instance, on this line from flask module, we import flask and request.
And if you Hormel's over a flask, you see that the escort recognizes such module flask.
And again, it's very important to understand the dependencies on your local computer.
Inside of your project are different from dependencies inside of the Docker containers.
Docker containers must be able to run independently, fully isolated this way.
We installed all necessary dependencies inside of the images, both for API project and front end project.
All right.
That's it for this lecture and the next one, let me explain to you how you are able to run containers
in the detached mode because now we are running API container and front end container in separate depths
here.
I'll see you guys just in a moment.