Dockerize Our Application - Evernote Clone Part 8

okay hello guys um what up uh if you don't know me my name is fadil and we are back again uh making videos and we are gonna continue to improve uh our never not project so now the plan is we want to dockerize our projects for clients and back ends and also the database my scale but this is only for the development purpose and to make the development mode to be easier so yeah let's open our project our latest project okay where's mine as you can see this is the lettuce okay it's up to date uh this is what i push uh latest version uh you guys can find it in the github links in the below the description yeah okay so we want to uh characterize our server and our web and also our uh my scale uh and we want to and we want to wrap um all of the container with darker compost okay um uh yes we first want to okay first we want to move our darker compost to the root project and we want to make a docker file for this server let's start with uh wave uh maybe surfer first okay here we want to use the uh uh not image and it's not uh fourth in slim uh and uh we want to set the work there name is uh user and app then we want to copy the package because uh docker has a way to cache all of the the image data so whenever this one is not changed this one this will not run so it will use the cache that already uh previously run the yarn so that's why we set this one first and then in the server we want to expose our ports expose port 4000 uh okay okay and we set to the command yarn uh start we uh we are done make the docker file we can make it for the web also docker file same as this but we exposed it 3000 and then we yarn start okay uh we can uh we can make a make file uh this mac file is for uh running our comment so like this make run uh build like or make build dev we can we can run this uh following from from here field depth uh we can specify like this we want to move to the server and we want to docker dot docker built we want to build the image with the tech that is server we will name it to api server and what are the context that is the folder and we copy this we want to move to the web and then we can take this as react web okay so in windows you need to install this make command with chocolate let me show you this uh how to use uh how to install use make in windows you need to install chocolate and install make with choco yes chocolaty uh in linux or mac i think uh there's another way like in linux maybe sudo apt installment i think that uh i think uh that is the way okay um oh yeah uh forgot uh we want to make the ignore for the docker that is docker ignore we want ignore the not modules folder because we want to we don't want to copy this we want to run this and copy this we don't want that so we pass it the name in here and that modules will be generated inside the inside the container with this run yarn not from copying this one okay and save it and we copy this to the web also okay and we can try to run this command uh this probably take a long time because it needs to download the note image first like this uh this one this one uh still uh pulling the image okay we are done uh building the image and we want to run the image with docker compose inside here so yeah we we want to first edit our we probably should edit our files previously before building this i want to impress using the environment variables so let's start with server in server let's see this one we need to put it inside our environment so let's set this web react web let's put it here okay save it and we access it from the constant then here react web process and support gary equip we also want to change this to be type of chess and we want to export this and we want to import the constant okay here we want to um here we want to uh get the localhost from our docker compass because it will not work when we type localhost here because the my scale is from the docker surface so we want to change this to be mysql iphos let's name it like this and we added in our constant here process and okay probably should be hos ip got it wrong so here we should uh use it like this we save it um and here we want to use it in cons web react web okay [Music] uh yes maybe that's it for the server want to add for the react web here we want to oh yes in create track app we don't need to install the this one dot end because it's already has the end in from the rex react uh create track app so we only need to add the the file the environment file and we must add the react react um what what react app rec app and then our name so let's uh find the yes this one maybe express url uh let's put it in in in this express url this environment so we use this from our process.nbc like this okay and then what else can be this one token uh we can use it from process.n token we pass it in here react app token uh should sit in like this here okay uh specified that there is like there is a value so we add the exclamation marks we tell the typescript that there will be a value for this so it's not error okay and what else maybe uh just that first okay let's try to make the compass for the other one so in here we uh yeah we we also want to move this to the server environment and also red password this one should be test i think okay and we want to access this uh from our um from our compost so we set the environment variable first file it should be from the server and then dot n and to use it we need to parse the variable with double dollar dollar sign yes we pass it like here like like this um okay and we we want to make these uh this mysql containers to persist the data that is saved inside the container from the database so we need a volume for that volumes that is [Music] my scale data or i i think i think my skill data is is a good so we need to say uh i think the default correct me if i'm wrong the default uh location for the mysql is in here i think okay so we need to make this volume here volume volumes is my scale data the driver that is used is local okay uh we we we uh i think we don't make the my scale um yes and also want to make this for restart unless stop or always we can set to always but maybe unless type is enough and we also want to specify the network that would be network or nav never not app we make the network here it works there is driver is bridge okay and we want to make the server service that is using the uh image that we already make here uh any that is a fba server i want to use this image and then um i want to uh expose the ports again that is uh 4000 yes okay uh so we also want to be able to hot reel it uh whenever there are there are files that are changed so we're gonna use the volumes also volumes that is whenever uh what uh all of the file in here that should be bind or mount inside the container there is source app yes source app yes user user user app and then that's it um we also want to not bind the the local node modules we just say that say that like this user app not modules so this is basically tell that i only use uh only use the note modules from the container that already generated from a build file built here okay and then uh this surfer container or surface will depends on the my scale my scale from here because this needs to be running run run run first then this can be run and then we want to set the networks to that is networks or never not app and restart unless stop and also that i mentioned uh previously we need the host ip so we need to pass the environment this one so we set the environment here that is he that is this and my scale so this one will pass to this and can be used in here okay um i think that's that's it for the server let's make the react or web it is using the image react web and then we set the ports to be three thousand three thousand and uh pretty much the same as this want to able to hot reloads uh this one from the web uh yeah that's it i forgot i think uh because i'm on windows there's a bug here that the docker will not hot reload whenever the react file is changed so i found the solution here stack overflow so it needs to add the environment here for our react container so i'll put it in here let's try this and it works so put it in here and also we this one is also it's not working because uh the in in server we we we are using the not month and that one will not works well that works in docker so we need to add flag here says legacy watch this will work for this binding to be hot reloaded so we saved um i think that's it uh let's give it a try uh let's make the build here or the command i think i mean local run local or run df this should be docker compost up so want to build with will be previously first you can you can delete the previous image or i think i will delete this so we will make okay newest one to be clean image okay want to make a build death let's read it again okay it's done and we want to run the let's let's let's see the image first okay we're going to run the uh randy ah there's an error depends on must be list okay depends on this one this one should be like this okay we try it again okay it's pulling the my scale image here because we don't have one in our cache i think there are there are errors and let's stop the correct one i think stop but this one like back then like this okay uh maybe we put this in here too let's try to run it okay it works it runs the my scale and the react web and then the server and it's not working for the server it's not connecting okay let's see the i think this should be exposed to port 3 6. we stop this with ctrl c uh let's try to run it again like this i hope it works shut up i be host am i not wrong from previously um this one uh from uh host ip hos ip host ip and then host ip and here host ip okay um okay let's let's let's try to build built it again uh built f randy death uh hope it works why it's still not working with password sql transfer password user i don't think this should be admin um let's try to run the uh the etc and the my skill first i want to build um oh yeah it's still uh still the night this one should be tess i think let's uh build it again okay uh i think there's something um around we can access the the tests um let's try to just test in here tests um i think it's because the ip is different you could get uh don't copy this you should correct i think or maybe this one is not correct um let's uncomment this you foreign uh [Music] let's try to check this remove our um yes we can use remotely containers okay talker let's try to learn again grab a new my scale might still have the same error let's stop the web app right here docker help docker stop okay there's no running container parts maybe this should be 1.2 1. let's try this uh let's try to stop stop the uh of the container of the surface and let's uh let's try to change this to this test um i think i know what's the problem yeah this is it just works i think this one is is the problem i think let's let's uh let's let's uncomment the uh oh i i oh it's still still not working uh maybe um why it's still not working wait wait yes it's working um let's try to put this in here again i think this one is the problem no it's crack how does this happen um yeah i don't know what's happened so i think it's okay uh right now maybe this one should be uh this one or this i think so uh either way it works now so let's try to to run this okay still working this one should okay what's working and we will wait for the web uh web okay it's working let's check check the application uh i think yes yes this one this one is from previous uh this one uh this one is from previous uh hot reload okay let's let's check our check our [Music] let's check our app localhost get working let's check the hot reload okay okay it's working and let's check for the server [Music] check this local host 4000 okay and this one is not working upon legacy watch let's try this to l dash l and we try to build again try to build run build death okay uh we built it and we run it again okay uh okay it's still working let's try it again this one uh where is it where is it where is it walk in let's erase this again okay it's working and we try to check this this one is has haha this one has a higher and we delete okay it's working yes it's working dash l the the correct one is dash l okay let me see that one dash l oh it's the dog here legacy watch it's correct but it's not working or maybe we didn't um built built it uh previously so it fails okay uh it works okay um that's it guys we're done uh making our app to use the docker we integrate our each of our project uh while we're in it i want to update our authentication in here but i want to add new package so the bedside uh from this uh turquoise thing uh if we add this new package i want to add a react hook form uh it will success but uh when we use the package in in our app it will not uh it will not work because the modules is not uh exists inside the container so we need to so if so each time we add new packets we must rebuild our our uh image so that's it so let me show you import from very cook form uh here i want to import the use form oops use form and i want to make i want to change this uh is required here because it's not good to import register handle submit and then from state errors you can see the documentation from here react form here there are many examples you can learn here so on here we want to wrap the form this one function with handle submit and uh i want to register our okay this one should be data and any and then uh we want to remove this to be like this to register we want to spread the register what field that would be email and then what are the option is this required mess email is this is the message error email is required i want to add this to type email and can delete this and we want to add this in password two this should be password and mean link is value p6 password and the message is password minimum 6 characters button password should be at least okay like this and we want to select this to get the is submitting from our use form is is uh yes useful it's in here and we want to check the we can delete this on change handler i want to display the uh error message if it has there's no autocomplete so we want to make the type the email is string password is string and we can put it in here and also in here and here we want to pass the data's variables and here should be a rasp okay like this uh this should be should has a autocomplete email that's it to add the message here email that message this last name text error i want to put this for the password too password password okay submitting okay let's try it let's try our new form uh it will error okay as i stated uh previously so we need to rebuild again every time we add a new package so yeah it tooks uh some time uh with these drunk rice so still it's a it's a good chance to learn about a docker and docker compose so it's okay for this tutorial to run build f we run it again let's refresh it okay it works it works using the [Music] see we already used the how we can remove this and this one we already use the use hook form i want to style this first in the form text error pending we want to add pending vertical five pixel and ball horizontal the color is red okay it's working let's re user okay will not work okay let's try to login oh it doesn't exist so we want to register first up that's a password okay it's working uh when we uh log out and let's try to stop uh wait wait let's let's login again if it's uh exists okay let's try to stop our docker compose uh let's check if the uh data is persist okay stop it and we can run it again see it's okay okay okay check again we login again okay it's persist okay let's uh add this new new use form in our sign up here we delete this we delete this we import and then we copy this um here and then we want to remove this as um form data this one should be data and then remove this we set this handle a submit we can copy from here okay we also want to copy this one i know it's not a good practice to copy paste but it's more fast like this okay and then we copy these two also we want to copy this okay submit thing and then we want to copy the text error because it's pretty much the same we save it let's write the sign up okay enter email address okay um okay okay okay it's not working so answer to user two okay it's working user 2 up you see that email is that it doesn't exist i think uh something wrong in here this data it's it's correct um what's wrong here let me check the database oh the this like this there's no dot okay um it works yeah oh the cache is not updated it's not updated from the previous user okay let's um let's fix that in the next video i think okay at least it works now okay that's it guys um thank you see you in the next video bye

Channel: Fadil Natakusumah

Views: 153

Keywords: react, react application, typescript, graphql, fullstack, fullstack application, full-stack, type-graphql, typeorm, javascript, nodejs, expressjs, jsonwebtoken, evernote, evernote clone, clone application, web app

Id: 9RnmohYqlas

Length: 55min 18sec (3318 seconds)

Published: Fri Oct 29 2021