Skip to main content

Scale React Development with Nx

1h 34m 10s
English
Paid

Starting a new project might seem straightforward, involving creating directories, installing dependencies, and writing code. However, there's much more to consider beyond these basic steps.

Understanding Project Complexity

The nature of the project you're working on significantly impacts your decisions. This complexity increases when dealing with multiple, related projects. For instance, you might operate a customer-facing frontend app, an admin dashboard app, and a shared backend.

Project Challenges

How does this affect your directory structures? How can you efficiently share code between projects? And what happens when you introduce a Design System?

Managing these aspects can be challenging.

Nx: A Solution for Project Complexity

Nx is a powerful tool designed to address these challenges, whether you're developing solo on a small full-stack application or as part of a large development team.

Beyond Folder Structures

Nx provides more than just an opinionated folder structure. It sets up unit and e2e testing environments, prepares bundling and code-splitting with Webpack, and includes stubs for common features like routing.

Dependency Graph Feature

One of Nx's standout features is the Dependency Graph. This tool visually maps the relationships within your application and ensures that compiling, testing, and linting are performed only on affected areas of your project.

Course Overview with Juri Strumpflohner

In this course, Juri Strumpflohner explores these features and more through the development of a React + Storybook + Express app. Even if these aren't your preferred technologies, rest assured; Nx supports the most popular frameworks and libraries, emphasizing workflow over specific implementations.

Embark on Juri's course to determine if the Nx tooling and workflow fit your team and project needs!

About the Author: egghead

egghead thumbnail
The egghead.io project presents a huge selection of courses and screencasts for developers of all levels and professions.

Watch Online 24 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 24 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Create a new empty Nx Workspace
All Course Lessons (24)
#Lesson TitleDurationAccess
1
Create a new empty Nx Workspace Demo
03:37
2
Generate a new React app with Nx
04:52
3
Generate new Projects for Nx with Nx Console
02:11
4
Running a React App in the Browser with Nx
04:15
5
Install and use external npm packages in an Nx Workspace
03:26
6
Add Styling to a React app inside an Nx workspace
03:22
7
Configure Assets for my React app in an Nx Workspace
02:07
8
Create a Shared React Library in an Nx Workspace
04:20
9
Generate a TypeScript library in an Nx Workspace
03:45
10
Use the Nx Dependency Graph to Visualize your Monorepo Structure
03:14
11
Create React Feature Libraries in an Nx Workspace
05:58
12
Create an Express Backend API in an Nx Workspace
04:31
13
Use Run Commands to launch the API and App of an Nx Workspace
03:51
14
Connect to an Express.js API from a React app in an Nx Workspace
03:09
15
Share and Reuse functionality with libraries in Nx
04:12
16
Share code between a React Frontend and Node.js Backend Application in Nx
04:06
17
Use Storybook to Develop React Components in Nx
05:37
18
Use Cypress and Storybook to test your React Components in Isolation
04:04
19
Run Jest tests for a React app with Nx
03:47
20
Building your React app with Nx
02:19
21
Linting a React app with Nx
01:43
22
Scale CI runs with Nx Affected Commands
04:52
23
Speed up with Nx computation Caching
04:32
24
Update your Nx workspace with Nx migrations
06:20
Unlock unlimited learning

Get instant access to all 23 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription