1 00:00:02,170 --> 00:00:09,940 Now let's prepare for this application. I will use a deployed mongodb Atlas cluster as my backend 2 00:00:10,240 --> 00:00:15,640 because for your application when you then ship it into the web, you of course need a database that's 3 00:00:15,670 --> 00:00:20,710 also reachable from everywhere and you want to have a database setup that follows best practices and 4 00:00:20,710 --> 00:00:21,240 so on 5 00:00:21,280 --> 00:00:25,220 and as I explained in the last module, Atlas is the right solution for that. 6 00:00:25,270 --> 00:00:28,010 So I'm just bringing up another free cluster here, 7 00:00:28,030 --> 00:00:29,490 if you already got one up and running, 8 00:00:29,500 --> 00:00:30,550 you don't need to do that again, 9 00:00:30,550 --> 00:00:36,550 you can continue with the last one and under security, you should make sure that you have at least one 10 00:00:36,550 --> 00:00:39,990 user with read and write access in your database 11 00:00:40,240 --> 00:00:47,770 and that is important. In your application, in your frontend application and so on, you only need that, at least 12 00:00:47,770 --> 00:00:53,350 in the app we're building, we'll only need to read and write access because the entire administration 13 00:00:53,390 --> 00:01:00,070 and setup we want to do is done up front. Basically here when we setup that server here, there is no 14 00:01:00,070 --> 00:01:02,120 additional configuration I need to do right now 15 00:01:02,140 --> 00:01:06,920 but if we need to do something, we'll do it by connecting to the server in the shell, 16 00:01:06,940 --> 00:01:12,740 so anything related to setting up collections, collection validation or indexes, we would do that through 17 00:01:12,810 --> 00:01:13,890 the shell. 18 00:01:13,960 --> 00:01:20,050 Now for the cluster, also make sure that your local IP is on the, on the whitelist here, 19 00:01:20,050 --> 00:01:25,720 so make sure you add your IP to the whitelist in case you haven't already, 20 00:01:25,720 --> 00:01:31,020 now I did this in advance but you should make sure that your IP is there. 21 00:01:31,420 --> 00:01:33,360 And with that, I'll wait for this to finish 22 00:01:33,380 --> 00:01:37,440 but we can already continue with something else. In this module, 23 00:01:37,480 --> 00:01:46,240 we'll work on a nodejs or to be precise, on a react nodejs application. We'll have a single page application 24 00:01:46,300 --> 00:01:49,640 built with reactjs which is basically our 25 00:01:49,660 --> 00:01:53,820 ui, our user interface and that single page application 26 00:01:53,830 --> 00:01:58,930 will talk to a nodejs restful API and attached to this video, 27 00:01:58,990 --> 00:02:05,210 you'll find the fully prepared project where no mongodb interaction was added yet, 28 00:02:05,230 --> 00:02:10,730 we'll do that together but you'll find the entire node react app attached to this video. 29 00:02:10,930 --> 00:02:17,950 Now to run it and to install all the dependencies and run the react development server too, you need 30 00:02:17,950 --> 00:02:19,030 nodejs, 31 00:02:19,270 --> 00:02:24,450 so visit nodejs.org and download the latest version, 32 00:02:24,460 --> 00:02:25,940 in my case 10.10 33 00:02:25,960 --> 00:02:31,390 but whatever the latest version is in your case. Download that version, the download link here will give 34 00:02:31,390 --> 00:02:33,990 you a convenient installer through which you can walk 35 00:02:34,270 --> 00:02:40,870 and once you downloaded it, you should navigate into the extracted folder, so the folder you find attached, 36 00:02:40,960 --> 00:02:46,550 simply unzip it, store it anywhere in your machine and then in the terminal, not in the mongodb shell 37 00:02:46,570 --> 00:02:48,070 but in the normal terminal, 38 00:02:48,070 --> 00:02:54,300 navigate into that extracted folder and with nodejs installed which is important, you can now run npm 39 00:02:54,310 --> 00:02:59,590 install in here and this will install all the dependencies of this project which you need in order 40 00:02:59,590 --> 00:03:01,690 to be able to work with it. 41 00:03:01,690 --> 00:03:04,360 So this can take a short while but shouldn't take super long, 42 00:03:04,480 --> 00:03:06,640 you can ignore any warnings you might see here 43 00:03:06,850 --> 00:03:13,060 and once it is finished, you can start to fix. The first thing you can start with npm start, 44 00:03:13,060 --> 00:03:20,260 so with this command is the react frontend, so the user interface which I built as a react single 45 00:03:20,260 --> 00:03:26,200 page application. With npm start, this will start the application, it will start a development server 46 00:03:26,260 --> 00:03:29,910 which basically serves up our react application 47 00:03:30,250 --> 00:03:36,640 and you should end up on a page like this and it's ok if you see an error initially because it fails to 48 00:03:36,640 --> 00:03:41,850 fetch data from the backend right now because we only started a react frontend server. 49 00:03:42,040 --> 00:03:46,820 Now I also need to start up my node rest API, for that 50 00:03:46,840 --> 00:03:52,720 simply create a new terminal window and navigate into the same extracted folder and in there, you 51 00:03:52,720 --> 00:04:01,360 can now run npm run start: server and you need to run this and keep the other process, npm start which 52 00:04:01,360 --> 00:04:03,800 hosts the react app up and running too. 53 00:04:04,030 --> 00:04:10,490 So this process, the npm start process needs to keep running and this process now also should be started 54 00:04:10,600 --> 00:04:14,770 and also needs to keep running. With both up and running, 55 00:04:14,770 --> 00:04:19,420 you can reload your app and now you should fetch some dummy product data and this is not fetched from 56 00:04:19,420 --> 00:04:20,380 a database, 57 00:04:20,390 --> 00:04:27,040 this is really just stored locally, some dummy data and we'll replace all of that with data from the 58 00:04:27,040 --> 00:04:29,900 database, so that we can add new products and see them here. 59 00:04:30,040 --> 00:04:32,410 So this is a little dummy application I prepared here 60 00:04:32,680 --> 00:04:39,280 and with that prepared and up and running, we now get everything to work on the code and then use mongodb 61 00:04:39,280 --> 00:04:41,530 as a backend. 62 00:04:41,530 --> 00:04:46,990 In the meantime, my cluster creation here also finished so we're good to go here too.