Dockerizing a React application with Nodejs Postgres and NginX | dev and prod | step by step

hi everyone my name is lars leber welcome to my channel coaching today we are going to create a multi-container application which will be running inside docker containers we will create both the development and the production version of our docker files locally we will use docker compose file that will run the backend the front end the nginx and postgres and you will be able to start the whole construction with one command for front-end we are going to use react for the back-end we are going to use express node.js server and we are going to use postgres to store the data in the database we are going to use nginx for two purposes one for the routing and one to serve the build it front and react code as an http server so if you haven't installed docker desktop to your computer please install it but you can find an installation tutorial on my youtube channel if you search for how to dockerize a react application you can find it on my channel in the first part we are going to create an application but if you don't want to create the whole thing from scratch you can download the whole thing you can find my repository under under my video so let's get started the architecture of the application we are going to build we are going to build both the development and production version of our application we are going to use nginx proxy react server express node.js server and postgres4 database we will use nginx for two purposes one for the routing and one to serve the builded react files as an http server so based on the pet nginx will decide that where to redirect our requests to the http server or the node.js error please install docker desktop because we are going to use it if you haven't installed it yet and please enable kubernetes 2 because in the following video my following tutorial we will deploy our application in kubernetes okay the first thing is to run npx create react app client this will create our client react application with name client okay now create another folder in our main folder named server and run npm init command in this folder to create our basic back-end application okay so i enter to the server directory and run npm init command here i set some initial settings you can skip these steps if the given setting is appropriate for you okay first we will create our back-end application our node.js application basically so open the package.json file in your server directory and add some dependencies we we are going to add express we are going to use pg course node moon and body parser and after that please run mpm install command to install these dependencies okay our dependencies are installed now create a new file named keys.js in this file we will declare the configuration of our postgres so here we set up our pg user pghost pg password and port okay these settings will coming from the environment we will pass this values from the docker files and later on from the kubernetes settings files so here we use this environment variables to set our object and we will use this object to set up postgres in our main javascript file so now create our main file index.js and here we we import our keys for posgas and now we set up express so we require express here we require body parser for express and we will use course to a able to use cross size scripting and here we create our express application we set the course we set the body parser and now we create our postgres client here we use our settings which we have already placed in the keys file they are coming from the environment as environment variables now we will create an event on connect for postgas and we will create a new table if it's not already exist the table's name will be values and only one column will be in this table named number we will store numbers it will be very simple application because we will concentrate on docker and kubernetes in my next video now we are going to create some routes the slash path will return only high and we are creating a new api endpoints values slash value slash all it will return the values coming from the database so here we create a query select all values and return it in the response and we are going to create an other api endpoint so we would like to store these values in the database table so create another endpoint slash values and it will be a post request so we will get the value and insert it into the values table so here we define this command and the value will coming from the request body value so if this request body value is exists then we send the response after we insert it that okay it's working otherwise we send back that working is false so not working application we listen on port 5000 and that's all this is our little back-end application and here i just console that something error on the during connect and here we should define some scripts the first is the development startup script which is only nodemon and for the production we define the node index.js now let's test our application npm run dev and you can see it's listening so everything is working as expected we can check it in the browser so if you open a localhost port 5000 you can see the high message here so everything is working as expected and we can check the value slash all command but you can see it's expected that postgres is is not available at the moment so okay now stop this application and we will write our client code okay first open package.json in your client folder and here we will install some dependencies too we will use access for a service course and react router dom we will define some test routing so now call npm install in this folder too and install these dependencies okay now we can test our application because it was created with mpx create react app tool so everything is working out of the box you can check it on locals 3000 but now create a new component other page we will create a test route for this other page component just to show that routing is working so create this component and put a link to go to home screen and a simple message here now delete everything in the app.js so it is a an empty component we will define the router so it's it's imported from the react router dom and we will define the routes later on import other page and now we will put a little header in this component so put this message here that this is a multi-container application and two links these links will always be shown because it's it's in the header and here we define our roots so the first route is the mainfest it will redirect us to the main component and the other page root will redirect us to the other component now create our main component this component will contains our business logic so create main div and create button here get all number this button will fetch the numbers from the backend so create the action it's in a use called back hook so import this use callback from the react package and we can test our main components so import it in the app.js and wrap our content in a fragment so only one child will be in the router component now you can see my header is working we should define some css later on but it's working now okay now put some class names on the header and on our main div later on but define our basic css it's up to you that what type of styles you are going to using but i put some margins and backgrounds to these elements now just for testing purposes so it shouldn't look nice but it's more than enough now okay it's more than enough for me so now go back to the main component now we are going to write our get all numbers function it will be on a sync function because axios.get returns a promise we will fetch the data from the slash api slash value slash all endpoint and we will store these values in the state so we we are going to use the use state hook now uh import the use state from the react package 2 and we call set values values okay now we will render these values so in the return section we will map through these values and return some elements in the dom that's it and now we create our main components scss file we give some class names to the elements and give a little style to these elements too so again this is a little test application so this shouldn't looks perfect so i just give them some background and some margins and a little border for the values of course our endpoints are not online at the moment so they are not working now but we can see that the proper request call is created by axios so i think it's working you can see that we call slash api slash values but in our node.js application we only define slash values this is because nginx will redirect our slash api slash value slash or request to slash values slash or request into the node.js application so it will be handled by the nginx proxy so now create the same number function it will be a sync function too we call event prevent default because it will be attached to the button in the form and we send our current value so we define another state value we which will store our value which will be typed which will be typed in the input field so now create an input field and this input field will be use this value and in the unchanged event we call set value to set this value and it will be refreshed in the state and here we defined our submit button and on the form defined on submit event so the event handler will be our save number function now we call set value with empty string after we send the value to the end and get all the numbers again to show our brand new number in the list don't forget to add the peer dependencies to our hook it depends on the value and the set function or sorry the get function and add some new styles to the form okay now check our form here you can see it's working it sends the value but our server is down so it's not working yet okay we would like to get all the numbers initially when the component is loaded so use the use effect hook and call to get all numbers inside it is the component in mount and please import the use effect hook from the react package too we should do a little refactor because the data is coming from the database so we should get it from the data that data that draws and from each row we need to get the number so it will be a an array of numbers okay now our application is ready to dockerize so create a new file docker file that dev in your client folder okay our image will be derived from the node version 14.14.0 alpha inside docker work directory will be slash app we copy the package.json from our root folder to the slash app folder in the docker container and we call npm install after that we copy everything else from our root folder to the containers working directory and call npm runs start command okay now we can test our docker file so called docker build f dockerfile.dev and i give a tag styler slash multi-client to it okay it's built so now i can test it i can run docker run it i i will expose the inside port 3000 to outside 4002 and i use my tag to run my container so here you can see my front-end application started and i can open it in my browser on the port 4002. okay now we are going to create our server's development docker file it's very similar to our clients development docker file but we will call npm run dev here and because we will start it only with nodemon and now now you can build your server docker image too my is stylerhoon multiserver don't forget to add the point the dot after your command and please use your own repository name check it in your docker hub okay it's working now i can open my server so everything is working as expected okay now we are going to create a docker compass file to be able to run our server and client and nginx and everything together in our local development environment so here we will use the postgres image2 you can check it on docker hub so here we define our postgres service the images posga we are using the latest tag here and we set up this environment variable postgrad password postgres password and the next service will be our server i call it api and we tell it that we are using our docker file from the server the directory we set up the volumes the first row we can tell that we don't want the app slash node modules to be the part of our volume and we would like to link the server directory in our main folder to the slash app folder inside docker here we will define our environment variables so pg user password port and host so they will be passed to the object we defined in our keys dot js file in server directory now set up our client we can now define our client service it's very similar to the server section now we are going to create some configurations for the nginx so create a new folder nginx in your main directory and create a configuration file named defaultdefault.conf file here here we define our client and server app streams an upstream module is used to define group of servers that can be referenced by the proxy pass we will use it later on you know our client has port 3000 and our server has port 5000 now create our main config this nginx will listen on port 80 so for the slash location it should redirect to our client server so we use a proxy pass http client this client is the name of the service configured in our docker compass file for the client to make the web sockets connection able to connect to dev server we should define the sock js node path here and in case of the slash api slash anything path we should redirect our requests to the node.js backend so we define the slash api location and write a little regexp to handle this situation these requests so in case of the slash api slash anything we should redirect to the parameter one which is the anything section of our regex to the slash dollar one so the first perimeter path and break we use proxypast http api because we we have given the name api for our server for our node.js server so that's all over here here is a little mistake here we should add a slash okay now it's great okay now create our dockerfile.dev here in the nginx folder 2 we are going to using the nginx image so right from nginx and we will copy our default.conf file to the right directory where nginx store it its default.com file you can check it in the page of nginx on the docker hub so here we can find nginx here and you can find here the information that where nginx stores its conf file configuration file so yes our path is correct okay now create our nginx service in the docker compose file it depends on the api and the client because it uses them so it should restart always it should use the docker file from the next folder and we should create port mapping we will map the port from inside 80 to the outside 3050 the restart policy is always because you know nginx is the first thing which processes our requests and redirects to the right server to the react server or the node.js server so if everything goes wrong we should restart it immediately okay now our docker compass file is ready to test so we can call in the main directory docker compose app double dash build command okay for now it's successfully started and you can see here my application is working it stores the numbers in the database so if i refresh my my numbers are here and i can open it in localhost 3050. i can check the requests here they are working okay now we are going to create our production docker files so create a docker file in your client directory here we will use the nginx for one more purpose to host our builded react application so in production you know we build our react application and we would like to host the application with nginx so create a new default.com file here you can see the configuration about it here so we listen on the port 3000 and here we set up our location slash you know we would like to serve our index.html file which is created by the builder when we build react application okay i copy everything from development docker file to the production.car file and and now we are going to extend it from with some with some nginx configuration so we are using from nginx we expose the port 3000 and here we change the command to npm run build because after we install the dependencies we build react project we copy the nginx configuration file to the right place in the docker container to the docker container so here we setup it so nginx will use our configuration and now we give a name for node builder and from the builders slash app slash build folder we copy everything to the right place of nginx to be able to run our build react code by nginx okay now we can test our docker file so i call docker build and i use the same tag as before but i override my previous docker image i use the 3000 for port for the outside you can see here my front-end application is running now so it's working okay now it's an important thing to push your builded image to the docker hub to be able to using kubernetes later in my next video so call the core push and give your image name and you can see here i have successfully pushed my image to the docker hub if i refresh the list here i can find my multi-client now here you can find here's some information about this you can check it here in the docker hub okay now go to the server folder and we are going to create our production version of our docker file for the server i just replaced the command npm run dev to npm run start and i call docker build i give it to the tag styler hoon slash multi server as before i overwrite it and i test it with docker run command i expose the board to [Music] 4002 if i open the local s4 2002 in my browser you can see it's working so i push it to the docker hub and here you can see i push it to the docker hub it's ready so if i refresh the list you can find the multi server here with my client okay that's all for now today our multi-container application is ready to use now you can find the final source code under my video in the next tutorial we will deploy our solution on kubernetes so stay with me it will be very exciting we will use ingress nginx controller as a load balancer thank you very much again don't forget to subscribe to my youtube channel you will find many interesting content on it in the future as well have a nice day bye

Channel: Codeching

Views: 3,795

Rating: 4.9642859 out of 5

Keywords: React, Docker, Dockerize, Dockerize React application, React Docker, Front-end docker, Docker compose, React docker compose, React shell script, React shellscript docker, Docker shell script, Linux Docker container, React environment variable, Docker environment variable, NodeJS, Express, morgan, Nginx, Proxy, fullstack, multicontainer, docker-compose, docker yaml, dockerfile, Dockerfile yml, Docker yml, Kubernetes, Ingress Nginx controller, Ingress, postgres

Id: -pTel5FojAQ

Length: 32min 3sec (1923 seconds)

Published: Sun May 16 2021