CS 394 Template NX Repo

✨ This is an empty Nx workspace for your tribe to populate ✨.

Learn more about this workspace setup and its capabilities or run npx nx graph to visually explore what was created. Now, let's get you up to speed!

Contents

This workspace does not contain any applications or libraries. It is a blank slate for you to build upon. It does have the template documents for helping describe the work process of your tribe and teams. All of them in are in the docs folder. You can add your own documents to this folder as well. The Home document is the main page for your tribe. You can add links to other documents in this folder to help describe your work process.

Getting started

I recommend using degit to make a copy of this repository. This will create a new directory with the contents of this repository without taking its git history. Run the following command to create a new directory with the contents of this repository:

npx degit https://github.com/toddwseattle/cs394-nx-template-2025.git <your-project-name>

Then, navigate to the new directory:

cd <your-project-name>

To get started, run the following command to install the dependencies:

npm install

and initialize the git repository:

git init

applications can be add using

npx nx g @nx/react:app <application name>

or libraries can be added using

npx nx g @nx/react:lib <library name>

The monorepo provides a way to share code between applications and libraries. You can add shared code to the libs folder. This is a great way to share code between applications and libraries. As you develop servers to go along with your react frontend, you can add them to the apps folder as well. This is a great way to keep your code organized and easy to maintain. You can share libraries between front end apps and backend apps as well; assuming they don't have conflicting dependencies. This is a great way to keep your code organized and easy to maintain.

Run the development server

Run tasks

To run the dev server for your app, use:

npx nx serve <application name>

To create a production bundle:

npx nx build <application name>

To see all available targets to run for a project, run:

npx nx show project <application name>

These targets are either inferred automatically or defined in the project.json or package.json files.

More about running tasks in the nx docs »

Add new projects

While you could add new projects to your workspace manually, you might want to leverage Nx plugins and their code generation feature.

Use the plugin's generator to create new projects.

To generate a new application, use:

npx nx g @nx/react:app demo

To generate a new library, use:

npx nx g @nx/react:lib my-lib

You can use npx nx list to get a list of installed plugins. Then, run npx nx list <plugin-name> to learn about more specific capabilities of a particular plugin. Alternatively, install Nx Console to browse plugins and generators in your IDE.

There are also plugins to help with things like firebase. For example, firebase functions has a plugin that can be used to help with creating and deploying functions. You can find a useful plugin here.

Learn more about Nx plugins » | Browse the plugin registry »

Set up CI!

NX makes it easy to setup continuous integration (CI) for your workspace. It provides a command to connect to Nx Cloud, which is a cloud-based service that provides caching and distributed task execution. This can significantly speed up your CI pipeline.

Step 1

To connect to Nx Cloud, run the following command:

npx nx connect

Connecting to Nx Cloud ensures a fast and scalable CI pipeline. It includes features such as:

• Remote caching
• Task distribution across multiple machines
• Automated e2e test splitting
• Task flakiness detection and rerunning

Step 2

Use the following command to configure a CI workflow for your workspace:

npx nx g ci-workflow

Learn more about Nx on CI

Install Nx Console

Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.

Install Nx Console »

Useful links

Learn more:

• Learn more about this workspace setup
• Learn about Nx on CI
• Releasing Packages with Nx release
• What are Nx plugins?

And join the Nx community:

• Discord
• Follow us on X or LinkedIn
• Our Youtube channel
• Our blog

Files in this project

Here are the key files in the root directory of this workspace:

• .editorconfig - Defines coding styles across different editors and IDEs
• .gitignore - Specifies which files Git should ignore
• .prettierignore - Lists files to be ignored by Prettier formatting
• .prettierrc - Configuration for Prettier code formatting
• eslintrc.config.mjs - Configuration for ESLint, a tool for identifying and fixing problems in JavaScript code
• README.md - This file, containing project documentation
• nx.json - Configuration for Nx workspace
• package-lock.json - Lock file for npm dependencies
• package.json - Project metadata and dependencies
• tsconfig.base.json - Base TypeScript configuration shared across the workspace
• tsconfig.json - TypeScript configuration for the root project
• vitest.workspace.ts - Configuration for Vitest, a testing framework