Add a Svelte Project

The code for this example is available on GitHub:

Example repository/nrwl/nx-recipes/tree/main/svelte

Supported Features

Because we are not using a Nx plugin for Svelte, there are a few items we'll have to configure manually. We'll have to configure our own build system. There are no pre-created Svelte-specific code generators. And we'll have to take care of updating any framework dependencies as needed.

✅ Run Tasks ✅ Cache Task Results ✅ Share Your Cache ✅ Explore the Graph ✅ Distribute Task Execution ✅ Integrate with Editors ✅ Automate Updating Nx ✅ Enforce Module Boundaries 🚫 Use Task Executors 🚫 Use Code Generators 🚫 Automate Updating Framework Dependencies

Setup workspace

Create a new Nx workspace

❯

npx create-nx-workspace@latest acme --preset=ts-standalone --nx-cloud=true

Add @nx/vite, svelte, and other dependencies to your workspace

Keep Nx Package Versions In Sync

Make sure to install the @nx/vite and @nx/js versions that matches the version of nx in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can fix Nx version mismatches with this recipe.

❯

npm install --save-dev @nx/vite @nx/js vitest vite svelte svelte-check @sveltejs/vite-plugin-svelte

Nx 15 and lower use @nrwl/ instead of @nx/

Create the application

Create your index.html at the root with the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Acme</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>

Navigate to src/index.ts and change it to src/main.ts and add the following content:

import App from './App.svelte';

const app = new App({
  target: document.getElementById('app'),
});

export default app;

Create a new file src/App.svelte and add the following content:

src/App.svelte
<script lang="ts">
  let count: number = 0;
  const increment = () => {
    count += 1;
  };
</script>

<button on:click={increment}>
  count is {count}
</button>

Since we have a .svelte file, we'll need to tell typescript how to handle it. Create a new file src/svelte-shims.d.ts and add the following content:

src/svelte-shims.d.ts
declare module '*.svelte' {
  import type { ComponentType } from 'svelte';
  const component: ComponentType;
  export default component;
}

Alternatively, you could also extend the tsconfig.json file to use tsconfig/svelte.

tsconfig.json
{
  "extends": "@tsconfig/svelte/tsconfig.json"
  //... other configs
}

See more here: Svelte TypeScript

Configure Nx to build and serve the application

Navigate to vite.config.ts add svelte to your plugins.

// Add this to your imports
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [
    //... other plugins
    svelte(), // Add this line
  ],
  //...
  server: {
    port: 4200,
    host: 'localhost',
  },
});

Change your tsconfig.lib.json to tsconfig.app.json. It should look like this:

/tsconfig.app.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "declaration": true,
    "types": ["node"]
  },
  "include": ["src/**/*.ts", "src/**/*.svelte"],
  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
}

Navigate to project.json and update it with the following content:

/project.json
{
  "targets": {
    "build": {
      "executor": "@nx/vite:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/acme"
      },
      "configurations": {
        "development": {
          "mode": "development"
        },
        "production": {
          "mode": "production"
        }
      }
    },
    "serve": {
      "executor": "@nx/vite:dev-server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "acme:build"
      },
      "configurations": {
        "development": {
          "buildTarget": "acme:build:development",
          "hmr": true
        },
        "production": {
          "buildTarget": "acme:build:production",
          "hmr": false
        }
      }
    }
  }
}
Nx 15 and lower use @nrwl/ instead of @nx/

We also need to add a svelte.config.js file to the project root with the following content:

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

export default {
  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
  // for more information about preprocessors
  preprocess: vitePreprocess(),
};

Update your package.json to include:

/package.json
{
  "type": "module"
}

Why use the type: module?

We need to add "type": "module" to our package.json file because we are using ESM only packages. See more here: ESM Package

Test it out

Build the application

❯

nx build acme

Your build artifacts should be in dist/acme

Serve the application

❯

nx serve acme

Navigate to http://localhost:4200 and you should see your application.

Create a library

Instead of having our Counter directly defined in App.svelte file, let's create a library that we can import into our application.

Directory Flag Behavior Changes

The command below uses the as-provided directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the derived option, omit the --directory flag. See the as-provided vs. derived documentation for more details.

❯

nx generate @nx/js:library --name=Counter --directory=libs/counter --unitTestRunner=vitest --bundler=vite --importPath=@acme/counter

Nx 15 and lower use @nrwl/ instead of @nx/

Create the Counter component at libs/counter/src/lib/Counter.svelte and copy the contents of your src/App.svelte file into it.

Update your libs/counter/src/lib/index.ts to export your Counter component.

export { default as Counter } from './Counter.svelte';

Remember the default keyword

The default is import here as due to the aliasing we'll be doing later, we'll need to import the Counter component as import { Counter } from '@acme/counter'.

Update your project's vite.config.ts to include the following:

export default defineConfig({
  //... other config
  resolve: {
    alias: {
      '@acme/counter': fileURLToPath(
        new URL('/libs/counter/src/index.ts', import.meta.url)
      ),
    },
  },
});

This allows the runtime to resolve the @acme/counter import to the correct location.

Finally update your src/App.svelte to use the counter component.

<script lang="ts">
  import { Counter } from '@acme/counter';
</script>

<Counter />

Now we can build and serve our application again.

❯

nx build acme

To generate the build artifact at dist/acme.

❯

nx serve acme

To serve the application at http://localhost:4200.

Migration

Add a Svelte Project

Setup workspace

Create the application

Configure Nx to build and serve the application

Create a library

More Documentation