# Add a Svelte Project
The code for this example is available on GitHub:
{% github-repository url="https://github.com/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.
{% pill url="/features/run-tasks" %}✅ Run Tasks{% /pill %}
{% pill url="/features/cache-task-results" %}✅ Cache Task Results{% /pill %}
{% pill url="/ci/features/remote-cache" %}✅ Share Your Cache{% /pill %}
{% pill url="/features/explore-graph" %}✅ Explore the Graph{% /pill %}
{% pill url="/ci/features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %}
{% pill url="/getting-started/editor-setup" %}✅ Integrate with Editors{% /pill %}
{% pill url="/features/automate-updating-dependencies" %}✅ Automate Updating Nx{% /pill %}
{% pill url="/features/enforce-module-boundaries" %}✅ Enforce Module Boundaries{% /pill %}
{% pill url="/features/generate-code" %}🚫 Use Code Generators{% /pill %}
{% pill url="/features/automate-updating-dependencies" %}🚫 Automate Updating Framework Dependencies{% /pill %}
## Setup workspace
**Create a new Nx workspace**
{% tabs %}
{%tab label="npm"%}
```shell
npx create-nx-workspace@latest acme --preset=ts-standalone --nx-cloud=yes
```
{% /tab %}
{%tab label="yarn"%}
```shell
npx create-nx-workspace@latest acme --preset=ts-standalone --nx-cloud=yes --pm yarn
```
{% /tab %}
{%tab label="pnpm"%}
```shell
npx create-nx-workspace@latest acme --preset=ts-standalone --nx-cloud=yes --pm pnpm
```
{% /tab %}
{% /tabs %}
**Add @nx/vite, svelte, and other dependencies to your workspace**
{% callout type="note" title="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](/recipes/tips-n-tricks/keep-nx-versions-in-sync).
{% /callout %}
{% tabs %}
{%tab label="npm"%}
```shell
npm add -D vitest vite svelte svelte-check @sveltejs/vite-plugin-svelte
nx add @nx/vite @nx/js
```
{% /tab %}
{%tab label="yarn"%}
```shell
yarn add -D vitest vite svelte svelte-check @sveltejs/vite-plugin-svelte
nx add @nx/vite @nx/js
```
{% /tab %}
{%tab label="pnpm"%}
```shell
pnpm add -D vitest vite svelte svelte-check @sveltejs/vite-plugin-svelte
nx add @nx/vite @nx/js
```
{% /tab %}
{% tab label="bun" %}
```shell
bun add -D vitest vite svelte svelte-check @sveltejs/vite-plugin-svelte
nx add @nx/vite @nx/js
```
{% /tab %}
{% /tabs %}
## Create the application
Create your `index.html` at the root with the following:
```html
Acme
```
Navigate to `src/index.ts` and change it to `src/main.ts` and add the following content:
```ts
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:
```ts {% fileName="src/App.svelte" %}
```
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:
```ts {% fileName="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.
```json {% fileName="tsconfig.json" %}
{
"extends": "@tsconfig/svelte/tsconfig.json"
//... other configs
}
```
See more here: [Svelte TypeScript](https://www.npmjs.com/package/@tsconfig/svelte)
## Configure Nx to build and serve the application
Navigate to `vite.config.ts` add `svelte` to your plugins.
```ts
// 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:
```json {% fileName="/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 `nx.json` it should contain the following:
```json {% fileName="/project.json" %}
{
// ... other config
"plugins": [
{
"plugin": "@nx/eslint/plugin",
"options": {
"targetName": "lint"
}
},
{
"plugin": "@nx/vite/plugin",
"options": {
"buildTargetName": "build",
"previewTargetName": "preview",
"testTargetName": "test",
"serveTargetName": "serve",
"serveStaticTargetName": "serve-static"
}
}
]
}
```
We also need to add a `svelte.config.js` file to the project root with the following content:
```js
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:
```json {% fileName="/package.json" %}
{
"type": "module"
}
```
{% callout "Note" title="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](https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only)
{% /callout %}
Test it out
**Build the application**
```shell
nx build acme
```
Your build artifacts should be in `dist/acme`
**Serve the application**
```shell
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.
{% callout type="note" title="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](/deprecated/as-provided-vs-derived) for more details.
{% /callout %}
```shell
nx generate @nx/js:library --name=Counter --directory=libs/counter --unitTestRunner=vitest --bundler=vite --importPath=@acme/counter
```
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.
```ts
export { default as Counter } from './Counter.svelte';
```
{% callout "Note" title="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'`.
{% /callout %}
Update your project's `vite.config.ts` to include the following:
```ts
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.
```ts
```
Now we can build and serve our application again.
```shell
nx build acme
```
To generate the build artifact at `dist/acme`.
```shell
nx serve acme
```
To serve the application at `http://localhost:4200`.
## More Documentation
A larger example including libraries, test and more is available at [Nx Svelte Example](https://github.com/nrwl/nx-recipes/tree/main/svelte) on GitHub.
- [Nx Vite Plugin](/nx-api/vite)
- [Vite](https://vitejs.dev/)
- [Svelte](https://svelte.dev/)