Dillon  Larson

Dillon Larson

1620394377

Monorepos: Yarn Workspaces and Lerna for Beginners!

Let’s discover how to handle monorepos with multiple packages using Yarn Workspaces and LernaJS.
We’re going to discuss Yarn Workspaces first to understand the concept and then move on to Lerna and we’re going to discover some of the main commands that I use in my projects.

Contents:

  • 00:00 Intro
  • 00:50 Brief comparison to NX
  • 02:12 Yarn Workspaces
  • 09:37 LernaJS

#yarn #workspaces

What is GEEK

Buddha Community

Monorepos: Yarn Workspaces and Lerna for Beginners!
Dillon  Larson

Dillon Larson

1620394377

Monorepos: Yarn Workspaces and Lerna for Beginners!

Let’s discover how to handle monorepos with multiple packages using Yarn Workspaces and LernaJS.
We’re going to discuss Yarn Workspaces first to understand the concept and then move on to Lerna and we’re going to discover some of the main commands that I use in my projects.

Contents:

  • 00:00 Intro
  • 00:50 Brief comparison to NX
  • 02:12 Yarn Workspaces
  • 09:37 LernaJS

#yarn #workspaces

Lawrence  Lesch

Lawrence Lesch

1636875840

Set Up Lerna with Yarn Workspaces

This article goes over how to set up a Lerna monorepo with Yarn workspaces.

Lerna

Create a new Lerna monorepo with lerna init:

$ npx lerna init

#lerna #workspace #javascript 

Independent Subscribable Modules (Monorepo Setup) with Lerna

Hi Everyone,

I’m Shivang and recently I had a chance to experiment with a rather unique setup that allows developers to publish individual modules as subscribable packages from a single repository.

This is a good fit for publishing a component library with each component as a separate package so as to not pollute the dependency list for someone who imports this library in their project.

For e.g. Let’s say a user wants to import just a button component and not the entire UI library, the library should allow the user to add @mylibrary/button in their package.json and provide a button component.

The most reliable approach to solve the problem is using a Monorepo

What are MonoRepos? Why use them?

Splitting up large codebases into separate independently versioned packages is extremely useful for code sharing. However, making changes across many repositories brings its own set of challenges in terms of maintenance and actively updating things, and testing across repositories becomes complicated very quickly.

To solve these problems, projects can organize their codebases into multi-package repositories. Projects like  Babel,  React,  Angular,  Ember,  Meteor,  Jest, and many others develop all of their packages within a single repository.

A  MonoRepo (not a monolith) is a single repository to hold all your code and each module that needs to be published lives as a separate directory in this repository.

MonoRepos are a rising trend and are vastly used by the likes of Google and Facebook.

Doesn’t that add to a lot of complexity in workflows?

You are correct, it does add complexity in terms of managing the releases and managing dependencies for the project.

One solution that stood out to simplify workflows is using Lerna.

Wondering what is Lerna?

Lerna_ is a tool that helps us optimize workflows for a MonoRepo with Github and NPM. Not only does it allow us to handle publishing all the packages in a very simple manner but also it helps us to manage the dependencies in an efficient manner_

#javascript #monorepo #lerna #npm

Roberta  Ward

Roberta Ward

1593061105

Tutorial: Nx-style monorepo workspace with Angular CLI: Part 2

In Part 1 of this tutorial, we set up the booking desktop application project, a project for its end-to-end test suite, and the booking feature shell workspace library.

In this part, we’ll set up our custom generate project tool to automate the steps we did manually in Part 1. We’ll use it to create the shared and booking data acess libraries with NgRx Store, NgRx Effects, NgRx Schematics, and NgRx Store DevTools.

To configure the data access libraries while keeping the flow of dependencies correct, we’ll extract a shared environments library. Data access will be hooked up to the booking feature shell library.

#angular #angular-cli #angular-workspace #monorepo #nx #series-angular-architectural-patterns #ngrx

Roberta  Ward

Roberta Ward

1595333359

Tutorial: Nx-style monorepo workspace with Angular CLI: Part 5

In the final part of this tutorial, we create the seatmap data access, seat listing feature, shared buttons UI, and shared formatting utilities library. Finally, we compare our approach with the full Nx toolchain.

This tutorial is part of the Angular Architectural Patterns series.

In Part 4 of this tutorial, we used our generate project tool to create the check-in data access library, the check-in feature shell library, the check-in desktop application, and the mobile check-in application. We hooked everything up and reviewed how much was automated by our tool.

In this part of the tutorial, we’re going to create the seatmap data access library with NgRx feature state. We then created the seat listing feature library and hooked it up to all applications with routing. Finally, we created the shared buttons UI library and the shared formatting utilities library which we used in the seat listing component.

THIS AD MAKES CONTENT FREE. HIDE

Seatmap data access library#

The shared seatmap feature has its own data access library. This is where we would add data services and application state management specific to the seatmap domain.

npm run generate-project -- library data-access --scope=seatmap --grouping-folder=shared/seatmap --npm-scope=nrwl-airlines --with-state
# or
yarn generate-project library data-access --scope=seatmap --grouping-folder=shared/seatmap --npm-scope=nrwl-airlines --with-state
<>

Generate the seatmap data access library.

For now, we’ll put the feature store and effects in place by using the --with-stateparameter of the generate project tool. Note that we use the nested grouping folder shared/seatmap.

// seatmap-data-access.module.ts
import { NgModule } from '@angular/core';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';

import { SeatmapEffects } from './+state/seatmap.effects';
import * as fromSeatmap from './+state/seatmap.reducer';

@NgModule({
  imports: [
    StoreModule.forFeature(fromSeatmap.seatmapFeatureKey, fromSeatmap.reducer),
    EffectsModule.forFeature([SeatmapEffects]),
  ],
})
export class SeatmapDataAccessModule {}
<>

The seatmap data access module.

The seatmap data access Angular module gives us an overview of what’s configured in the seatmap data access library. This is a good starting point.

ng run seatmap-data-access:lint

ng run seatmap-data-access:test --watch=false
<>

Lint and test the seatmap data access library.

Everything looks ready to go!

Seat listing feature library#

It’s time to add the first feature of the seatmap domain which is used in both the check-in and booking applications.

npm run generate-project -- library feature feature-seat-listing --scope=seatmap --grouping-folder=shared/seatmap --npm-scope=nrwl-airlines
# or
yarn generate-project library feature feature-seat-listing --scope=seatmap --grouping-folder=shared/seatmap --npm-scope=nrwl-airlines
<>

Generate the seatmap seat listing feature library.

Our tool generates an Angular module and a component for us.

To add this feature to our applications, we add a route to each feature shell module.

// check-in-feature-shell.module.ts
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CheckInDataAccessModule } from '@nrwl-airlines/check-in/data-access';
import { SharedDataAccessModule } from '@nrwl-airlines/shared/data-access';

import { ShellComponent } from './shell/shell.component';

const routes: Routes = [
  {
    path: '',
    component: ShellComponent,
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'seatmap', // 👈
      },
      {
        path: 'seatmap', // 👈
        loadChildren: () =>
          import('@nrwl-airlines/seatmap/feature-seat-listing')
            .then(esModule => esModule.SeatmapFeatureSeatListingModule),
      },
    ],
  },
];

@NgModule({
  declarations: [ShellComponent],
  exports: [RouterModule],
  imports: [
    RouterModule.forRoot(routes),
    SharedDataAccessModule,
    CheckInDataAccessModule,
    CommonModule,
  ],
})
export class CheckInFeatureShellModule {}

#angular #angular-cli #angular-workspace #monorepo #nx #series-angular-architectural-patterns #ngrx