Setting up apache with Docker for frontend development.
Tags: php, docker, apache
Published: 2021-12-14 08:52:32

In this part, we are going to be setting up a plain Docker container(just HTML).

To get started, the first thing we want to do is install Docker.  You can do this by downloading it from the [Docker website.
](https://www.docker.com/get-started)

To get started we will create an empty directory by typing `mkdir <project-name>` and then `cd` into that directory.

Once we have cd' into our new directory, we will create a new Docker file by typing `touch Dockerfile` into the terminal.  Once the file is created you can open it with your favorite editor and paste the following [code](https://carbon.now.sh/?bg=rgba%2826%2C50%2C75%2C1%29&t=night-owl&wt=none&l=dockerfile&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=FROM%2520ubuntu%253A18.04%250AMAINTAINER%2520Faithful%2520%253Cfaithful%2540infused.io%253E%250ARUN%2520apt-get%2520update%2520%2526%2526%2520apt-get%2520install%2520-y%2520apache2%2520%2526%2526%2520apt-get%2520clean%2520%2526%2526%2520rm%2520-rf%2520%252Fvar%252Flib%252Fapt%252Flists%252F*%250AENV%2520APACHE_RUN_USER%2520%2520www-data%250AENV%2520APACHE_RUN_GROUP%2520www-data%250AENV%2520APACHE_LOG_DIR%2520%2520%2520%252Fvar%252Flog%252Fapache2%250AENV%2520APACHE_PID_FILE%2520%2520%252Fvar%252Frun%252Fapache2%252Fapache2.pid%250AENV%2520APACHE_RUN_DIR%2520%2520%2520%252Fvar%252Frun%252Fapache2%250AENV%2520APACHE_LOCK_DIR%2520%2520%252Fvar%252Flock%252Fapache2%250AENV%2520APACHE_LOG_DIR%2520%2520%2520%252Fvar%252Flog%252Fapache2%250ARUN%2520mkdir%2520-p%2520%2524APACHE_RUN_DIR%250ARUN%2520mkdir%2520-p%2520%2524APACHE_LOCK_DIR%250ARUN%2520mkdir%2520-p%2520%2524APACHE_LOG_DIR%250ACOPY%2520index.html%2520%252Fvar%252Fwww%252Fhtml%250AEXPOSE%252080%250ACMD%2520%255B%2522%252Fusr%252Fsbin%252Fapache2%2522%252C%2520%2522-D%2522%252C%2520%2522FOREGROUND%2522%255D) inside of it. 

![image](https://www.therelicans.com/remoteimages/uploads/articles/ppjgckpsnervivu7ut54.png)

Once you have done this, we need to run `touch index.html` and then copy/paste the following [code](https://carbon.now.sh/?bg=rgba%2826%2C50%2C75%2C1%29&t=night-owl&wt=none&l=htmlmixed&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%253C%21DOCTYPE%2520html%253E%250A%253Chtml%2520lang%253D%2522en%2522%253E%250A%253Chead%253E%250A%2520%2520%2520%2520%253Cmeta%2520charset%253D%2522UTF-8%2522%253E%250A%2520%2520%2520%2520%253Ctitle%253EFirst%2520APP%253C%252Ftitle%253E%250A%253C%252Fhead%253E%250A%253Cbody%253E%250A%2520%2520%2520%2520%253Ch1%253EHello%2520from%2520Docker%21%253C%252Fh1%253E%250A%253C%252Fbody%253E%250A%253C%252Fhtml%253E) into our newly created html file.
![image](https://www.therelicans.com/remoteimages/uploads/articles/2hqmkwp1jels89pldeie.png)
 
  
Now that we have configured a basic Dockerfile, we need to build the image by typing `docker build -t <project-name> .` into the terminal afterwards you should see your new image in the output.

Once the command has finished, we should now have a new image. You can double check this by typing `docker images` into the terminal.

Now to run our new image we need to type the following: `docker run -d -p 80:80 <project name>`. You will know that the image has been built successfully when it return a unique identifier.

Congratulations! 🥳
You have successfully created a Docker container with just an HTML file!!  From here you can add your own libraries. 

To visit the newly created UI, go to `http://localhost/index.html`