Docker workflow for React/Web applications

I have been fiddling with React lately. Built my website on it. I did not face a huge problem while deploying as this is a static site. But, generally we face problems in deployment. It runs on our local, but doesn’t run in production. Common problem, right?

If you know Docker, then you might be wondering, why doesn’t he come straight to the point!

Yes, using Docker, we have the same environment while development and production. Even testing, if you choose to do it.

Using docker for production is easy. We just have to

in the Dockerfile from the current working directory to copy our code to the docker container. This gets all our code in the container and we can run commands in it. All we have to do it is run the container and expose the port on which the server is running. We now can take this container and scale these up from performance if needed.

But, if we want to dockerize even our development workflow, its a bit different.

We have to use the concept of mounting volumes to the container. We mount the current working directory to a directory in the container while starting it by adding

-v /host/directory:/container/directory

to the `docker run` command. Any changes in the host directory will be reflected in the container as well. So this can be used for development.

So the mixed workflow can consist of two dockerfiles, one for development and one for production. And while running it for development we have to mount the directory to it.

By using this workflow, we can guarantee that the development and production have the same environments.

Keep on Hacking!