Node.js Microservice with Hot Reloading
It’s easy for frontend developers to feel left behind in the transition towards microservices, containers and Kubernetes. Frontend development tools, like TypeScript, hot reloading and chrome devtools are fantastic first-in-class experiences. However these tools are often broken or hard to setup in a microservices development environment. Many frontend developers choose to develop outside of a container as a result.
Tilt enables you to do frontend development with microservices development in a consistent, shareable and fast way. Let’s demonstrate this by walking through how to set up a standalone Tiltfile for a frontend service.
Note: before diving in to this guide you should brush up on Tilt’s Getting Started Guide, namely the tutorial. This guide also assumes that you already have a Docker image that runs your frontend service, and a set of Kubernetes objects that deploys that service.
The Node Service
This Tiltfile is going to start out looking like any other. We’re first going to grab the YAML that defines the Kubernetes service.
Next we tell Tilt about how to build the Docker image. We also use
live_update to provide the lightning-fast reload times that frontend developers expect.
docker_build('tilt-frontend-demo', '.', live_update=[ # Map the local source code into the container under /src sync('.', '/src'), ])
This is fast, but has a bug: when you change
package.json, the dependencies don’t get updated. Let’s use the fall back feature of Live Update to fix that:
docker_build('tilt-frontend-demo', '.', live_update=[ # when package.json changes, we need to do a full build fall_back_on(['package.json', 'package-lock.json']), # Map the local source code into the container under /src sync('.', '/src'), ] )
Now we’re cruising! Updates that don’t require a
npm install zoom by in less than a second.
- The full example Tiltfile featured in this guide
- Faster Development with Live Update (Tutorial)
- Demo Vue.js app with Tilt