Now let's prepare for this application. I will use a deployed mongodb Atlas cluster as my backend
because for your application when you then ship it into the web, you of course need a database that's
also reachable from everywhere and you want to have a database setup that follows best practices and
so on
and as I explained in the last module, Atlas is the right solution for that.
So I'm just bringing up another free cluster here,
if you already got one up and running,
you don't need to do that again,
you can continue with the last one and under security, you should make sure that you have at least one
user with read and write access in your database
and that is important. In your application, in your frontend application and so on, you only need that, at least
in the app we're building, we'll only need to read and write access because the entire administration
and setup we want to do is done up front. Basically here when we setup that server here, there is no
additional configuration I need to do right now
but if we need to do something, we'll do it by connecting to the server in the shell,
so anything related to setting up collections, collection validation or indexes, we would do that through
the shell.
Now for the cluster, also make sure that your local IP is on the, on the whitelist here,
so make sure you add your IP to the whitelist in case you haven't already,
now I did this in advance but you should make sure that your IP is there.
And with that, I'll wait for this to finish
but we can already continue with something else. In this module,
we'll work on a nodejs or to be precise, on a react nodejs application. We'll have a single page application
built with reactjs which is basically our
ui, our user interface and that single page application
will talk to a nodejs restful API and attached to this video,
you'll find the fully prepared project where no mongodb interaction was added yet,
we'll do that together but you'll find the entire node react app attached to this video.
Now to run it and to install all the dependencies and run the react development server too, you need
nodejs,
so visit nodejs.org and download the latest version,
in my case 10.10
but whatever the latest version is in your case. Download that version, the download link here will give
you a convenient installer through which you can walk
and once you downloaded it, you should navigate into the extracted folder, so the folder you find attached,
simply unzip it, store it anywhere in your machine and then in the terminal, not in the mongodb shell
but in the normal terminal,
navigate into that extracted folder and with nodejs installed which is important, you can now run npm
install in here and this will install all the dependencies of this project which you need in order
to be able to work with it.
So this can take a short while but shouldn't take super long,
you can ignore any warnings you might see here
and once it is finished, you can start to fix. The first thing you can start with npm start,
so with this command is the react frontend, so the user interface which I built as a react single
page application. With npm start, this will start the application, it will start a development server
which basically serves up our react application
and you should end up on a page like this and it's ok if you see an error initially because it fails to
fetch data from the backend right now because we only started a react frontend server.
Now I also need to start up my node rest API, for that
simply create a new terminal window and navigate into the same extracted folder and in there, you
can now run npm run start: server and you need to run this and keep the other process, npm start which
hosts the react app up and running too.
So this process, the npm start process needs to keep running and this process now also should be started
and also needs to keep running. With both up and running,
you can reload your app and now you should fetch some dummy product data and this is not fetched from
a database,
this is really just stored locally, some dummy data and we'll replace all of that with data from the
database, so that we can add new products and see them here.
So this is a little dummy application I prepared here
and with that prepared and up and running, we now get everything to work on the code and then use mongodb
as a backend.
In the meantime, my cluster creation here also finished so we're good to go here too.