Getting Started with Docker: Building and Publishing a React App

Get ready to unleash the wizardry of containers with Docker! In this tutorial, we’ll take you on a wild ride through the mystical world of building and publishing a simple React login form app. Buckle up, grab your magic wand (okay, maybe just your terminal), and let’s get started!

Before we start, let’s make sure that you have Docker installed on your machine. If you don’t have Docker installed, follow these steps to get it up and running:

1. Go to the Docker website (https://www.docker.com/) and click on the “Get Docker” button.
2. Choose your operating system (Windows, Mac, or Linux) and follow the instructions to download and install Docker.
3. Once the installation is complete, open a terminal or command prompt and type docker version to verify that Docker has been installed correctly.

And that’s it! You’re now ready to start using Docker and creating containers for your applications.

1. Create a React App: If you already have a React app, you can skip this step. Otherwise, create a simple React app with a login form.
2. Create a Dockerfile: A Dockerfile is a script that contains instructions for building a Docker image. It specifies the base image, sets environment variables, copies files, and runs commands. Create a Dockerfile in the root directory of your React app using a text editor.

The contents of the Dockerfile should be as follows:

# Use the node:lts-alpine image as the base image
FROM node:lts-alpine

# Set the NODE_ENV environment variable to "production"
ENV NODE_ENV=production

# Set the working directory
WORKDIR /usr/src/app

# Copy the package.json, package-lock.json, and npm-shrinkwrap.json files to the working directory
COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]

# Install the dependencies
RUN npm install --production --silent && mv node_modules ../

# Copy the remaining files to the working directory
COPY . .

# Expose port 3000
EXPOSE 3000

# Set the owner of the files to the "node" user
RUN chown -R node /usr/src/app

# Run the commands as the "node" user
USER node

# The default command to run when the container starts
CMD ["npm", "start"]

The above Dockerfile sets up the environment and configuration for your React app.

It starts with the node:lts-alpine base image, sets the NODE_ENV environment variable to “production”, sets the working directory, and copies the required files to the working directory.

It then runs the npm install command to install the dependencies, exposes port 3000, sets the owner of the files to the “node” user, and sets the default command to “npm start”.

Build the Docker Image: To build the Docker image, run the following command in the terminal, in the root directory of your React app:

docker build -t react-app .

The “.” at the end of the command specifies the current directory as the build context, where the Dockerfile is located. The “-t” option allows you to specify a name and a tag for the image. In this case, we are naming the image “react-app”.

Run the Docker Container: Once the Docker image is built, you can run a container from the image using the following command:

docker run -p 3000:3000 react-app

The “-p” option maps the host port 3000 to the container port 3000. This means that you will be able to access the React app on http://localhost:3000.

Publishing the Image to Docker Hub

Finally, we can publish the image to Docker Hub so that others can easily run it. First, we need to tag the image with a name that includes the Docker Hub username and repository name:

docker tag react-app <docker-hub-username>/<repository-name>:<tag>

Replace <docker-hub-username>, <repository-name>, and <tag> with the appropriate values.

Next, we can push the image to Docker Hub with the following command:

docker push <docker-hub-username>/<repository-name>:<tag>

And that’s it! You now have a working Docker container for your React app, and you can easily share it with others.

Bonus:

If you encounter an error like:

failed to solve with frontend dockerfile.v0: failed to create LLB definition: rpc error: code = Unknown desc = error getting credentials

you can fix it by running the following two commands:

export DOCKER_BUILDKIT=0
export COMPOSE_DOCKER_CLI_BUILD=0

Conclusion:

Docker is like a magic suitcase that can make your applications run like a charm, no matter where you go. By using a Dockerfile as your spellbook, you can cast a spell and create an enchanted image that will run smoothly anywhere, without having to worry about any dark forces (like setting up the environment) getting in the way. The steps we took in this article were like a wizard's journey, where we created a simple React application, brewed a Docker image, summoned a container, and finally, published the image to Docker Hub for all to use. So grab your wand, and start your Docker journey today!

Remember, “Successful people do what unsuccessful people are not willing to do. Don’t wish it were easier, wish you were better.”

Thank you for taking the time to read this tutorial, and we hope it was helpful in getting you started with Docker. Keep coding and never stop learning!