DEV Community

hek5118
hek5118

Posted on

Working with Docker

Introduction to Docker

Docker is a powerful tool because it allows you to separate different services into "containers". A container is a standard unit of software that packages up code and its corresponding dependencies in order to make the application more speedy and efficient. If you'd like to learn more about containerization, this is a great resource.

Basically, Docker allows you to break up your projects into smaller services, which acts like a microcomputer. This is helpful because if one part of a project were to shut down, the entire thing wouldn't be ruined. You can also modify one service without needing to worry about the dependencies and effects on other services. Another great site to look for more information regarding Docker can be found here.

Beginner work with Docker

To begin, I would recommend playing around with this tutorial tool to get a feel for docker. For example, after playing around a bit on that site, I was able to then create my own instance here that looked like this:

Image description

NewsAPI Activity Setup

Once you are comfortable with Docker thus far, you can create a new instance and type git clone followed by the link to your GitHub repository, and then immediately change directory into it.

Then, run this command cp dot.env.example dot.env so that you are starting in a fresh environment.

Next, you will want to click on the "EDITOR" button, which I have circled in red here:

Image description

After clicking Editor, you need to expand news-api-workshop and select dot.env. Here you'll see that the values aren't existing yet. You will need to go to newsapi.org, login, and generate an API key. Once you have done that, you can go back to dot.env and paste it in where the Xs are here: NEWS_SERVICE_API_KEY=XXXXXXXXXXXXX.

Next, you will click on the "OPEN PORT" button that I have circled here:

Image description

When it asks what port to open, you will enter "4000". The page will give you an error, but this is okay! You just need to copy the URL of the page that opened up. Now you can go back to the dot.env file, and paste that URL in where it says NEWS_ENDPOINT= where the current URL is.

NewsAPI Activity- Time to run!

Congratulations! You have done the hard work so far. Now we can finally run this command to run the application: docker-compose up. Once you run that, your screen should look like this:

Image description

Note the 80 and 4000. The 80 denotes the front-end it is running on, whereas the 4000 denotes the back-end. If you try to click on the 80, you should get something like this:

Image description

Try it with your own project from GitHub!

Finally, let's try it with a project of our own. Follow the same general steps of cloning your repo into an instance on Docker. Then, enter run Dockerfile. Then, you can select Editor, which should open up to something like this, keeping in mind my project name is ip-project:

Image description

You can copy and paste the text on the right side of that image into the Dockerfile. Here is the text:

# syntax=docker/dockerfile:1
FROM node:12-alpine
RUN apk add --no-cache python2 g++ make
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "src/index.js"]
Enter fullscreen mode Exit fullscreen mode

Then you should enter these commands:
First: Run docker build -t getting-started .
Second: docker run -dp 4000:4000 getting-started

Lastly, if you head to this URL http://localhost:4000/ you should see your application! Mine did not work perfectly but hopefully you are a more talented programmer than I am :)

Top comments (0)