# Day 23 : Mastering React-Django Application Deployment with Jenkins, Docker, and Docker Compose: A Comprehensive Tutorial

Today we will run our first free style React-django Application.Let's start.

Before starting this project you should have installed jenkins in your system. You should also have installed docker and docker-compose. If you don't then please visit my earlier blog to install it.

Step 1) Create a Job from dashboard of jenkins. Enter the name of it and choose the freestyle project.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684388571762/764a1b2f-e02d-4197-b585-53d3ac6be977.png align="center")

Step 2) Give a Description of it and choose github project from below list.

for this project we will use this url : [https://github.com/patelajay745/react\_django\_demo\_app](https://github.com/patelajay745/react_django_demo_app)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684388674647/f061ff88-6db0-4cfc-86f6-5a4ce3763aa9.png align="center")

Step 3) Again you need to choose Source Code Management from further options and need to provide the same link for the project.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684388811601/fa333079-dd31-41ed-874e-3fecdebbe6f4.png align="center")

you have to choose your branch for the repository.For this project we have main branch.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684388903987/f906849f-ce3d-4c39-bdc1-fe8488452bfd.png align="center")

Step 4) Further, you will need to choose Build Step. We will choose a shell script to provide the command to build and run docker file. So choose **<mark>Execute shell.</mark>**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684388967645/fc17679d-61dd-4763-bc60-1d659a02cace.png align="center")

Step 5) Now we will provide the following docker command in Execute shell.

```bash
docker build . -t react-django-app
docker run -d -p 8001:8001 react-django-app
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684389090507/45945ce4-6bbb-45e4-97db-65af8ce72172.png align="center")

And Save it.

To run this pipeline. You need to click on <mark>Build Now</mark> from left panel.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684389201250/2255b821-9753-4db3-a3f1-536c4e61692e.png align="center")

Check your console output to see what is going on while executing pipeline.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684389282273/1de2b98b-f7d0-42de-8b44-96a487935b6d.png align="center")

If you see <mark>SUCCESS</mark> at the end of your consol output then congratulation you have build your first FreeStyle project pipeline.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684389349055/4d6ddab6-4c68-4bfc-8186-7d02f6dfb65b.png align="center")

then add your port to inbound rule to allow incoming taffic to your ip. In this project it was 8001 Port. And here you go . you will see your application running by visiting <mark>http://your-IP:8001</mark>

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684389454902/cb8f9229-458e-4d4a-91d4-237d4f39a447.png align="center")

Now we will try to build and run docker file using docker-compose.

For that, You just need to edit Execute Shell.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684389660139/cf358bb4-5f33-4221-a449-38ae44606d89.png align="center")

Here we are using docker-compose down before docker-compose up because if it is already running then it will now allow to use port again and will give error.

If you have any question/suggestion please comment below. See you in Next Challenge.