00:00:00 Oh yeah, developers are lazy.

00:00:03 So writing and running all of these commands for building images and containers and then mapping them to host is just too much to do.

00:00:12 But it's not the only way.

00:00:14 We can improve or automate this process with Docker Compose and run everything our application needs to run through Docker using one small single command.

00:00:26 Yes, we can use a single straightforward command to run the entire application.

00:00:32 So, say hi to Docker Compose.

00:00:36 It's a tool that allows us to define and manage multi-container Docker applications.

00:00:42 It uses a YAML file to configure the services, networks, and volumes for your application, enabling us to run and scale the entire application with a single command.

00:00:54 We don't have to run 10 commands separately to run 10 containers for one application, thanks to Docker Compose.

00:01:02 We can list all the information needed to run these 10 containers or more in a single file and then run only one command that automatically triggers running

00:01:12 the rest of the containers.

00:01:14 In simple words, Docker Compose is like a chef's recipe for preparing multiple meals in a single dinner.

00:01:22 It allows us to define and manage the entire cooking process for recipes in one go, specifying ingredients, cooking instructions,

00:01:31 and how different parts of the meal should interact.

00:01:35 With Docker Compose, we can serve up our entire culinary experience with just one command.

00:01:43 And while we can manually create these files on our own and set things up, Docker also provides us with a CLI that generates these files for us.

00:01:54 It's called DockerInit.

00:01:56 Using DockerInit, we initialize our application with all the files needed to Dockerize it by specifying our tech choices.

00:02:05 So let's go ahead and create another Vite project, which we can use to test out the features of Docker Compose and Docker init.

00:02:14 We can open up a terminal and then run npm create Vite add latest.

00:02:20 In this case, we can call it Vite-project and press enter.

00:02:26 It's going to ask us a couple of questions.

00:02:28 It can be a React TypeScript application.

00:02:30 We can CD into it.

00:02:33 And please make sure that you are in the Docker course, meaning in the root of our folder.

00:02:38 So it needs to create it right next to React.

00:02:42 If you were in React before when you run this command, it's going to create it inside of it.

00:02:46 If that's the case, delete it and just navigate to Docker course and then run the command.

00:02:52 Now we can CD into Vite project.

00:02:56 And we can learn how to use Docker in it.

00:02:58 It's so simple.

00:02:59 You simply run Docker in it.

00:03:02 That's all there is to it.

00:03:03 And it's going to ask you many questions based off which it's going to generate a perfect YAML file for you.

00:03:10 So what application platform are we planning on using?

00:03:13 In this case, it's going to be Node, so you can simply press Enter.

00:03:17 What version?

00:03:18 You can just press Enter one more time to verify what they're saying in parentheses.

00:03:23 20 is fine with us, npm is good.

00:03:27 Do we want to use npm run build?

00:03:29 No, actually.

00:03:31 In this case, we're going to say no, and we're going to say npm run dev.

00:03:35 That's what we want to use.

00:03:37 And the server is going to be 5173, and that's it.

00:03:43 We can see that this has generated three new files for us.

00:03:48 The Docker file, which we already know a lot about, this one has some specific details in it, but you can see that again,

00:03:54 it's based off of the same thing.

00:03:57 It starts from a specific version, sets up the environment variables, sets up the working directory, and runs some commands.

00:04:04 We also have a Docker ignore, where we can ignore some additional files.

00:04:09 And then there's this new file, compose.yaml.

00:04:14 While all of these files are important, with using Docker Compose, YAML is the most important one.

00:04:20 And you can read all of these comments, but for now, I just want to delete them to show you what it is comprised of.

00:04:27 We simply define which services we want our apps or containers to use.

00:04:32 We have a server app where we build the context, specify environment variables, and specify the ports.

00:04:39 Of course, these can get much more complicated in case you have multiple services you want to run, which is exactly what I want to teach you right now.

00:04:48 Here, they were even kind enough to provide an example of how you would do that with running a complete Postgres database.

00:04:55 So you can specify the database, database image, and additional commands you can run.

00:05:00 But more on that later, we're going to approach it from scratch.

00:05:05 For now, we can leave this empty Compose YAML.

00:05:08 And first, let's focus on just the regular Docker file.

00:05:12 In this case, we can replace this Docker file with the one we have in our React Docker application.

00:05:18 So copy this one right here and paste it into this new one.

00:05:23 This one, we already know what it is doing.

00:05:26 Now moving inside of the YAML file, Here, we can rename the server into web, as that's a common practice for running web applications and not servers.

00:05:39 We can also remove environment variables, as we're not using any.

00:05:45 And we can leave the port.

00:05:46 Finally, we need to add the volumes for our web service.

00:05:50 So we can save volumes.

00:05:52 Make sure to provide a space here and then a dash.

00:05:55 And that's going to be dot colon forward slash app.

00:05:59 and another dash forward slash app forward slash node modules.

00:06:04 Does this ring a bell?

00:06:06 It's similar to what we have done before manually by using the Docker build command.

00:06:11 But now we're doing it all with this Compose YAML file.

00:06:15 And now all we have to do is run a new command.

00:06:18 Docker compose up and press Enter.

00:06:23 And as you can see, we get a permission denied.

00:06:27 You never want to see this.

00:06:29 If you're in Windows, maybe you're used to seeing this every day.

00:06:32 In which case, you simply have to close Visual Studio Code, right-click it, and then press Run as Administrator.

00:06:40 That should give you all the necessary permissions.

00:06:43 On macOS or Linux, you can simply add sudo before the command.

00:06:49 Then it's going to ask you for your password, and it's going to rerun it with admin privileges.

00:06:54 So let's press Enter.

00:06:56 And the process started.

00:06:58 It's building it out.

00:07:00 Now, let's debug this further.

00:07:02 We get the same response we've gotten before.

00:07:05 Hmm, what could this be?

00:07:07 Port is already allocated.

00:07:10 Oh yeah, we forgot to delete or close our container that we used for previous React application.

00:07:17 So now we know the easy way to do it.

00:07:19 We simply go here, we select it, and we can stop it or delete it.

00:07:26 Once it is stopped, we can go back and then simply rerun the command.

00:07:31 I want to lead you through all of the commands together, even with the failed ones, just so you can get the feel of how you would debug or re-approach

00:07:39 specific aspects once you encounter errors.

00:07:42 That's what being a real developer is.

00:07:45 Getting stuck, resolving the obstacle, and getting things done.

00:07:50 And finally, let's run the command.

00:07:53 It's running it.

00:07:54 And if we go to localhost 5173, ah, the same thing as before.

00:07:59 Any guesses?

00:08:01 The answer is that we once again forgot to add the dash dash host to our VEAT dev script right here.

00:08:09 So if we add it, stop our application from running by pressing Control C.

00:08:14 This is going to gracefully stop it.

00:08:18 The cool thing about Docker Compose is that it's also stopping the container that it spun up And now that we have canceled our action,

00:08:25 we can try to rerun it with sudo docker-compose-up, but this time with host included.

00:08:32 And press enter.

00:08:33 It's going to rebuild it.

00:08:35 And if we open it up, now it works.

00:08:39 But still, this isn't optimal for developer experience, is it?

00:08:44 Every time we make a change to the package file, we have to rerun the container.

00:08:48 Sure, Docker Compose solves the problem of showing up-to-date code changes through volumes, letting us manage multiple containers in a single file,

00:08:58 and lets us do both things, building and running images.

00:09:02 But it still doesn't do it automatically when we change something related to the package files or when we think it's needed to rebuild the image.

00:09:11 And this is where our next Docker feature comes in.