Through this process, we take our code from working state to working state, accumulating working code and minimizing the build up of bugs. This is a birds-eye view of the ongoing process of development. This might sound like a lot of windows to have open (I mostly use a desktop computer with three screens), but it’s incredibly useful to be able to edit code across your stack and see the results almost instantly without having to manually restart or synchronize anything.īelow, Figure 2 shows the coding cycle unraveled over multiple iterations.

Another terminal (or maybe two!) running automated testsĪs soon as I change any code, I can watch as live reload kicks in across my multiple terminals and browser windows.

One terminal for a particular microservice on which I’m focusing.

One terminal running a microservices application (under Docker Compose).

Often, as a full-stack developer, I take this to the extreme. This automation delivers the fastest feedback possible. (If I’m working on a frontend, I’ll have it open in a web browser.)Īs I edit my code and save the file, the application (backend or frontend) automatically reloads to pick up the latest code changes - each tiny code change triggers a reload. I also have a terminal open - let’s say it’s running my backend with live reload. I have my IDE open (I use VS Code), and I’m editing the code for my application. If you haven’t used live reload before, let me paint a picture for you. Figure 1: Where live reload lives in the coding cycle Setting up for live reload Note the part of the diagram that says “This part can be automated” - this is where live reload fits.

It’s quite typical for developers to use live reload when creating a webpage, but we can also apply this technique across our whole stack.įigure 1, below, shows where live reload fits in our coding cycle. Enabling this saves you countless manual and tedious restarts. It enables our app to automatically and simultaneously pick up code changes while we are coding. Live reload is an automated approach to restarting our application during development. The topics in this post increase in difficulty as you move through it, and we’ll go back and forth between backend and frontend experiences as well. Live reload of TypeScript code in a Docker container.Live reload of JavaScript code in a Docker container.Live reload in the frontend with webpack.Live reload in the frontend with Parcel.Automated testing for TypeScript apps using Jest in watch mode.Automated JavaScript testing with Jest in watch mode.Live reload with nodemon and TypeScript.Implementing live reload with Node.js and nodemon.Scaling live reload for improved performance.

To make it easy, here’s a list of what we’ll cover: Please don’t feel the need to read this entire blog post, you only need to read about the particular technologies that interest you. Wise use of these techniques will help you become a faster developer. In this blog post, we will examine a variety of full-stack techniques for live reload to automate the “run it” part of your development pipeline. We can create a faster and more seamless workflow by having our application automatically reload, what we call live reload, during development. Is your code reliable? Well, that is something you must test for yourself - and for that, you must run your code frequently to check its output and behavior. But how can you tell if your code is valuable? Only you (or your company) can decide that. The code we produce should also be valuable and reliable. Getting feedback quickly - i.e., while you are coding - is also a fundamental part of maintaining a rapid pace of development. A complete guide to full-stack live reloadĪs developers, writing code quickly isn’t our only concern. He is VP of Engineering at Hone and currently writing Rapid Fullstack Development and the second edition of Bootstrapping Microservices.įollow on Twitter for updates. Ashley Davis Follow Ashley Davis is a software craftsman and author.

Livereload chrome setup