Fun with Docker

I'm starting a new project for work soon. Instead of developing from the ground up, we'll be using an existing open-source solution and customizing it to suit the project's need. I figured this is going to be more devops and less coding as we'll mostly be doing modifications on the existing code and decided to play around with Docker since I don't have much experience writing Dockerfiles or docker-compose files.

I took one of my side projects I created with a node.js backend and react frontend and decided to "dockerize" it. I decided to start with the front-end for now since the backend requires Redis.

# Use the official image as a parent image

FROM node:lts-alpine

# Set the working directory.

WORKDIR "/adventure-capitalist"

#Copy the file from host to current location

COPY package.json .

# Run the command inside your iamge filesyste.

RUN npm install

# copy the rest of app's source code from host to image files

COPY . .

# Add the metadata to the image to describe which port the container is listening to 

EXPOSE 3000

# RUN cd /adventure-capitalist/src/backend/data && node app.js

# Run the specified command within the container.

CMD [ "npm", "start" ]

After writing this file, I built it using docker build --tag adventure-capitalist:1.0 .

Docker builds the image and after building it, I run it in a container using: docker run -p 8000:3000 --name ac adventure-capitalist:1.0 

This should do it right? I'll go to localhost:8000 and should see my front-end right? NOPE I logged the container with the command docker logs ac, and didn't see any issues. Decided to ask @manekenpix for a second pair of eyes + google "dockerizing a react app" and found out why it wasn't working . I needed to add the -it flag otherwise it won't work:

So the full command I had to use was: docker run -it -p 8000:3000 --name ac adventure-capitalist:1.0

References:

https://mherman.org/blog/dockerizing-a-react-app/