Introduction

Challenges in managing a large number of repositories

Overcoming Challenges with Multiple Repositories - A Deep Dive into Package Management and Workspaces

We will discuss what monorepos are and the essential criteria for monorepo implementation

What are monorepos?

An introduction to PNPM and its benefits.

Understanding and Utilizing PNPM - An efficient package manager for Node.js

We are going to set up a monorepo folder structure with PNPM workspaces.

Setting Up a Monorepo Folder Structure with PNPM Workspaces

Create our first application inside the PNPM workspace.

Creating Your First React App in a PNPM Worskpace

Getting Started

We are going create a shared library using React and TypeScript.

Building and Using Shared Repositories in React with PNPM

We are going import a ccomponent from a shared library into our main app.

Utilizing a Shared UI Library in a React Application with TypeScript and PNPM

Shared Repositories

An intro to Nx and the features it provides the developers

Harnessing the Power of Nx in Software Development

How to add Nx to the workspace and running Nx commands

Getting Started with NX in your Workspace: An Installation Guide

Mastering Project Management with Nx: Using Nx commands

An intro to Nx graph to identify dependencies

Understanding Dependency Graphs with Nx

An Insight into NX Caching: Improving Build Times and Developer Productivity

Configure caching strategies based on your project's requirements

Leveraging Nx Caching in Software Development

Caching

Make sure dependencies are built first before running an application using dependsOn field.

Managing Dependencies and Optimizing Workspaces with NX's Task Pipeline

Use advanced optimizations beyond caching for growing applications and packages within your monorepo.

Optimizing Nx Workspaces with the 'Affected' Command

Nx Task Pipeline Features and Workspace Optimization

Gain a solid understanding of what Nx plugins are, how they work, and why they are a crucial component of the Nx ecosystem.

Maximize Efficiency with NX Plugins: A Comprehensive Guide

How to use the generators to scaffold new projects

Creating Custom Generators for Project Scaffolding with Nx

Creating custom plugins and scaffolding new packages with generators

Conclusion

We have created a course on how to build monorepos using Nx which is a powerful build system that provides tools and techniques for enhancing developer productivity, optimizing CI performance, and maintaining code quality. 
Monorepos are an excellent way to reduce the complexity of mutiple codebases, reuse code and increase productivity, but most software engineers working on enterprise solutions find it confusing where to even start.

In this course we cover how to install and configure Nx to speed up development by reducing complexity by improving code organization via code sharing between different projects, ways to optimize builds with local and remote cache, increase test coverage locally and how to configure CI alogn with the tooling via its plugins.

It's taught by Sean Amarasinghe who is a Lead Engineer who has been working with Nx and PNPM integrating it into multiple monorepos.

Predictably Collaborate on and Automate Complex Apps at Scale

In this course we learn how to structure a monorepo with PNPM workspaces, install Nx and use its tooling to optimise CI performance and maintain code quality

The Art of Enterprise Monorepos with Nx and pnpm

How to structure a monorepo with PNPM workspaces, install Nx and use its tooling to optimize CI performance and maintain code quality.

Importance of managing multiple projects, libraries, and applications within a single, centralized repository to enhance productivity and code maintainability. 

By utilizing Nx, a powerful and extensible toolkit, you will learn to streamline the development workflow within monorepos.

Welcome to this informative guide on importing and using a shared User Interface (UI) library in a React application using TypeScript and PNPM. This guide expands on a previous lesson where a shared UI library was built using React and TypeScript, and prepared for importation into a frontend React application. In this guide, we will delve deeper into the practical application of this shared UI library in a real-world project. The process of importing the shared library into a frontend application, initializing the state, and implementing a button component will be covered.

To begin with, it's crucial to understand the function of a shared UI library. It is a centralized module of reusable components that can be imported and utilized in multiple projects, enhancing code reusability and efficiency. Importing this shared UI library into the 

 file in the dependency section. However, for this guide, the app will be installed using PNPM and the workspace command will be added. This informs PNPM that a package is being sought inside the monorepository.

pnpm add shared-ui --filter frontend --workspace

Now you should be able to see that the package has been added into our project. 

"dependencies" : {
  ...
  "shared-ui": "workspace:*",
  ...
}

---
title: Utilizing a Shared UI Library in a React Application with TypeScript and PNPM
description: We are going import a ccomponent from a shared library into our main app.
privateVideoUrl: https://stream.mux.com/Ieg5fSJC7KCGaACvE3d1QSpPJgOe3MouptMXX02sLzyE.m3u8
isPublicLesson: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/sean-amarasinghe-monorepos-for-enterprise-developers-app/-/tree/main/Course%20App/module_3
---

# Utilizing a Shared UI Library in a React Application with TypeScript and PNPM

## Introduction

Welcome to this informative guide on importing and using a shared User Interface (UI) library in a React application using TypeScript and PNPM. This guide expands on a previous lesson where a shared UI library was built using React and TypeScript, and prepared for importation into a frontend React application. In this guide, we will delve deeper into the practical application of this shared UI library in a real-world project. The process of importing the shared library into a frontend application, initializing the state, and implementing a button component will be covered.

![Import a shared component](https://d2uusema5elisf.cloudfront.net/courses/the-art-of-enterprise-monorepos-with-nx-and-pnpm/module_03/lesson_03.02/public/assets/shared-lib.png)

## Importing a Shared UI Library

To begin with, it's crucial to understand the function of a shared UI library. It is a centralized module of reusable components that can be imported and utilized in multiple projects, enhancing code reusability and efficiency. Importing this shared UI library into the `frontend` application requires adding it to the `package.json` file in the dependency section. However, for this guide, the app will be installed using PNPM and the workspace command will be added. This informs PNPM that a package is being sought inside the monorepository.

Sean Amarasinghe

Welcome to lesson 2. In the last lesson we learned how to build a shared UI

then have it ready to be imported into our frontend React application.

learn how to import a shared UI library. We could add the shared UI library

inside our frontend applications package.json file in the dependency section,

but instead what we're gonna do is we are gonna install that app using pmpm.

And then we add workspace command so that we are saying to pmpm that we are

looking for a package inside our monorepository.

Great! Now you could see the package has been added into our project and we can

and import this file. So first let's get rid of this boilerplate code.

We will use useState to initialize our initial state for the clicked event.

We will initialize it to false. Now let's implement the button component

and we will set it to unclicked. Now we can look at the clicked state and then

So we will use pmpm filter frontend start.

It seems the application is running successfully and the button renders as

click on the button it is placed the clicked event. In this lesson we learn how

component from another module to our main React application. In this module we

shared repositories by creating a shared library within NX and gain practical

collaborative development and efficient code reuse. In the next module we will

modularizing our application with local libraries.