So here's what we're going to build.
I will show you the code and the project in action
in a second as well.
But here's the theory
about the project we're going to build.
We will have three main building blocks
and that will be our database,
our MongoDB database to be precise
which of course is there to store data
generated by our application.
But then we also have two other building blocks.
We got a backend web app.
We got our Node.js REST API and that is just a web server,
a web application built with Node.js which actually exposes
no graphical user interface which doesn't respond
with HTML or anything like that,
but which simply accepts and returns JSON data
so very similar to the application we built
in the last course section.
But now here's an extra building block
which we didn't have in the last course section.
We will also have a front end web application
built with React.
To be precise, a single page application built with React.
Now you may or may not know what exactly
a REST API or a single page application is.
I will show you how the things work together
in just a second.
In general though, this is a pretty common setup
or a pretty common way of building a modern web application
and it's pretty common to split it like this,
to have a database and to then have backend web server
which is not directly used
by the end users visiting your website,
but instead you have this front end web application
which is responsible for bringing something
on to the screen of your users so which is responsible
for rendering the actual HTML code they see
and then it's this front end which talks to the backend
because we will have some communication
between these building blocks.
Our backend will talk to our database
to store and fetch data
and our front end web application will talk to our backend
and therefore indirectly of course also to our database.
Not directly though.
Now that was a first look at this project in theory.
Here it is in action and of course you find this code.
Attached you find this project attached to this lecture.
I'm going to run it here.
You might not be able to run it
because you also need MongoDB to be installed on your system
and to be running and I do have it here,
but you don't need to do that
just as in the last course section
because we are going to dockerize it anyways.
But I'll quickly show you what we're going to build.
So for that I will first of all go into this backend folder
which contains a Node.js application
built with Node and Express
and this application in the end
just takes in a couple of requests
that allow users to set and see and delete goals
because we're going to build a demo application here
where users can track their goals
for this course for example.
And here we got all the logic
for adding, deleting and getting goals
and these goals are then stored in a database.
In addition I also got some logging set up here
where some log files are written into a logs folder.
Now that's the backend.
The front end is a React application.
React is a JavaScript library which runs in the browser,
not on a server.
Node runs on a server.
React, this JavaScript code runs in a browser
and this React application
is detached from the backend here.
It's a stand alone web application
which can be hosted on a stand alone server
which just communicates to this backend API though.
Here in this front end React code
in this App.js file for example,
I got some React code which you don't need to understand
in order to follow along.
You don't need to know React or Node to follow along,
but in case you do know React,
what I'm doing here is I'm just sending a request
to my backend API so to this backend server
to get the goals stored by a user
or also to add a new goal there or to delete a goal.
And that's basically what this application does.
Now to get started,
I'll navigate into my backend folder here
and with npm install,
I can now install all the backend dependencies
as specified in this package.json file
so all the third party packages and libraries
required by this backend project,
by this backend Node web API.
And thereafter I can run node app.js
to bring up this backend API server
and for this I need to have my MongoDB database
up and running which I do off screen here.
Now in a second terminal I'll navigate
into the front end folder and there we also need to install
dependencies needed by this front end.
It's a detached project, a detached application.
It has its own dependencies as specified
in its package.json file
and now these dependencies are installed here.
And once they are installed,
we can also start this front end web application
which again just to emphasize this again,
by default is detached from the backend.
It is actually started with a development server
built into this front end project setup
which hosts this React single page application
and this front end development server which it is
has nothing to do with this backend API server
created by our Node code here.
So we have two separate development servers,
two separate web servers here
running in backend and front end.
We start the one in the front end folder with npm start.
This executes one of the scripts in package.json.
This starts script and that uses
some third party package under the hood
to bring up a development server
which serves this React application.
And thereafter I can visit this running React application
on localhost 3000 and again that's just a React app.
The Node API is running on a different port.
This is running on port 80 because that's the port
I'm listening to when this application gets spun up,
when this server gets spun up.
Now if everything works,
we should be able to add goals like learn Docker here
and then it gets added here
and if I reload this page,
this data gets fetched automatically
and I can also click it to delete it and then it's gone
and all of that works with that combination
of front end React app talking to this backend Node server
which then in turn talks to my database.
And therefore for these three building blocks
which we have here,
we also have different requirements or important things
we have to keep in mind,
especially when we think
about dockerizing these building blocks.
We're going to dockerize it together,
but you can also do this in advance as a practice,
especially the database and backend part
because we already did that in the last section
so that should be something
you can try on your own for sure.
But we will also dockerize the front end here.
And now what's important to keep in mind
when you do dockerize this
is that for the database container,
if you put MongoDB into a container,
the data of course should persist.
It should not be lost if the MongoDB container
is removed and then recreated.
And in the last course section, that did happen.
There we did lose data so that's something
we need to do better in this section.
In addition we might wanna restrict access
and it turns out that the official Mongo image
actually gives us a way of adding a user and a password
to the database which is created
in that Mongo image and container.
So we're going to look into that in this module as well.
Now for our Node backend API, data also must persist.
And in case you're wondering which data,
I'm not talking about the goals.
These are getting stored in the MongoDB database
so that's not something the Node API needs to persist,
but I'm talking about these log files which are written.
These are actual files written to this logs folder
and they are into this file
and this file should not be deleted
when this backend is dockerized and in a container
just because the container was removed.
So we wanna ensure that we also persist
that log data on our backend API.
Now an additional requirement which we might have here
for convenient development
is that source code changes should instantly be reflected
and currently that's not really the case.
We will need a different third party package for that
which we also already saw early in the course
and we'll need a way of exposing our source code
to the container such that the latest source code
which we have in our development folder on the host machine
is always immediately available to the container app
without rebuilding the image and restarting the container.
That is something we also already covered in this course
and we're going to do it again here.
And for the front end application, the React application,
it turns out that we also want to have these live updates
when our source code changes.
So that is what we're going to build.
Definitely a lot of things to cover
and definitely also not super easy,
but you can try it on your own
because in the end it's all things we already did,
but of course applying it all in one project here
will be challenging.
Nonetheless try it on your own if you want to.
See how far you're able to, well to go,
see how far you're able to get there
and then let's do it together starting in the next lecture
and let's dockerize this entire application
by putting each service into a separate container
and ensuring that all these containers
can work together without problems.