1 00:00:02,140 --> 00:00:04,120 So here's what we're going to build. 2 00:00:04,120 --> 00:00:07,450 I will show you the code and the project in action 3 00:00:07,450 --> 00:00:09,130 in a second as well. 4 00:00:09,130 --> 00:00:10,320 But here's the theory 5 00:00:10,320 --> 00:00:12,350 about the project we're going to build. 6 00:00:12,350 --> 00:00:15,460 We will have three main building blocks 7 00:00:15,460 --> 00:00:17,450 and that will be our database, 8 00:00:17,450 --> 00:00:20,700 our MongoDB database to be precise 9 00:00:20,700 --> 00:00:23,270 which of course is there to store data 10 00:00:23,270 --> 00:00:26,240 generated by our application. 11 00:00:26,240 --> 00:00:29,430 But then we also have two other building blocks. 12 00:00:29,430 --> 00:00:31,360 We got a backend web app. 13 00:00:31,360 --> 00:00:36,360 We got our Node.js REST API and that is just a web server, 14 00:00:36,570 --> 00:00:41,570 a web application built with Node.js which actually exposes 15 00:00:41,660 --> 00:00:45,330 no graphical user interface which doesn't respond 16 00:00:45,330 --> 00:00:47,770 with HTML or anything like that, 17 00:00:47,770 --> 00:00:51,270 but which simply accepts and returns JSON data 18 00:00:51,270 --> 00:00:53,860 so very similar to the application we built 19 00:00:53,860 --> 00:00:55,563 in the last course section. 20 00:00:56,400 --> 00:00:58,330 But now here's an extra building block 21 00:00:58,330 --> 00:01:01,670 which we didn't have in the last course section. 22 00:01:01,670 --> 00:01:04,410 We will also have a front end web application 23 00:01:04,410 --> 00:01:05,850 built with React. 24 00:01:05,850 --> 00:01:09,623 To be precise, a single page application built with React. 25 00:01:10,470 --> 00:01:13,460 Now you may or may not know what exactly 26 00:01:13,460 --> 00:01:16,800 a REST API or a single page application is. 27 00:01:16,800 --> 00:01:18,990 I will show you how the things work together 28 00:01:18,990 --> 00:01:20,300 in just a second. 29 00:01:20,300 --> 00:01:24,700 In general though, this is a pretty common setup 30 00:01:24,700 --> 00:01:28,420 or a pretty common way of building a modern web application 31 00:01:28,420 --> 00:01:31,280 and it's pretty common to split it like this, 32 00:01:31,280 --> 00:01:34,930 to have a database and to then have backend web server 33 00:01:34,930 --> 00:01:36,940 which is not directly used 34 00:01:36,940 --> 00:01:39,860 by the end users visiting your website, 35 00:01:39,860 --> 00:01:42,640 but instead you have this front end web application 36 00:01:42,640 --> 00:01:45,000 which is responsible for bringing something 37 00:01:45,000 --> 00:01:48,510 on to the screen of your users so which is responsible 38 00:01:48,510 --> 00:01:52,110 for rendering the actual HTML code they see 39 00:01:52,110 --> 00:01:56,170 and then it's this front end which talks to the backend 40 00:01:56,170 --> 00:01:58,350 because we will have some communication 41 00:01:58,350 --> 00:02:00,190 between these building blocks. 42 00:02:00,190 --> 00:02:03,170 Our backend will talk to our database 43 00:02:03,170 --> 00:02:05,280 to store and fetch data 44 00:02:05,280 --> 00:02:09,610 and our front end web application will talk to our backend 45 00:02:09,610 --> 00:02:13,580 and therefore indirectly of course also to our database. 46 00:02:13,580 --> 00:02:14,963 Not directly though. 47 00:02:15,850 --> 00:02:18,840 Now that was a first look at this project in theory. 48 00:02:18,840 --> 00:02:22,620 Here it is in action and of course you find this code. 49 00:02:22,620 --> 00:02:26,420 Attached you find this project attached to this lecture. 50 00:02:26,420 --> 00:02:27,860 I'm going to run it here. 51 00:02:27,860 --> 00:02:29,810 You might not be able to run it 52 00:02:29,810 --> 00:02:33,970 because you also need MongoDB to be installed on your system 53 00:02:33,970 --> 00:02:36,790 and to be running and I do have it here, 54 00:02:36,790 --> 00:02:38,370 but you don't need to do that 55 00:02:38,370 --> 00:02:40,750 just as in the last course section 56 00:02:40,750 --> 00:02:44,350 because we are going to dockerize it anyways. 57 00:02:44,350 --> 00:02:46,970 But I'll quickly show you what we're going to build. 58 00:02:46,970 --> 00:02:51,540 So for that I will first of all go into this backend folder 59 00:02:51,540 --> 00:02:54,070 which contains a Node.js application 60 00:02:54,070 --> 00:02:55,970 built with Node and Express 61 00:02:55,970 --> 00:02:57,810 and this application in the end 62 00:02:57,810 --> 00:03:00,170 just takes in a couple of requests 63 00:03:00,170 --> 00:03:04,830 that allow users to set and see and delete goals 64 00:03:04,830 --> 00:03:07,960 because we're going to build a demo application here 65 00:03:07,960 --> 00:03:10,470 where users can track their goals 66 00:03:10,470 --> 00:03:12,720 for this course for example. 67 00:03:12,720 --> 00:03:14,300 And here we got all the logic 68 00:03:14,300 --> 00:03:16,820 for adding, deleting and getting goals 69 00:03:16,820 --> 00:03:20,700 and these goals are then stored in a database. 70 00:03:20,700 --> 00:03:23,940 In addition I also got some logging set up here 71 00:03:23,940 --> 00:03:27,953 where some log files are written into a logs folder. 72 00:03:29,060 --> 00:03:30,360 Now that's the backend. 73 00:03:30,360 --> 00:03:33,020 The front end is a React application. 74 00:03:33,020 --> 00:03:37,320 React is a JavaScript library which runs in the browser, 75 00:03:37,320 --> 00:03:38,570 not on a server. 76 00:03:38,570 --> 00:03:40,100 Node runs on a server. 77 00:03:40,100 --> 00:03:43,000 React, this JavaScript code runs in a browser 78 00:03:43,000 --> 00:03:44,650 and this React application 79 00:03:44,650 --> 00:03:46,920 is detached from the backend here. 80 00:03:46,920 --> 00:03:49,560 It's a stand alone web application 81 00:03:49,560 --> 00:03:52,410 which can be hosted on a stand alone server 82 00:03:52,410 --> 00:03:56,120 which just communicates to this backend API though. 83 00:03:56,120 --> 00:03:59,160 Here in this front end React code 84 00:03:59,160 --> 00:04:01,930 in this App.js file for example, 85 00:04:01,930 --> 00:04:05,130 I got some React code which you don't need to understand 86 00:04:05,130 --> 00:04:06,580 in order to follow along. 87 00:04:06,580 --> 00:04:10,270 You don't need to know React or Node to follow along, 88 00:04:10,270 --> 00:04:12,130 but in case you do know React, 89 00:04:12,130 --> 00:04:15,030 what I'm doing here is I'm just sending a request 90 00:04:15,030 --> 00:04:18,720 to my backend API so to this backend server 91 00:04:18,720 --> 00:04:21,730 to get the goals stored by a user 92 00:04:21,730 --> 00:04:26,170 or also to add a new goal there or to delete a goal. 93 00:04:26,170 --> 00:04:29,410 And that's basically what this application does. 94 00:04:29,410 --> 00:04:30,550 Now to get started, 95 00:04:30,550 --> 00:04:32,860 I'll navigate into my backend folder here 96 00:04:32,860 --> 00:04:34,150 and with npm install, 97 00:04:34,150 --> 00:04:37,360 I can now install all the backend dependencies 98 00:04:37,360 --> 00:04:40,330 as specified in this package.json file 99 00:04:40,330 --> 00:04:44,270 so all the third party packages and libraries 100 00:04:44,270 --> 00:04:46,270 required by this backend project, 101 00:04:46,270 --> 00:04:48,913 by this backend Node web API. 102 00:04:50,100 --> 00:04:53,930 And thereafter I can run node app.js 103 00:04:53,930 --> 00:04:57,310 to bring up this backend API server 104 00:04:57,310 --> 00:05:00,350 and for this I need to have my MongoDB database 105 00:05:00,350 --> 00:05:04,750 up and running which I do off screen here. 106 00:05:04,750 --> 00:05:07,640 Now in a second terminal I'll navigate 107 00:05:07,640 --> 00:05:11,440 into the front end folder and there we also need to install 108 00:05:11,440 --> 00:05:13,670 dependencies needed by this front end. 109 00:05:13,670 --> 00:05:16,490 It's a detached project, a detached application. 110 00:05:16,490 --> 00:05:19,470 It has its own dependencies as specified 111 00:05:19,470 --> 00:05:21,800 in its package.json file 112 00:05:21,800 --> 00:05:25,173 and now these dependencies are installed here. 113 00:05:26,350 --> 00:05:27,810 And once they are installed, 114 00:05:27,810 --> 00:05:30,720 we can also start this front end web application 115 00:05:30,720 --> 00:05:33,390 which again just to emphasize this again, 116 00:05:33,390 --> 00:05:36,410 by default is detached from the backend. 117 00:05:36,410 --> 00:05:39,600 It is actually started with a development server 118 00:05:39,600 --> 00:05:42,100 built into this front end project setup 119 00:05:42,100 --> 00:05:45,930 which hosts this React single page application 120 00:05:45,930 --> 00:05:49,540 and this front end development server which it is 121 00:05:49,540 --> 00:05:53,010 has nothing to do with this backend API server 122 00:05:53,010 --> 00:05:55,150 created by our Node code here. 123 00:05:55,150 --> 00:05:58,550 So we have two separate development servers, 124 00:05:58,550 --> 00:06:00,970 two separate web servers here 125 00:06:00,970 --> 00:06:02,913 running in backend and front end. 126 00:06:03,800 --> 00:06:07,850 We start the one in the front end folder with npm start. 127 00:06:07,850 --> 00:06:11,240 This executes one of the scripts in package.json. 128 00:06:11,240 --> 00:06:13,450 This starts script and that uses 129 00:06:13,450 --> 00:06:15,660 some third party package under the hood 130 00:06:15,660 --> 00:06:17,600 to bring up a development server 131 00:06:17,600 --> 00:06:20,363 which serves this React application. 132 00:06:21,650 --> 00:06:24,780 And thereafter I can visit this running React application 133 00:06:24,780 --> 00:06:29,300 on localhost 3000 and again that's just a React app. 134 00:06:29,300 --> 00:06:32,740 The Node API is running on a different port. 135 00:06:32,740 --> 00:06:36,380 This is running on port 80 because that's the port 136 00:06:36,380 --> 00:06:39,580 I'm listening to when this application gets spun up, 137 00:06:39,580 --> 00:06:41,593 when this server gets spun up. 138 00:06:42,870 --> 00:06:44,700 Now if everything works, 139 00:06:44,700 --> 00:06:48,120 we should be able to add goals like learn Docker here 140 00:06:48,120 --> 00:06:49,840 and then it gets added here 141 00:06:49,840 --> 00:06:51,360 and if I reload this page, 142 00:06:51,360 --> 00:06:53,850 this data gets fetched automatically 143 00:06:53,850 --> 00:06:57,020 and I can also click it to delete it and then it's gone 144 00:06:57,020 --> 00:06:59,390 and all of that works with that combination 145 00:06:59,390 --> 00:07:03,410 of front end React app talking to this backend Node server 146 00:07:03,410 --> 00:07:06,203 which then in turn talks to my database. 147 00:07:08,760 --> 00:07:11,360 And therefore for these three building blocks 148 00:07:11,360 --> 00:07:12,470 which we have here, 149 00:07:12,470 --> 00:07:16,210 we also have different requirements or important things 150 00:07:16,210 --> 00:07:17,310 we have to keep in mind, 151 00:07:17,310 --> 00:07:18,970 especially when we think 152 00:07:18,970 --> 00:07:22,390 about dockerizing these building blocks. 153 00:07:22,390 --> 00:07:24,600 We're going to dockerize it together, 154 00:07:24,600 --> 00:07:27,750 but you can also do this in advance as a practice, 155 00:07:27,750 --> 00:07:30,060 especially the database and backend part 156 00:07:30,060 --> 00:07:33,410 because we already did that in the last section 157 00:07:33,410 --> 00:07:34,830 so that should be something 158 00:07:34,830 --> 00:07:37,490 you can try on your own for sure. 159 00:07:37,490 --> 00:07:40,060 But we will also dockerize the front end here. 160 00:07:40,060 --> 00:07:41,960 And now what's important to keep in mind 161 00:07:41,960 --> 00:07:43,900 when you do dockerize this 162 00:07:43,900 --> 00:07:46,810 is that for the database container, 163 00:07:46,810 --> 00:07:49,370 if you put MongoDB into a container, 164 00:07:49,370 --> 00:07:51,610 the data of course should persist. 165 00:07:51,610 --> 00:07:54,310 It should not be lost if the MongoDB container 166 00:07:54,310 --> 00:07:57,960 is removed and then recreated. 167 00:07:57,960 --> 00:08:00,980 And in the last course section, that did happen. 168 00:08:00,980 --> 00:08:03,550 There we did lose data so that's something 169 00:08:03,550 --> 00:08:06,063 we need to do better in this section. 170 00:08:07,010 --> 00:08:10,270 In addition we might wanna restrict access 171 00:08:10,270 --> 00:08:14,180 and it turns out that the official Mongo image 172 00:08:14,180 --> 00:08:17,800 actually gives us a way of adding a user and a password 173 00:08:17,800 --> 00:08:19,900 to the database which is created 174 00:08:19,900 --> 00:08:22,230 in that Mongo image and container. 175 00:08:22,230 --> 00:08:25,483 So we're going to look into that in this module as well. 176 00:08:26,470 --> 00:08:31,470 Now for our Node backend API, data also must persist. 177 00:08:32,039 --> 00:08:34,010 And in case you're wondering which data, 178 00:08:34,010 --> 00:08:35,950 I'm not talking about the goals. 179 00:08:35,950 --> 00:08:38,799 These are getting stored in the MongoDB database 180 00:08:38,799 --> 00:08:42,990 so that's not something the Node API needs to persist, 181 00:08:42,990 --> 00:08:46,060 but I'm talking about these log files which are written. 182 00:08:46,060 --> 00:08:49,340 These are actual files written to this logs folder 183 00:08:49,340 --> 00:08:51,040 and they are into this file 184 00:08:51,040 --> 00:08:53,710 and this file should not be deleted 185 00:08:53,710 --> 00:08:57,170 when this backend is dockerized and in a container 186 00:08:57,170 --> 00:08:59,660 just because the container was removed. 187 00:08:59,660 --> 00:09:02,150 So we wanna ensure that we also persist 188 00:09:02,150 --> 00:09:05,603 that log data on our backend API. 189 00:09:06,580 --> 00:09:09,850 Now an additional requirement which we might have here 190 00:09:09,850 --> 00:09:11,970 for convenient development 191 00:09:11,970 --> 00:09:16,970 is that source code changes should instantly be reflected 192 00:09:17,560 --> 00:09:20,810 and currently that's not really the case. 193 00:09:20,810 --> 00:09:24,520 We will need a different third party package for that 194 00:09:24,520 --> 00:09:27,620 which we also already saw early in the course 195 00:09:27,620 --> 00:09:31,380 and we'll need a way of exposing our source code 196 00:09:31,380 --> 00:09:34,690 to the container such that the latest source code 197 00:09:34,690 --> 00:09:38,550 which we have in our development folder on the host machine 198 00:09:38,550 --> 00:09:42,930 is always immediately available to the container app 199 00:09:42,930 --> 00:09:46,890 without rebuilding the image and restarting the container. 200 00:09:46,890 --> 00:09:50,480 That is something we also already covered in this course 201 00:09:50,480 --> 00:09:53,280 and we're going to do it again here. 202 00:09:53,280 --> 00:09:56,850 And for the front end application, the React application, 203 00:09:56,850 --> 00:10:01,650 it turns out that we also want to have these live updates 204 00:10:01,650 --> 00:10:03,723 when our source code changes. 205 00:10:04,640 --> 00:10:06,900 So that is what we're going to build. 206 00:10:06,900 --> 00:10:09,550 Definitely a lot of things to cover 207 00:10:09,550 --> 00:10:12,160 and definitely also not super easy, 208 00:10:12,160 --> 00:10:13,770 but you can try it on your own 209 00:10:13,770 --> 00:10:17,340 because in the end it's all things we already did, 210 00:10:17,340 --> 00:10:20,120 but of course applying it all in one project here 211 00:10:20,120 --> 00:10:21,500 will be challenging. 212 00:10:21,500 --> 00:10:24,580 Nonetheless try it on your own if you want to. 213 00:10:24,580 --> 00:10:27,750 See how far you're able to, well to go, 214 00:10:27,750 --> 00:10:31,020 see how far you're able to get there 215 00:10:31,020 --> 00:10:34,730 and then let's do it together starting in the next lecture 216 00:10:34,730 --> 00:10:37,770 and let's dockerize this entire application 217 00:10:37,770 --> 00:10:41,210 by putting each service into a separate container 218 00:10:41,210 --> 00:10:44,130 and ensuring that all these containers 219 00:10:44,130 --> 00:10:46,563 can work together without problems.