Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Full Stack Next.js 14 Demo
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"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 Now, let's address the elephant in the room, and that is how to Dockerize a Next.js application.
00:00:07 More specifically, a full-stack Next.js application.
00:00:11 And the short answer would be the same as what I've taught you before in this course.
00:00:16 I went ahead and created a small full-stack application using v0.dev.
00:00:23 This is Vercell's new component generator.
00:00:26 And the starter source code for that application is below this course.
00:00:30 Copy it, paste it right here, and just rename the starter for just Next Docker.
00:00:38 So for one last time in this course, let's take this as a recap of how to Dockerize a full stack modern Next.js application.
00:00:48 First of all, we're going to open up our terminal and navigate to Next Docker.
00:00:54 Then we're going to initialize the Docker part of the application by running Docker init.
00:01:02 In this case, we can select node.
00:01:04 Version 20 is fine.
00:01:06 We're going to use npm.
00:01:09 We don't want to use npm run build for starting the server, but we do want to use npm run dev as that's how it is with Next.js applications.
00:01:18 And we want to listen on port 3000. Now, as Docker CLI conveniently tells us, three files have been created.
00:01:27 The Docker files, the Compose YAML and the Readme Docker MD.
00:01:32 All the files we need to Dockerize our application are ready.
00:01:35 Now let's take a moment to review them and tailor them to our application.
00:01:41 Let's start with our Docker file.
00:01:44 Here we have some comments to help us get started, but at this point we don't really need them.
00:01:50 So this is how we can define specific arguments to be used within your application.
00:01:55 For example, they define node version so they can specify it in multiple places.
00:02:00 But as a matter of fact, let's rewrite this on our own to fully brush up on our knowledge of Dockerfile syntax.
00:02:07 We can start by inheriting from a specific image.
00:02:12 In this case, we can start from Node as our application is going to be based off Node.
00:02:17 Feel free to provide a specific version or just leave it like this.
00:02:22 Then we want to set the working directory by saying workdir forward slash app.
00:02:27 We want to copy the package.json and package.log.json into the image by saying copy package everything dot json into dot slash.
00:02:39 Then we want to run npm install.
00:02:42 We want to copy the rest of the source files into the image by saying copy dot dot.
00:02:48 We want to expose the 3000 endpoint.
00:02:51 And finally, we want to run npm run dev.
00:02:56 That's all there is to it, of creating your Dockerfile capable of Dockerizing Next.js.
00:03:02 Now, let's also look into our compose.yml file.
00:03:07 In this case, let's also rewrite it from scratch.
00:03:11 First, we can define the version of our Compose YAML file.
00:03:14 Something like 3.8 in this case should do.
00:03:17 And just to repeat, it's not a version of Docker we're using.
00:03:20 It's a version of a specific YAML file syntax for Docker.
00:03:25 So if we're using some newer syntax, just figure out in which version they're supported.
00:03:30 Next, we define services.
00:03:33 We can call it something like frontend for the frontend side.
00:03:37 And then we define build.
00:03:39 where we have the context right here, dot, we're immediately in there, and Dockerfile is going to be called Dockerfile.
00:03:49 So in this build, we're just pointing to the Dockerfile from where it's going to build out our image.
00:03:55 Then we can define the ports right here next to the build by saying, dash 3000 mapped to 3000. And then we want to use Docker compose to watch for the
00:04:09 changes and rebuild the container.
00:04:11 We can do that by going below the ports and then saying, develop watch.
00:04:17 And then we provide what we want to watch for.
00:04:20 So which path in this case, we can do dash path of dot slash package dot Jason.
00:04:28 And then the command or the action in this case.
00:04:32 of what we want to do once it notices the changes in that file.
00:04:36 In this case, we want to rebuild our image.
00:04:39 We can also repeat the procedure with path of dot slash next dot config dot JS.
00:04:47 And it's going to be action rebuilt.
00:04:50 We can do that also for the package lock JSON.
00:04:53 So path is something like dot slash package dash lock.
00:05:00 dot JSON and action rebuild.
00:05:03 And finally, we can add a path for all the other files, meaning simply dot where we're going to do the target of app and an action of sync.
00:05:15 So this is going to make sure that we sync our container with our host machine.
00:05:22 Finally, we can define some environment variables right here below develop.
00:05:27 So environment in this specific app, I'm using MongoDB Atlas.
00:05:32 So we need to pass in the connection string.
00:05:35 I'm going to say DB URL, and then I'm going to give you access to this string.
00:05:40 You can also find it below in the course.
00:05:43 It's going to be this one right here.
00:05:46 And don't forget, if you were running a local instance of MongoDB, you would need to do something that looks like this, where you define the image,
00:05:53 you map the ports to the local MongoDB Compass version, define the environment variables, and then specify a volume.
00:06:01 But in this case, it's done for us automatically, because we're just referring to the deployed MongoDB Atlas database.
00:06:09 Finally, we specify the volumes, Because our application is going to be about tasks.
00:06:16 And that's it.
00:06:17 That's our Compose YAML.
00:06:20 Finally, open up the terminal and you simply need to run sudo docker compose up.
00:06:28 Enter your password.
00:06:31 And it's going to start building it.
00:06:33 It's going to start with the front end and soon you'll see a lot of things that you see when building out your typical Next.js application.
00:06:40 It will start installing all of the packages and everything needed to run our application locally.
00:06:45 And there we have it.
00:06:48 Our application is not only Dockerized, but live on localhost 3000. Let's open it up and test it out.
00:06:55 There we go.
00:06:56 Now we can see that this is a typical to-do application where we have some registered tasks.
00:07:01 We can see the task right here.
00:07:03 We have one task to learn Docker right here.
00:07:07 And thankfully, you'll be able to tick that box off once you finish watching this video.
00:07:11 And we can also create a new task.
00:07:14 Now, I purposefully left this typo right here in registered to check whether we can fix it within our code.
00:07:22 What do you think?
00:07:23 Will it work or not?
00:07:25 So if we go to search and search for registered, you can see it right here on top.
00:07:32 It's actually being mentioned two times.
00:07:34 So if we change it and spell it properly, which is registered, and go back to our application, it didn't work.
00:07:44 Our Docker wasn't watching for changes.
00:07:48 Unfortunately, we forgot to tell Docker to watch for changes.
00:07:53 But thankfully you know how to do so.
00:07:56 Simply open up the terminal, split it, and run sudo docker compose watch.
00:08:05 Enter the password.
00:08:07 It started doing its thing.
00:08:09 And it looks like it's listening for changes.
00:08:12 Now we have made the changes already.
00:08:14 So let's simply press command or control S to save them.
00:08:20 And as soon as you do that, you'll see syncing frontend after changes were detected.
00:08:24 Going back to our application and reloading, you can see that the typo has indeed been fixed.
00:08:31 So there you have it.
00:08:33 You just learned how to Dockerize the most modern web application there is, a full stack Next.js application.
00:08:40 But with that, you've also went through the process of Dockerizing a simple vanilla.js script to doing something like Vite,
00:08:47 React, Mearn, and then Next as well.
00:08:51 Not only have you learned all of the most important Docker concepts, you have put them to use in five different kinds of applications.
00:09:00 You've learned how to build images using the Docker file.
00:09:05 You've learned how to use Docker Compose and create Compose YAML files.
00:09:10 And with that Compose, run as many services as you want with a single command.
00:09:16 You've also learned how to listen for changes in your applications.
00:09:20 So in a nutshell, you've learned how to Dockerize any application