"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
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.