React Monorepo / Smart Monorepo / Inferred Tasks

Inferred Tasks

Nx identifies available tasks for your project from tooling configuration files, package.json scripts and the targets defined in project.json. To view the tasks that Nx has detected, look in the Nx Console project detail view or run:

nx show project react-store

If you expand the build task, you can see that it was created by the @nx/vite plugin by analyzing your vite.config.ts file. Notice the outputs are defined as {projectRoot}/dist. This value is being read from the build.outDir defined in your vite.config.ts file. Let’s change that value in your vite.config.ts file:

6 collapsed lines
/// <reference types='vitest' />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';

export default defineConfig({
16 collapsed lines
  root: __dirname,
  cacheDir: '../../node_modules/.vite/apps/react-store',
  server: {
    port: 4200,
    host: 'localhost',
    watch: null,
  },
  preview: {
    port: 4300,
    host: 'localhost',
  },
  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
  // Uncomment this if you are using workers.
  // worker: {
  //  plugins: [ nxViteTsPaths() ],
  // },
  build: {
    outDir: './build',
5 collapsed lines
    emptyOutDir: true,
    reportCompressedSize: true,
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
11 collapsed lines
  test: {
    watch: false,
    globals: true,
    environment: 'jsdom',
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    reporters: ['default'],
    coverage: {
      reportsDirectory: '../../coverage/apps/react-store',
      provider: 'v8',
    },
  },
});

Now if you close and reopen the project details view, the outputs for the build target will say {projectRoot}/build. This feature ensures that Nx will always cache the correct files.

You can also override the settings for inferred tasks by modifying the targetDefaults in nx.json or setting a value in your package.json file. Nx will merge the values from the inferred tasks with the values you define in targetDefaults and in your specific project’s configuration.

Set the outDir back to ./dist so that we don’t have to modify all the other tools to account for a different build output folder.

export default defineConfig({
  // ...
  build: {
    outDir: './dist',
    // ...
  },
});

Run Tasks

Add an Application

Files

Preparing Environment

Stubbing git
Installing dependencies