Learning - How to use Vue with Docker - NodeJs & Nginx

hi everyone and welcome to my channel in today's video we are talking about view and doctor I hope you enjoy this video and let's do it so let's check bu version I have four dot 4 dot 5 let's create the view project doc review yeah ok it's finished really change the directories on change directory and let's run the server to check what is the view project default ok it's that only HTML with all the installed talking's then let's open a vs code that's all ok here is or up view we are going to delete all the stuff that we don't need this is the name of the app let's check the main it has all the production tip the import that we need and all the stuff that we need so let's start erasing all that we don't need okay then here is this one and this is the name let's change it ok that's all we need to change create another CSS ok now we need to change the company name right here and the import two continents yeah the check ok nothing so perfect so let's start with something let's put a hello right there message right there [Music] okay let's convert it to a header okay that's all let's change the message for I love the new darker so okay we have the message right there let's start with an image we need to image we need the source of the image but why do we need a image before let's him for it I don't have right now or images we need to bring an image so in this case I will use one of the view logo not this one is one is there okay we have our two images let's change name ports okay okay we have our two imports let's put that data right here let's set the two images to return very much image right now we are returning our data and we can use it in the source okay let's set out okay alternative text let's set a class puts class and the same name yeah and let's set a class for the header title another class for the container and that's all so okay yep and it's running we have our two images there doesn't have a CSS so let's create it for classes we need okay see the first one need to be relative the other ones are absolutely but first the head of this 100 BH there with 100% okay she's an absolute with when you Ram left Hulk I use always called because you can set the 50% - the half of the width and you are centering the image so that's how i centered this images weight of 60 grams left couch as I said 15 - 30 is the house okay top very three Rams wrong size for RAM text-align:center okay we have the title right now set we need to set up with for this one - we need to Center it okay top okay and that's all up the doctor image is small let's put another okay it's better that's all we have our CSS okay the next thing the next thing we need to do is to build the project so let's build it there and the build will create this folder and that's all so right now it's not working because I stopped it let's create a docker file and step one build new project from no.12 all time we are using Alpine because it's a good distro to use in a docker image so in this case I'm using all time it's tag is built so next we need to create a work there AB J and then we need to copy the package Jason into that folder yeah the package JSON contains all the packages that we need to install to run the build process and it will copy right there then we need to run npm install to install all the packages that we have right here and we need to copy all the node modules then we need to ok it's copying all the node modules in that folder run npm run build to build our project so it will create this folder and we need a index dot HTML to make work so let's set us tab to create nanjing server and we need to start with endings we are using endings because it's a easy way to set a server so we are using again the alpine one and yeah to us proud stage then we need to copy all day all the info that we had in the build stage that is up that list that is the folder that they built created that folder and we need to put it in the user shirt engines HTML folder we need to expose the port in this case I will expose the area and we need to run the engines comment oops engines - Jean Damon yep and that's all folks that's all for the step two for the step one so we can start building our image so let's build it but first we need to check the containers we don't have we don't have the images we don't have images as you can see we don't have containers running let's build or container filled we need three dr. Billy is a comment then we need that - t for the tag and a dot don't forget the dot is to set all the things there are in that folder it's clear dr. images we have or images right there we have the node image that we asked from node and the endings image from changings next thing we need to do is to run it but first let check we don't have containers let's run it run - P for the port okay we have the - P and the port 80 that we are exposing on docker and the other port is the port that we are using to access - I need to get the information in the console and we need to set a doctrine name container name so in this case we need to set the image that we are using for that container and right now it's running okay let's check that in this darker K is the same thing we have right there de the access to our page and the CPU usage and the memory usage let's copy this one okay and right there and voila we hover our page I love you and docker and we are running right now or project in daughter okay let's stop it it is not working because it stopped let's run it again and now it's working again let's leave right here let's check the running containers okay we have the comment that is running there is created about a minute ago the status is okay the port ok the ad that we are exposing and the names okay let's stop it okay it is stopped there is no working because it is stopped okay okay let's stop it again let's run it right here and let's run with it without the port and without anything as you can see we cannot show they're in the beach because we are creating another container we are running another container so in this case we haven't set a port so that's why we are not having access to that page let's check all or containers we have okay we have the name that's all we have right here two containers and let's remove them okay we can remove it by the names or by their ID okay right now we don't have containers let's check no no continue running the containers let's erase our images we have these four images let's erase them with the IDs okay that's all that's all folks we have finished for you for this video so thanks a lot everyone I hope you enjoyed this video if you like this kind of topics please follow me if you want to know how to do it with react or angular I will let the cards right here so thanks a lot and bye bye [Music]

Channel: Enjoyable Programming

Views: 28,884

Keywords: vue, vuejs, docker, nginx, programming, server, frontend, dockerizing, app, enjoy, learn, nodejs, front end, dockerize, vue app, vue create

Id: XiMBLwfMNss

Length: 16min 10sec (970 seconds)

Published: Fri Jun 26 2020