---
# System prepended metadata

title: Build Frontend Image

---

Hello, here are the documentation to build frontend Docker image using Dockerfile.

**1. Preparing source code**
we use frontend source code using vue.js with the followed link below
[https://github.com/adaptivenetworklab/AN-OPEN-NETRA-FE.git](https://github.com/adaptivenetworklab/AN-OPEN-NETRA-FE.git)

**2. Create Dockerfile**
create Dockerfile that contain base image and several command to modify the image and inserted the frontend source code
```
FROM node:latest

RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app

WORKDIR /home/node/app

COPY package*.json ./

USER node

RUN npm install --force

COPY --chown=node:node . .

EXPOSE 8080

CMD [ "npm", "run", "serve" ]
```
![image](https://hackmd.io/_uploads/BJybrnFu6.png)

**3. Build image**
after the Dockerfile is ready, now build the Dockerfile using the command below:
```
$ docker build -t openetra/fe .
```

the command will build the image with image output tag or name is openetra/fe and we should specify the location of Dockerfile that is .

**4. Run image**
when the image from Dockerfile is ready, we can use the image to run the container with the command below:
```
$ docker run -it --name fe -p 8088:8080 openetra/fe
```
the above command will running a container in background with name fe and map the 8080 port of container to 8088 in host. also we define the openetra/fe image in last command.