👋 Welcome to the repository for the workshop Practical React with TypeScript!
Tip
A branch will be created for the specific course named courses/[date]. The date is the month the course started in e.g.: courses/202412. This branch will contain the entire commit history for the course as well as the slide deck.
In this course we will be working with a Pnpm Workspace and Nx managed monorepo. This setup requires a few things to be installed on your machine in order to work properly. The code and project should work fine on Windows, Linux or Mac, but please install the following before the course begins.
Important
Please install and verify all prerequisites before the first day of the course.
| Checklist | Prerequisite |
|---|---|
| ✅ | Git |
| ✅ | Node.js latest LTS version |
| ✅ | Pnpm package manager |
| ✅ | Visual Studio Code |
Git is our version-control system for all source code we write. You do not need to know how to use Git as we will go through the basics during the course.
How to install Git depends on the Operating System you use. Follow the instructions on the Git Download page.
Once it is installed you can verify that everything is working by opening a terminal and typing git --version. You should see something similar to this (version number may differ):
git --version
git version 2.48.1.windows.1Node.js is our primary runtime for tooling, testing and extensions and is required to work with the project. We will use the latest Long-Term Support version of NodeJs as it is the most stable and supported version available.
How to install Node depends on the Operating System you use. Follow the instructions on the nodejs.org page.
Once it is installed you can verify that everything is working by opening a terminal and typing node --version. You should see something similar to this (version number may differ):
node --version
v22.14.0Node comes with a package manager called npm, but this course will be using an optimized package manager called Pnpm. From the outside they are very similar and most commands will be familiar to you if you've used npm before. We will go through all the commands you need during the course.
How to install Node depends on the Operating System you use. Follow the instructions on the Pnpm page. It is recommended that you use Corepack to install Pnpm as it will automatically use the appropriate tool for the workspace. Corepack can be installed using a few simple commands:
npm install --global corepack@latest
corepack enable pnpmOnce it is installed you can verify that everything is working by opening a terminal and typing pnpm --version. You should see something similar to this (version number may differ):
pnpm --version
10.8.1Our primary IDE will be VS Code (Visual Studio Code) with several extensions and customized settings. You are free to choose any IDE you want, but it is highly recommended that you pick one which integrates well with Nx. Plugins for the IDE are not strictly required, but it makes working with the project and with nx commands much easier.
To work with the code we need to clone the repository to our machine. We will do this at the start of the course, but you can also do this in advance if you want to get a small head start 🚀. To clone the repository open a terminal in the folder where you wish to store it and run this command:
git clone https://github.com/rudfoss/practical-react.gitOnce you have cloned the repository navigate the terminal to the root folder and run the first-time script to install dependencies and verify:
cd practical-react # Change this to the folder name you chose to clone into
pnpm run first-time # Install dependencies and verify that tools are installedIf everything worked you can test the application by running this command and opening your browser to http://localhost:4200 and http://localhost:4000.
pnpm exec nx run-many -t serveYou should see "Hello world" in one tab and a Swagger UI in another. To stop the commands focus in the terminal and type Ctrl+C.