In today's fast-paced development environment, speed and efficiency are crucial for a successful software development process. A monorepo is a popular strategy for organizing and managing codebases, especially in large-scale projects. It offers several advantages, such as simplified dependency management, code sharing, and collaboration.
However, as the size of your frontend monorepo grows, build times can become a bottleneck, slowing down your development process and negatively impacting developer productivity. In this blog post, we'll explore how to speed up both your local and continuous integration (CI) builds using Turborepo and Turbocache . Not only will these techniques lead to faster development cycles but will also reduce your CI costs.
Getting started with Turborepo Turborepo is a high-performance build system specifically designed for monorepos, optimizing and parallelizing tasks while leveraging caching. Let's dive into how to set up Turborepo for your project.
If you have already set-up Turborepo, you can skip to the next section.
To get started with Turborepo, you need to install it as a global dependency:
Once Turborepo is installed, add a root turbo.json to your monorepo with your desired tasks. This configuration sets up a pipeline with three tasks: build, test, and lint. You may reference the configuration options on the Turbo docs to fit your monorepo.
{
"$schema": "https://turbo.build/schema.json",
"pipeline": {
"build": {
"outputs": [".next/**", "!.next/cache/**"],
"dependsOn": ["^build"]
},
"test": {
"dependsOn": ["build"]
},
"lint": {}
}
}
You can confirm your setup by running:
Speeding up your CI builds with Turbocache Turbocache is a remote caching service that can significantly speed up your CI builds. It is designed to work with Turborepo and can be used with any CI provider, although this blog post will focus on GitHub Actions. Along with caching, Turbocache also provides a dashboard to monitor your builds as well as analytics to help you optimize your builds for better cacheability.
To get started, you need to create an account at turbocache.build . Once you create an account, you will need to create an API token. Store this API token in your repository's secrets as TURBO_TOKEN.
Update your Github Action workflow to use Turbocache. Your updated workflow should look similar to this:
name: CI
env:
# Turborepo
TURBO_API: "https://cache.turbocache.build"
TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
TURBO_TEAM: "meticulous_ci" # you may change this to your team name
TURBO_RUN_SUMMARY: true
jobs:
# ...
build:
# ...
steps:
- uses: turbocache-build/turbocache-action@v1
- uses: actions/checkout@v3
# ...
- run: npm install
- run: npx turbo lint build test
For up-to-date instructions, please refer to the Turbocache documentation .
--
In this blog post, we've explored how to speed up your frontend monorepo builds using Turborepo and Turbocache . By implementing these tools, you can optimize your local and CI builds, leading to faster development cycles and reduced CI costs. Don't let slow build times hold you back!
Meticulous Meticulous is a tool for software engineers to catch visual regressions in web applications without writing or maintaining UI tests.
Inject the Meticulous snippet onto production or staging and dev environments. This snippet records user sessions by collecting clickstream and network data. When you post a pull request, Meticulous selects a subset of recorded sessions which are relevant and simulates these against the frontend of your application. Meticulous takes screenshots at key points and detects any visual differences. It posts those diffs in a comment for you to inspect in a few seconds. Meticulous automatically updates the baseline images after you merge your PR. This eliminates the setup and maintenance burden of UI testing.
Meticulous isolates the frontend code by mocking out all network calls, using the previously recorded network responses. This means Meticulous never causes side effects and you don’t need a staging environment.
Learn more here .
