In this post you’ll learn how to configure a development environment with live-reload enabled. This will allow you to convert a legacy application so it uses Docker, docker volumes, and docker-compose.
Some developers turn up their noses when talking about using Docker for their development environment. They say that Docker isn’t good for development because it always needs to rebuild the entire image to reflect all new modifications. This makes it unproductive and slow.
In this article, our goal is to tackle this mindset by demonstrating how simple configurations can result in many benefits such as a reliable environment over production and development environments.
By the end of this post you will have learned how to:
- Convert a legacy application to run within a Docker container;
- Enable dependency caching on Node.js modules;
- Enable live-reload by using docker volumes;
- Aggregate all services within docker-compose.
Requirements
In the next steps, you’ll clone an existing project to execute all examples in this article. Before starting to code make sure you have the following tools installed on your machine:
Introduction
More and more cutting-edge technologies are being released for the Internet all the time. They’re stable, and they’re fun to develop and release, but they’re not predictable when working over different environments. So developers created Docker to help reduce the chances of possible errors.
Docker is one of my favorite tools which I work every day on Desktop, Web and IoT apps. It has given me the power to not only move applications through different environments but also to keep my local environment as clean as possible.
For those developers working with cutting-edge technologies, they’re always working with something new. But what about our legacy applications? Should we just rewrite everything with new tech? I know this is not as simple as it seems. We should work on new stuff but also make improvements to existing applications.
Let’s say you have decided to move from Windows Servers to Unix servers. How would you do it? Do you know every dependency your app requires to work?
What should a development environment look like?
Developers have always tried to be more productive by adding plugins, boilerplates, and codebases on their editors/IDEs/terminals. The best environment in my opinion should be:
- Easy to run and test;
- Environment agnostic;
- Fast to evaluate modifications;
- Easy to replicate on any machine.
Following these principles, we’ll configure an application over the next sections of this article. Also, if you’ve never heard about live-reload (or hot reload), it is a feature that watches for changes in your code and restarts the server if needed. So you don’t need to go back and forth, restarting your app or even rebuilding the system.
Getting started
First, you’ll need to have an empty folder called post-docker-livereload which you’ll use as a workspace. Go to the Github repository and clone it on your post-docker-live-reload folder.
Secondly, let’s analyse what the application requires. If you take a look at the README.md file, there are a few instructions demonstrating how to run this app as shown in the image below:
It requires Node.js version 10 or higher and MongoDB. Instead of installing MongoDB on your local environment machine, you’ll install it using Docker. You’ll also expose it on localhost:27017 so applications that are not running through Docker can access it without knowing the internal Docker IP address.
Copy the command below and paste it in your terminal:
docker run --name mongodb -p 27017:27017 -d mongo:4
Using the command above, it’ll download and run the MongoDBinstance. Notice that if you already have an instance with this name it’ll throw an error about invalid name. If you see the error, run docker rm mongodb and it will remove any previous instance so you can run the docker run command again.
Digging into the application
The README.md file says that you need a MongoDB instance running before starting your app, along with Node.js. If you have Node.js installed, go to the nodejs-with-mongodb-api-example folder and run the following commands:
npm i
npm run build
npm start
After running these commands, you can go to a browser on http://localhost:3000 and see the application running as shown in the image below:
Keep in mind that the app already has a command to enable live reload which is npm run dev:watch. The pipeline should reflect the following steps:
- Developer changes Typescript files;
- Typescript transpiles files to Javascript;
- Server notices changes to Javascript and restarts the Node.js server.
So mirroring files to Docker containers will reflect all changes in the container. The npm run build:watch from the application will catch the changes and generate output files in the libfolder so the npm run dev:run will restart the server every time it has been triggered.
Dockerizing applications
If Docker is a completely new world to you, don’t be afraid! You will configure it from scratch. You’ll need to create a few files to start:
Dockerfile- a receipt file that lists how to install and run your app;.dockerignore- a file that lists what file(s) won’t go within the Docker container instance.
#docker #node #developer
