How to integrate shadcn-svelte into the editable.website template

Benson Mwaura — Mon, 14 Oct 2024 08:39:39 +0000

Follow these steps to integrate shadcn-svelte into the editable.website template. This guide assumes you have a basic understanding of SvelteKit and Node.js.

Step 1: Set Up Your Project

Clone the **Editable.Website Template**: Start by cloning the editable.website repository to your local machine:

bash

git clone https://github.com/michael/editable-website.git
cd editable-website

Install Dependencies: Install the necessary dependencies for your project:

bash

pnpm install

Step 2: Create Environment Variables

Copy .env.example to .env and configure your database and admin password.

Step 3: Seed the Database

Note: Make sure you have sqlite3 installed on your system. If not, you can install it from here.
Seed your database using:

bash

sqlite3 data/db.sqlite3 < sql/schema.sql

Step 4: Run the Development Server

bash

pnpm run dev

Step 5: Create a jsconfig.json

Since the editable.websiteseems to be opted-out of TypeScript, to configure import aliases, create a jsconfig.json file:

bash

touch jsconfig.json

jsconfig.json

json

{
    "compilerOptions": {
        "paths": {
          "$lib/*": ["./src/lib/*"]
        }
      }
}

Step 6: Setup Path Aliases

If you are not using the default alias $lib, update your svelte.config.js file to include those aliases.

svelte.config.js

const config = {
      // ... other config
      kit: {
        // ... other config
        alias: {
          $lib: "src/lib",
          "$lib/*": "src/lib/*",
          $components: "src/lib/components",
          "$components/*": "src/lib/components/*",
          $utils: "src/lib/utils",
          "$utils/*": "src/lib/utils/*"
        }
      }
};

Step 7: Install Compatible Prettier Version

To fix the warning about peer dependencies for prettier-plugin-tailwindcss and prettier-plugin-svelte:

Install Compatible Prettier Versions: Create a new dev dependency using a compatible version for svelte:

bash

pnpm install --save-dev prettier@^2.0

*Use *npm alias: This allows you to install multiple versions of Prettier:
bash

pnpm install --save-dev prettier-2@npm:prettier@^2.0.0 prettier-3@npm:prettier@^3.0.0

Adjust Scripts: Update your npm scripts in package.json to use the specific Prettier versions:

package.json

json

"scripts": {
      "format:svelte": "prettier-2 --write 'src/**/*.{js,svelte}'",
      "format:other": "prettier-3 --write 'src/**/*.{js,ts,css,md,json}'"
}

Step 8: Run the CLI

bash

pnpm dlx shadcn-svelte@latest init

Step 9: Configure components.json

You will be asked a few questions to configure components.json:

bash

      Would you like to use TypeScript (recommended)? › Yes
      Which style would you like to use? › Default
      Which color would you like to use as base color? › Slate
      Where is your global CSS file? › src/app.css
      Where is your tailwind.config.[cjs|js|ts] located? › tailwind.config.js
      Configure the import alias for components: › $lib/components
      Configure the import alias for utils: › $lib/utils

That's It

You can now start adding components to your project.

bash

pnpm dlx shadcn-svelte@latest add button

The command above will add the Button component to your project. You can then import it like this:

svelte

      <script lang="ts">
      import { Button } from "$lib/components/ui/button";
      </script>

      <Button>Click me</Button>

This guide should provide a solid foundation for integrating shadcn-svelte into the editable.website template. If you have any specific questions or need further assistance, feel free to checkout the docs for shadcn-svelte and the editable.website repo.

DEV Community: Benson Mwaura

How to integrate shadcn-svelte into the editable.website template

Step 1: Set Up Your Project

Step 2: Create Environment Variables

Step 3: Seed the Database

Step 4: Run the Development Server

Step 5: Create a jsconfig.json

Step 6: Setup Path Aliases

Step 7: Install Compatible Prettier Version

Step 8: Run the CLI

Step 9: Configure components.json

That's It