Mike North
Stripe
JavaScript and TypeScript Monorepos
3 hours, 46 minutes CC
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
CloseCourse Details
Published: November 18, 2020
Learning Paths
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
Table of Contents
Introduction
Section Duration: 16 minutes
Mike North defines monorepos as many related packages that are all located within the same git repository, explains that the main project of the course will be to build a Slack application, and gives an overview of the different topics covered in this course.
Mike gives a tour of the course repository, explains that the source code for this course is the base application code, and that the course focuses more on configuring projects, and setting up build scripts.
Composite TypeScript Project
Section Duration: 43 minutes
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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
Mike demonstrates how to add a Husky configuration that ensures that commits are in alignment with a specific convention the developer is trying to set up. How to use Husky to add additional git hooks is also discussed in this segment. Husky is a package that prevents bad commits in a given repository.
Mike demonstrates how to use the Husky package to check that commits follow a specific convention, and demonstrates how to write valid commit messages.
Mike demonstrates how to use Lerna to bump the version of packages changed since the last release of a monorepository, and walks the students through the changelog generated by Lerna.
Mike answers questions about the commitlint conventions, about the various layers of configurations within commitlint, and demonstrates a situation when a commitlint flag commits that do not fall within the configuration standards.
Mike introduces Verdaccio, a local npm proxy, explains that it allows developers to track internal package changes and publish internal package changes easily without having to keep track of each individual dependency version.
Dependencies
Section Duration: 30 minutes
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.
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.
Mike demonstrates how to add a start script to an application using bash, and how to use Lerna to make starting an application easier.
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
Mike explains that the more sophisticated an application gets, the more a developer needs to write proper documentation and demonstrates how to setup the API extractor. It is best practice to have a copy of the api-extractor.json in each package of a monorepo.
Mike creates an api-report script, walks students through the various API reports that concisely summarize the API signatures, and demonstrates how to build API docs for each important package within a monorepo.
Mike answers questions about how a large team would contribute to a monorepo, and implement high quality bug fixes within a monorepo. Best practices that a team should apply when working on a monorepo are also discussed in this segment.
Mike finishes the course by adding API documentor, and demonstrates how to debug the API documentation.
Mike pushes the API documentation code, visualizes the API documentation in GitHub, and explains that the API documenter package allows developers to write documentation in HTML instead of Markdown only.
Wrapping Up
Section Duration: 12 minutes
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
__anku__
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops