00:00:00 Docker Compose Watch.

00:00:03 As its name suggests, Docker Compose Watch listens to our changes and does something like rebuilding our app, rerunning the container,

00:00:13 and more.

00:00:14 It's a new feature that automatically updates our service containers when you work.

00:00:20 So what specific things can we do?

00:00:23 With Docker Compose watch, we can do three main things.

00:00:28 First of all, we can sync.

00:00:30 The sync operation moves changed files from our computer to the right places in the container, making sure that everything stays up to date in real time.

00:00:42 This is handy when we're working on any app because it lets us instantly see any changes we make while the app is running.

00:00:51 The second thing Docker Compose Watch can do is rebuild.

00:00:56 The rebuild process starts with the creation of new container images and then it updates the services.

00:01:03 This is beneficial when rolling out changes to applications in production, guaranteeing the most recent version of the code is in operation.

00:01:13 And finally, it can perform something known as a sync restart.

00:01:17 The sync restart operation merges the sync and rebuild processes.

00:01:22 It begins by syncing modifications from the host file system to the container paths and then restarting the container.

00:01:30 This is beneficial during the development and testing of applications, ensuring that the most recent code version is active with immediate reflection of

00:01:40 changes in the running application.

00:01:42 And in simple terms, Docker Compose FileWatch is a cool tool that keeps our cooking ingredients up to date while we're in the kitchen.

00:01:51 To make sure it works properly, we need to tell it how to build each meal.

00:01:56 Of course, by defining the build section in our Compose YAML file.

00:02:01 This way, when we tweak a recipe or make changes to our application, Docker Compose FileWatch knows how to update the meal,

00:02:10 or in this case, the service container.

00:02:13 To see it in action, I have created a basic Mearn project.

00:02:17 So first, download the starter code from below this course, then rename it from starter to just Mearn Docker.

00:02:26 and you can see that this is your typical full-snack application.

00:02:30 It has the front-end, which is a React application, and a back-end, including a database.

00:02:36 Now, I'm going to teach you how to Dockerize it.

00:02:39 As you can see, we're Dockerizing everything from vanilla files over to React, Vite, Myrn, and later on, even Next.js.

00:02:48 I want to fulfill the promise of this video, and that is to teach you how to Dockerize any application.

00:02:55 So let's start creating our first Docker files.

00:02:58 You know the drill, don't you?

00:03:00 I will begin by creating a new Docker file for the front-end repository.

00:03:06 And here, we can essentially paste everything we already had within the React project, because this is not going to change much.

00:03:13 So let's copy it and paste it right here.

00:03:16 Now, just to make sure that this is a bit clearer and simpler to understand, we can also remove the comments, as now we know what most of these commands do.

00:03:25 So let's remove all of the comments and then we're going to have a much cleaner working environment.

00:03:31 There we go.

00:03:32 And in this case, as you already know, doing this ad group ad user, it's just an extra step to make to add more safety to our container.

00:03:41 but it's not necessary.

00:03:43 So in this case, we can even comment out these two commands as well as these three commands.

00:03:50 So that leaves us with something like this.

00:03:52 Get the from image, set the working directory, copy it, run it, copy the entire app that got installed after running npm install,

00:04:01 expose it, and run it.

00:04:03 This is a simple Docker file for our React application, and now we have it within our frontend directory.

00:04:10 Don't forget that we can also add a .dockerignore, which is going to just ignore node underscore modules.

00:04:19 And this entire Docker file, we also have to have it for the backend because it's going to be another container.

00:04:25 So here we can create a new file called Docker file and paste everything we have here.

00:04:32 We can modify it slightly though, because this time we want to expose it on a different endpoint, such as 8,000. And we also are going to run it by running

00:04:42 npm start, not npm run dev.

00:04:45 That's it.

00:04:46 We can also add a .dockerignore and add the node modules because we want to ignore them on the backend side as well.

00:04:55 So now we have everything we need besides one thing.

00:04:59 One thing that ties those two services together.

00:05:02 And that, my friends, is the compose.yml file.

00:05:07 This allows us to specify everything we want to do with this specific Docker Compose application.

00:05:13 And I really took my time to comment this one file in its entirety so you can know exactly what each line does.

00:05:22 So below this course, you can find a complete Compose YAML file for the Merin application.

00:05:28 Copy it and paste it here.

00:05:30 It's about 100 lines long, but it only has about 10 to 15 runnable lines.

00:05:35 Everything else is just comments.

00:05:38 But I wanted to go over the comments with you so we can fully understand how to create a bit of a more complicated YAML file that runs three different services.

00:05:48 Web, which is our front-end application, API, which is our backend, and the database at the same time.

00:05:56 So let's dive deeper into this together.

00:05:59 First, we have to specify the version of Docker Compose.

00:06:03 This is not a version of Docker.

00:06:05 This is just a version of the Docker Compose file we're using.

00:06:08 In this case, 3.8 is fine.

00:06:11 Or if you're using some newer Compose features, then you want to bump it up according to the documentation.

00:06:17 Next and most important step is to define the services and containers to be run.

00:06:23 You do that by saying services, and then you define individual services.

00:06:27 In this case, we're defining the frontend service.

00:06:30 You can use any name, but a standard naming convention is to use web for the frontend.

00:06:36 So as we move to this file, I'm going to remove the comments to show you that indeed it is much simpler than it looks like with all of those comments.

00:06:44 We're going to dive deep into web soon, but for now I have collapsed it for you to see the general structure.

00:06:51 Then we define the API or the service container, and then we define the DB service.

00:06:57 Finally, we define the volumes to be used by the services, and here we create a new volume of a name anime, as this app is going to be about showing anime shows.

00:07:08 So looking at this from a high-level overview, we have the version, we have the services, and we have the volumes.

00:07:16 So now, let's dive deeper into each one of the services, starting with web.

00:07:22 First, we need to use depends on command to specify that service depends on another service.

00:07:30 In this case, we specify that the web depends on the API service.

00:07:35 This means that the API service will be started before the web service.

00:07:40 Okay, that's important because to be able to use our front-end application, we need to be able to have the API loaded.

00:07:48 Then, we specify the build context for the web service.

00:07:52 What this means is simply, hey, tell me where the Dockerfile for this service is located.

00:07:57 In this case, it is in dot slash frontend.

00:08:01 Then, we specify which ports to expose.

00:08:04 The first number is the port on the host machine, and the second one is the port inside the container, and we use a concept known as port mapping.

00:08:13 Then you can specify any environment variables.

00:08:16 This is pretty simple.

00:08:17 We simply expose the Veed API URL to localhost 8000. And then everything below is for the Docker Compose watch mode.

00:08:26 Anything mentioned under develop will be watched for changes by Docker Compose watch, and it will perform the action that's mentioned here.

00:08:36 So we say develop, and then we specify the files to watch for changes.

00:08:41 We watch for path frontend package JSON, and then rebuild the container if there are any changes.

00:08:47 Similarly, we watch for package lock JSON, and then perform the action of rebuild whenever something changes.

00:08:55 We also want to listen for the changes in the frontend directory, and then we simply call the sync action with this one.

00:09:02 And this is it for the web service.

00:09:04 Diving into the API, it's similar.

00:09:07 We defined that the API service depends on the database service.

00:09:11 We specify the build context for the API service.

00:09:14 We specify the ports to expose and do port mapping.

00:09:18 We specify the environment variables, in this case, the DB URL.

00:09:23 And finally, we establish the Docker Compose watch mode for the API service by specifying the files to watch for changes.

00:09:32 Same thing as before in the package.json and package.log.json, and then watches for changes and then syncs it across the entire application.

00:09:42 And finally, we have the database.

00:09:45 Here, we want to specify the image we want to use for the DB service from the Docker Hub.

00:09:51 If we have a custom image, we can specify that in this format.

00:09:55 In the above two services, we're using the build context to build the image for the service from the Docker file.

00:10:02 So we specify the build as dot slash frontend.

00:10:05 or build is dot slash backend.

00:10:08 This is interesting.

00:10:09 So we're not referring to existing images, rather, we build our own images from Dockerfile as we learned before.

00:10:16 But in this case, we are using image from the Docker Hub, so we specify it as image mongo add latest.

00:10:23 You can find the name and the tag.

00:10:25 And of course, all of this is available on the Docker Hub.

00:10:28 You can just explore the official images.

00:10:30 So we use it.

00:10:32 We specify the ports and do port mapping.

00:10:36 And generally, you want to put the ports to your MongoDB Atlas here.

00:10:39 But for demo purposes, we can use a local MongoDB instance.

00:10:44 and usually MongoDB runs on port 27017, so we're exposing that port and mapping it to the port inside the container.

00:10:52 How would you test this out locally to see if the database is live?

00:10:55 Well, you can use a tool called MongoDB Compass.

00:10:58 Finally, we specify the volumes to mount for the DB service.

00:11:02 In this case, we want to mount the volume named anime inside the container at data.db directory.

00:11:09 This is done so that the data inside of the MongoDB container is persisted even if the container is stopped.

00:11:17 And this is it.

00:11:18 This is how you create your first YAML compose file.

00:11:22 It's not that hard, is it?

00:11:24 It's not that easy either.

00:11:25 This is your first time, but trust me, you will get better.

00:11:28 But this is a YAML file for already a pretty big application with three separate services.

00:11:34 You can try building your own that is much simpler.

00:11:36 And as a matter of fact, we have already done that in the last project where we have a really simple, just a web service in here.

00:11:44 So now we have stepped up our game a bit and we're doing it for a complicated app to show you the beauty of Docker Compose File Watch.

00:11:52 So, remember, we're building three different images and containers through one file and one command.

00:12:00 That's power of Docker Compose.

00:12:02 And on top of that, we're using Docker Compose FileWatch to automatically build and run these containers if we make any changes to the application.

00:12:13 So, let's open up our terminal cd into murn-docker and run sudo docker compose up and press enter.

00:12:26 enter your password, and see the magic happen.

00:12:30 It's going to run all the services one by one.

00:12:34 Notice that first it created our DB image and container.

00:12:38 Then it's going to start working on the API, and we can see that here.

00:12:43 And finally, it's going to move over to our web application exactly as we have specified in our YAML file.

00:12:51 So let's leave it do its thing.

00:12:54 There we go.

00:12:55 After about a minute, we can see that the process has finished by this long log file right here.

00:13:02 Don't worry, it's not an error.

00:13:04 Rather, you can see that it successfully containerized all three different applications, the DB, the API, and the web, and attach them together.

00:13:15 If we go back to Docker Desktop, we can see that right here.

00:13:19 If we go to Docker Desktop, we can see that right here.

00:13:23 We have the Myrn Docker Web, Myrn Docker API, and Mongo.

00:13:28 We also have three different containers under Myrn Docker right here, DB, API, and Web.

00:13:36 And we also have the specified volumes.

00:13:39 So now that we have this running, let's open up our browser and navigate to localhost 5173. There we go.

00:13:48 We have a fully functional marine application running on your device locally without you having to spin up the database,

00:13:57 the front end, in the back end, and inputting all of these environment variables manually.

00:14:02 It just works.

00:14:04 That's the power of Docker.

00:14:06 What we have here is a simple application where you can share your favorite anime.

00:14:11 So go to Share, enter the name.

00:14:14 I'm going to do something like My Hero Academia.

00:14:17 You can also enter the link and you can also enter a description.

00:14:22 Finally, click Submit.

00:14:24 That's it.

00:14:25 If you refresh, you can notice that it stays there and this entry actually got added to our database.

00:14:32 Before Docker, we would have to have two or three terminals open running front and back in the database at the same time.

00:14:39 Now it's just one command and we have our app running in real time.

00:14:44 But now let's try to make some changes.

00:14:47 If I go right here and navigate to our front end part of our application, as that's the easiest to notice, we can go to app.jsx and right in our nav bar,

00:14:57 let's try to add a new link by duplicating this one and say something like popular.

00:15:05 If we save it and go back and reload, nothing changes.

00:15:10 So how can we ensure that the updates happen automatically and in real time?

00:15:16 Back in our code, we can open up a terminal and then split it to create a new one alongside it.

00:15:23 There, we can run the command sudo docker compose watch.

00:15:29 We're finally getting to the watch part.

00:15:31 If you press enter and enter your password, you'll see that something will start to happening.

00:15:38 It looks like it's starting with the watch configuration.

00:15:41 So now, if I save this file right here with popular included, Go back to the browser and reload.

00:15:48 Indeed, Popular is there.

00:15:50 And you can see that if I save the file, something happens here.

00:15:54 There's an update happening in real time.

00:15:56 So if I change it, save it, and go back, it's updated in real time.

00:16:02 Now, let's remove it.

00:16:04 And let's try to test whether this works for the backend as well.

00:16:09 We can do a quick test by installing a simple package called colors.js.

00:16:14 That's just MPMI colors, and it allows you to change the colors in your terminal.

00:16:20 With this, we'll very easily be able to see whether the package got installed or not.

00:16:25 So back in our code, we can navigate to our package JSON of the backend part.

00:16:32 And using our terminal, we can install the package.

00:16:35 So let's split the terminal one more time.

00:16:38 CD into backend.

00:16:40 And then let's run npm install or npm i callers.

00:16:45 This is going to add it.

00:16:47 We can kill this terminal in the middle.

00:16:49 And immediately you can see that something started happening on that watch part.

00:16:55 It looks like it's listening to it and rebuilding the entire application with this project installed.

00:17:01 That's great.

00:17:04 Let's also explore the code a bit.

00:17:06 Right here in the index, you can see that we are enabling this callers package coming from callers.

00:17:13 And we are also logging it out in a rainbow of caller whenever we go to localhost 8000. So back in our browser, let's simply re-navigate to localhost 8000.

00:17:26 We get a hello world here, but we're more interested in this hello world here, because this one means that the package got successfully installed.

00:17:37 There we have it.

00:17:38 Without a refresh, rebuild or rerun, our application works in real time with the help of Docker Compose Watch.