Why you should be using Docker containers for your React/Angular apps

Have you used docker yet to build your applications? I would highly recommend that you take the time to use it. It really is an excellent product and will streamline your development pipeline.

Working with my own company Insignia Health since 2011 we have been developing applications for a long time for various companies of different sizes, using various flavours of front end tools in that time. ASP, ASP.NET MVC, angularjs, knockout, javascript, reactjs etc. One of the biggest challenges for any developer is having a local development environment that emulates the production environment as close a possible.

This helps development for many reasons

• Its reduces the time to identify errors.
• Debugging is much simpler.
• You identify problems before they even get into production which improves customer satisfaction.
• Testing can be conducted without impacting live servers.
• The software inside the containers is exactly the same as that of the production containers, controlled by the layering approach of docker.

?

Many companies today that I have worked with still deploy applications onto servers that are uniquely different to the ones they operate in production. For example, a recent client of ours worked with IIS on there main production servers and used IIS express as a local environment. The difference in the two environments was vast. The settings and configuration are so different that when bugs occur, you cannot simply eliminate the possibilities of environment changes causing the issues. This can be program installations on the local vs production machines, same software but different versions, configuration differences and so much more.

Instead you can spend hours or days trying to get an environment locally that emulates the production one. This brings massive costs to the development teams and the business as a whole.

You can reduce this impact though, using Docker as a local development and testing environment.

Here at Insignia Health we deploy our applications using a standard approach.

• We plan each feature using Azure Dev Ops sprint planning.
• We build and deploy each feature for our applications in a local tested environment that runs directly in the browser. These use the standard react/angular cli tools for hot reloads.
• We then run bash scripts that take that code and deploy it locally into a locally running docker container that runs on a Kubernetes local cluster.
• We run E2E tests on the local environment as part of our git process prior to checkins.
• When we are happy with the feature we then produce a PR for that feature branch and commit any changes to the feature branch.
• Providing the feature changes are approved as part of the PR that PR is committed to our development branch.
• That check in will then automatically spin up our development pipelines and produce docker containers, that are automatically deployed into our development kubernetes cluster.
• Within a few minutes we are then able to see that feature go live and allow development and testing to view the changes.

We use standard git flow process to automate and control deployment from development into testing and production pipelines. I have left those process details out here for brevity.

?

Advantages that docker brings!

Docker brings a massive advantage to the table that other deployments do not:

• The container that is deployed is a copy of the one you have locally
• The software used is the same as that in all environments and all versions
• Deployment is easily automated and pushed into fully scalable kubernetes clusters that can grow with user demand easily.
• Bugs can be identified easier as the environments are much closer in similarity.
• Failover and scalability can provide better redundancy for the overall application.

There are some obvious environment differences in production to development and testing ones, however as these are much smaller, the ability to track things down is much easier for the teams, and its easier to do in isolation without impacting live server (in most cases).

?

Example Docker File

This is an example docker file we have used in one of our projects. To newbies it may look a little complicated, but in the main, it really is boiler plate code. Although a little cumbersome you can get a container up and running in less that a few hours.

This file takes the local created react application and builds it in a two stage process using npm build scripts. The output of the first is used and added to the second layer. All temporary files are removed as a result, keeping the outputs for the server much smaller in the final container.

We use nginx for our main server deployment, this allows a better isolation of our infrastructure from the outside world and we can configure https tunnels to terminate there.

?

Conclusion

Although this is not a detailed article about using docker itself, I wanted to give an overview of why we use it and the advantages it brings to development teams. You should seriously consider using docker, if you are not already doing so as it really does improve the development life cycle.

?

References

• For docker installation and information on setting up a docker container with kubernetes cluster see https://docs.docker.com/get-started/overview/
• For kubernetes based setups and configuration see https://kubernetes.io/
• For azure devops visit https://azure.microsoft.com/en-gb/products/devops

?

About Me

I am Matthew Parton, I am a Front end web specialist working with React/Angular, I have been developing web applications for well over 30 years and all its the flavours. I now build cloud enabled front end applications for web and mobile, fully deployed into Kubernetes environments running on linux based docker containers in AWS or Azure.

If you want some help with your application or your teams then feel free to contact me using [email protected] or calling me directly on 07854131382.