How can I share code between Sveltekit projects

user_13269283 0
Viewed 302

I'm trying to set up a monorepo for a sveltekit and typescript project consisting of four packages:

.
├── frontend // sveltekit project
├── backend // typescript proeject
├── app // sveltekit project
└── shared // where I'll store my common svelte and typescript files

I want to reuse code in the shared package with the frontend, backend, and app projects. I just want to share some typescript interfaces and svelte components between my projects, but I have no idea what the best way to go about this is.

First of all, I tried building the shared package with the svelte-kit package command to generate a package that I could import into each project, but that completely breaks with yarn workspaces.

What steps can I take to share typescript files and svelte components between my projects?

sveltekit svelte typescript
1 Answers

One way to go about it is to use turborepo.

Simple rule to follow:

Apps and sites go to apps folder and libraries and configs go to packages folder.

npx create-turbo@latest

When adding packages make sure they follow npm package guidelines and have package.json so it can be imported in apps. Here is the example of package.json for my stub svelte library uikit:

{
  “name”: “uikit”,
  “version”: “0.0.0",
  “main”: “./index.svelte”,
  “types”: “./index.svelte”,
  “devDependencies”: {
    “svelte”: “^3.44.0”
  }
}

After adding apps and packages we need to configure turbo config located in turbo.json. I only had to append the svelte-kit command in the outputs for build:

{
  “pipeline”: {
    “build”: {
      “dependsOn”: [“^build”],
      “outputs”: [“dist/**“, “.next/**“, “svelte-kit/**“]
    },
    “lint”: {
      “outputs”: []
    },
    “dev”: {
      “cache”: false
    }
  }
}

Than you can import svelte components in your sveltkit app like this:

<script>
  import Button from “uikit”
</script>
<Button> Test Button </Button>

Next you need to set up different ports for each repository from “apps” folder so we can run all the sites simultaneously. This might be quite handy for some use cases. Update dev command script located in the root of the site in their respective package.json:

  “scripts”: {
     “dev”: “svelte-kit dev --port 3003”,
     ...

That should be it; start developing!

npm run dev

This will spawn all of the apps in the project on their designated ports.

npm run build

You must be wandering where do you run this commands since each lib or app will have its own package.json?

Run all the commands in the root of the monorepo. Turborepo is taking care of it.

You can read more about it here https://turborepo.org/

Also here is the repo example with both svelte and react libs/apps in the same monorepo here https://nenadkostic.com/blog/turborepo-sveltekit/

user_20885890
Related