20+ Yarn Resources for Web Developers in 2021

Yarn 2 (Berry) has finally [released a stable version](https://dev.to/arcanis/introducing-yarn-2-4eh1)! 

The yarn team has been working on this release for over 2 years. 

This collection goes over: 

- What yarn pnp is and how it tries to solve the `node_modules` problem
- How to install yarn globally and locally inside of a single project
- How to use `yarn dlx`
- How to use `yarn up` to manage yarn workspace dependencies



Fast, reliable, and secure dependency management.

yarn

Yarn 2 AKA Berry

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Yarn workspaces are a great way to set up a project for theme development because they support housing multiple packages in a single parent directory and link them together.

This video will teach you:

- How to use the Gatsby theme workspace starter to quickly set up a workspace to build a new Gatsby theme.

## Further reading

- [Setting up Yarn Workspaces for Theme Development](https://www.gatsbyjs.org/blog/2019-05-22-setting-up-yarn-workspaces-for-theme-development/)
- [Building Themes](https://www.gatsbyjs.org/docs/themes/building-themes) guide.

Use the Gatsby Theme Workspace Starter to Begin Building a New Theme

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

The fastest way to create a robust, cross-platform compatible Node.js CLI (optionally typed with TypeScript) is by running `npx oclif single mycli`. Here we explain what this means and how and why to integrate this with Yarn Workspaces for an ideal developer experience.

Create a Single-Command Node.js CLI with Oclif, TypeScript and Yarn Workspaces

This lesson goes over how to install yarn 2 through npm.

To install yarn 2 globally, we use `npm install -g yarn@berry`. 

To install yarn 2 to a specific project, we use `yarn policies set-version berry`. This creates a `.yarnrc` file and a `.yarn/` directory. `.yarnrc` that sets the path to our yarn instance in the created `.yarn/` directory that holds our new yarn version.

Install Yarn 2

`yarn dlx` can be used to run packages without installing them. This is useful for packages like `create-react-app` and `gatsby` that scaffold out apps for you, so you don't have to keep updating your global versions.



Use Yarn dlx to Execute Packages without Installing Them

Yarn 2 is workspace aware. When you need to upgrade a package in one workspace, yarn will ask you if you want to resolve the version of the package to a version you use in a different package.

In this lesson, we go over `yarn up -i` to upgrade a package with an old version.

Use yarn up to Update Dependencies In A Yarn Workspace

Yarn PnP is a new feature set on **by default** with yarn 2. PnP gets rid of your projects `node_modules` in favor of a `.pnp.js` file.

This `.pnp.js` file maps all of the packages installed in your project to where Yarn has placed them on your disk. This enables faster, more reliable installs because you don't have to write to disk as often.

WTF is Yarn Plug'n'Play (PnP)?

Bringing full-stack to the JAMstack

Do you love the JAMstack philosophy but need a database-backed web app? Want great developer experience and easy scaling? Redwood is here! Built on React, GraphQL, and Prisma, Redwood works with the components and development workflow you love, but with simple conventions and helpers to make your experience even better.

redwoodjs

In this lesson, we are going over how to generate a `RedwoodJS` project.

We can create a `RedwoodJS` project with `yarn create redwood-app ./my-redwood-project`.

`yarn` will generate the `RedwoodJS` app in the file folder you specified without installing any globals.

To run the `RedwoodJS` app, we use `yarn redwood dev`. This runs the Redwood client as well as the `GraphQL` backend.

Generate a Redwood Project

Yarn is a new JavaScript package manager that aims to be speedy, deterministic, and secure. See how easy it is to drop yarn in where you were using npm before, and get faster, more reliable installs.

Yarn: A JavaScript Package Manager

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

In this lesson we’ll bootstrap and React application using Yarn and Create React App through the `yarn create` command.

Bootstrap a React Application with Yarn & Create React App

In this lesson we'll use yarn and yarn workspaces to create a monorepo that includes a web creat-react-app, a react-native app, and shared code. We'll use `react-app-rewired` and `react-app-rewire-babel-loader` to rewire the create-react-app configuration to allow babel to process the shared code from workspace. We'll also use `crna-make-symlinks-for-yarn-workspaces` and `metro-bundler-config-yarn-workspaces` to configure the react-native app to be able to find the shared code in the workspaces.

Topics

Instructors

Content Type