JavaScript and TypeScript Monorepos

3 hours, 46 minutes CC
JavaScript and TypeScript Monorepos

Course Description

A monorepo is a git repository that contains more than one project. This powerful idea has taken the JavaScript world by storm, as it unlocks powerful new patterns around composition, encapsulation, and ease of maintenance. You'll get hands-on experience with best-in-class tools designed to keep the workflows for even complex projects simple!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: November 18, 2020

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 16 minutes

Composite TypeScript Project

Section Duration: 43 minutes
  • Composite TypeScript Project
    Mike demonstrates how to set up a basic tsconfig file, sets up a composite project by updating the ts.config file, and explains that the tsconfig.tsbuildinfo is a file that tracks information about the various builds within an application.
  • Cleaning Output & rimraf
    Mike creates another tsconfig file that builds the necessary tools for various packages, and explains that when working with multiple projects in monorepoes each one refers to the other through a dist folder. Installing utilities outside of the packages folder for development purposes only is also discussed in this segment. The purpose of building configurations in different folders is to avoid the use of complex libraries.
  • Volta Executable Version Q&A
    Mike answers questions about Volta and TypeScript versions varying from one working directory to another, and explains that even if there is a global TypeScript version, each working directory can have its own TypeScript version. Volta is a tool that manages JavaScript command-line tools, such as Node, npm, and Yarn. It uploads the correct version for each working directory to avoid bugs, and development or building related issues.
  • Adding Tests with Jest & Babel
    Mike adds testing to the monorepos using Jest, builds a Babel configuration in the packages folder to ensure one source of truth for the configuration, and copies the configuration to both the types and utils folder. Jest allows developers to have one unique solution that solves issues for all packages. In this segment, a Yarn script is defined for the purpose of running the Yarn test command within any package of the workspace.
  • Yarn 2 and Dependencies Q&A
    Mike explains that Volta allows developers to install a specific version of Yarn and Node even if other versions of Node and Yarn are used outside of the monorepository, covers the main differences between Yarn 1 and Yarn 2, and explains the main differences between having Jest as a workspace dependency vs. a package dependency.

Linting & Centralizing Builds

Section Duration: 45 minutes
  • Linting & ESLint Setup
    Mike explains that linting files, such as eslintrc, are expected to be in the workspace root by editors like VS Code, therefore ESlint is a workplace version dependency. A lint task is added to each package in the workspace to provide the same linting rules across packages.
  • Lerna Config & Versioning
    Mike introduces Lerna, a library that provides tooling to manage multi-repository structure inside a single repository by separating out subsets of the repository into their own “sub” repositories, and demonstrates where to add the Lerna config file within a workspace.
  • Lerna Commands
    Mike explains that Lerna gives developers the ability to run tests concurrently, and reviews the most useful Lerna commands, namely Lerna link, bootstrap, and run.
  • Lerna Q&A
    Mike answers questions about having local dependencies vs. having workspace root dependencies within a monorepo, the right version to use for a specific package within the workspace, and whether or not to use the Bolt library, a library that resembles Lerna.
  • Scripty
    Mike explains that it is best practice when building a monorepo to link, test, and build each repository the same way, in other words, to centralize the build script, and explains how and when to use scripty. Scripty is a CLI tool that allows developers to extract npm scripts into their own files without changing the command used to run them.
  • Scripty Monorepo Configuration
    Mike demonstrates how to configure scripty to create a workspace folder script and a folder where packages can find scripts, and modifies the package.json configurations so that tests, linting and building within a monorepo all use scripty. This methodology reduces the amount of shell scripts that need to be kept up to date.

Conventional Commits & CommitLint

Section Duration: 35 minutes

Dependencies

Section Duration: 30 minutes
  • Internal Dependencies
    Mike demonstrates how to use Lerna so that the UI and folders both dependent on types and utils by creating a local version of both the types and utils packages, and makes data dependent on UI since in a given application the UI makes requests to the data layer.
  • Ensuring that Dependencies Work
    Mike demonstrates how to test that each new dependency functions the correct way, and explains how to modify the amount of concurrent tasks so that the data, types, UI, and utils packages run at the same time. It is important to know that although developers can allow multiple packages to run at the same time, Lerna runs packages by layers, meaning it runs the packages upon which other packages depend first.
  • Adding a Scoped Start Script
    Mike demonstrates how to add a start script to an application using bash, and how to use Lerna to make starting an application easier.
  • Watch Output
    Mike demonstrates how to implement a watch script that reports changes and errors made within an application during development. This allows developers to easily track errors before pushing code.

Documentation

Section Duration: 43 minutes

Wrapping Up

Section Duration: 12 minutes
  • Wrapping Up
    Mike wraps up the course by answering questions about Lerna, versioned documentation, and Yarn vs. npm, and then by giving a short overview of what was taught in the course and finally thanking the audience.
So many useful tools and tips there to manage monorepos.
Ankit Tiwari

Ankit Tiwari

__anku__

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now