[Intro Music]
Now we're all set. We have Node.js
and Python installed on the
computer. And now let's start our
project which consists of two
different applications - api and
frontend locally without help of
Docker. And let's start with frontend
application. In order to start
this frontend application, first,
what we need to do is to install
NPM dependencies which are listed
in the package.json file here.
After installation, inside of the
'frontend' folder, you'll see 'node_
modules' folder, which will contain
all necessary project dependencies.
We will do that in the terminal
using command line interface. And
you could either use embedded
terminal in the Visual Studio Code,
you could open it up using Ctrl+
backtick, 'CTRL + `' key combination; or you
could use any other terminal
application. I'll use iTerm2 for
that. On Windows, you could use
PowerShell. And here make sure that
you first go to 'docker'
folder; and recap that here
inside there is 'images-gallery'
folder; and please 'cd' to 'images_
gallery' here; and afterwards 'cd' to
'frontend' folder, because now we
have to install NPM dependencies
inside of the 'frontend' folder. So
if I list files and folders here
now, I will not see 'node_modules'
folder, but there is package.json
file with all necessary
instructions for NPM. And now let's
go ahead and install all NPM
dependencies using 'npm install'
command. This will take some time,
approximately 10-20 seconds, let's
wait a bit. And NPM successfully
installed all necessary packages.
And notice that almost 2000
different packages were added to
the frontend application. And if I
list files and folders now, I'll see
'node_modules' folder here. If I list
contents of the node_modules
folder, I'll see a bunch of
different modules like ws, extend,
and so on. Alright, we are all set
now and we are ready to start frontend
application. Inside of the
package.json file, there are
several scripts like start, build,
test, and others. And in order to
start application, you need to enter
'npm start' command; and that command
will essentially run such command
react-scripts-start; and this
command will basically start our
React application. Alright, let's
go back to command line and here
and enter 'npm start'. 'react-scripts
start' command is being executed,
Starting the development server...
Notice that we will run frontend
application in development mode,
not in production. Also here I see
prompt that iTerm wants access to
control Google Chrome. And if I
grant access for that, I will see
that it will automatically open a
new tab in the Google Chrome. And
in the web browser bar, I see such
URL as localhost:3000. It
means that now our application is
running at localhost locally, and
its corresponding port is 3000. And
I see that 'Images Gallery'
application was successfully opened.
Here it is. It consists of this
Search input, Search button. Here
is a very simple description about
this application. And as I told you
before, this frontend application
retrieves the images using Unsplash
API, but it does not do it
directly. Instead, it uses API
service, which is actually proxy
between frontend application and
Unsplash. And if you click 'Learn
more', it will lead you to
unsplash.com URL. Alright, we are
all set, now frontend application
is running. But if I attempt to search
for new images right now, I will
not get any images because now API
service isn't running. But let's
quickly try that. And before
trying, please open up Google
Developer Tools, you could use
either key combination Command or
Control option J or F 12. And here
I see that console was successfully
opened. And let's search for a new
image, for example, 'sun'. And here I
see error - ERR_CONNECTION_REFUSED.
And I see that there was connection
attempt to localhost IP address,
but other port, not 3000. Here I see
Port 5050. And that's that Port
where Frontend application
expects API application to be
running. That gives us clear
understanding that Frontend
application is completely separated
from the API backend application
because they actually communicate
via network. And next after the
small pause, let's start api
service as well, and afterwards we
will try how they work together.
[no audio]