Nx Convex Example

Introduction

This is an Nx workspace that uses Convex as a sync platform to communicate with two different applications. The application web is an example of a customer chat support application. The admin application is for support engineers to respond to different threads from customers.

These apps use fingerprinting to quickly identify users without needing authentication. This way, you can open separate tabs for each app to test the functionality. Convex makes it easy to sync data between apps and users. Sending a message from a customer quickly appears in the thread for the admin and vice versa. The comment count in the threads sidebar for admins also automatically ticks up for each message added.

First-time run

To run this example, you'll need to create a Convex account. This is free, easy and based on your GitHub login.

To get started, run the following command to setup the convex project for the first time:

npx nx dev convex

This will take you through the steps of logging in, creating an account if you don't already have one, and setting up a Convex project. When prompted, answer the setup questions like so:

? What would you like to configure? create a new project
? Project name: nx-convex-example

Serving apps

The following tasks need to be run as separate processes to serve the Convex service and the two apps: web and admin:

npx nx serve web
npx nx serve admin
npx nx dev convex

Alternatively, you can run all of these tasks with a workspace-level task:

npx nx serve-demo workspace

Or you can run the Convex service with a single app using the serve-with-backend task:

npx nx serve-with-backend web

# or

npx nx serve-with-backend admin

How to add Convex to your own Nx workspace

Adding Convex to your existing workspace is easy!

1. Install Convex: npm add convex
2. Generate a JS library: npx nx g @nx/js convex --name convex --directory libs/convex
3. In the project.json file, add a target for convex dev:

"targets": {
    "dev": {
      "command": "convex dev"
    }
  }

4. Add a convex.json file to the root of your workspace that points to the convex project:

{
  "functions": "libs/convex/src/lib/"
}

5. Visit Convex to learn more about integrating with your favorite language or framework

Useful links

Learn more about Nx:

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

Learn more about Convex:

• Learn more about Convex
• Learn about how Convex integrates with your application

And join the Nx community:

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