This is a demo for adding Nx on a React-TS-Vite project, forked from the React-Typescript-Vite Stackblitz starter project.
Steps that I followed to set up Nx on this project:
npx nx init- to add Nxnpx nx g ci-workflow- to generate a new GitHub workflow file- Make a change - create a PR - see the action on GitHub and Nx Cloud
Make a change to your project, create a PR, and Nx will only run tasks for the projects that were affected by your change.
-
I added a new project project within this existing project:
a. I ran
npm create viteb. I let npm and Nx know using
workspaces -
I made a change to the new project and I created a PR
-
Nx only ran the tasks associated with the new project.
A good opportunity to explore the project graph.
- I imported the new project in the existing project (see: src/App.tsx).
- I ran
nx graphto see the relationship between the two projects (existing project depends on new project) - I made a change to the new project and I created a PR.
- Now, Nx ran the tasks associated with both the new and the existing projects.
See the tasks running on Nx Cloud. Observe how the tasks are distributed on different agents (machines) so that they can run in parallel.
- GitHub repo
- Example run on Nx Cloud
- Example Nx GitHub action logs
- Nx Agents
- Nx.dev
- Nx.app
- Nx on X
- Katerina on X
- Katerina on the web
@mandarini - @psybercity - katerina skroumpelou