---

I've used sveltekit before and so I think it might be easier or at least a good time to give typescript another shot I'm going to use it for another project today.

The goal is to get a functional news site working with a backend to upload articles and summaries. I'm also going to use a UI library for the first time so we'll see how that goes as well :)

This will be my notes as I got through but there is hope that I'll see a pattern and will be able to distill the core ideas much better this time around than the last. Last time I got a solid project done but it felt a bit too messy for my liking so I'm hoping this will be better.

List of Config files

• vite.config.js - Used to manage the vite build program, this will managing bundling and compiling and the dev server

• svelte.config.js - This will set how to handle svelte specific things, for example using PostCSS in style blocks

• tailwind.config.cjs - This will set tailwind specific config options like what plugins are being used

Installing SvelteKit

This is relatively straightforward but I ran into an issue with the open command in the docs and I didn't bother figuring it out for now.

npm init svelte@latest my-app
cd my-app
npm install
npm run dev

For whatever reason npm run dev -- --open was causing an error. You should have a working server dev environment, kill the server so we can update the host and port number as I don't work locally to the project.

Update vite.config.js to set the host and port number.

const config = {
    server: {
        host: '0.0.0.0',
        port: 7900,
    },
    plugins: [sveltekit()]
};

This will open up the dev environment so that I can access it over the network. This also requires opening up port 7900 on the firewall.

Now we should be able to navigate to 192.168.12.30:7900 and see a Welcome to SvelteKit page.

Installing TailwindCSS

I really like having utility classes and so even though I'm going to use a UI library, I think having tailwind will make it easier to make minor modifications to things.

npm install -D tailwindcss postcss autoprefixer svelte-preprocess
npx tailwindcss init tailwind.config.cjs -p

Update svelte.config.js to do the preprocessing of style blocks as PostCSS, this way we can import in all the styles.

import preprocess from "svelte-preprocess";
import { vitePreprocess } from '@sveltejs/kit/vite';
...
const config = {
    preprocess: vitePreprocess(),

    kit: {
        adapter: adapter()
    },
    preprocess: [
        preprocess({
            postcss: true,
        }),
    ],
};
...

Update tailwind.config.cjs to set where the template files will all be.

module.exports = {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {},
    },
    plugins: [],
}

Create src/app.css and add the tailwind functions. This will then import in all the styles.

@tailwind base;
@tailwind components;
@tailwind utilities;

Create src/routes/+layout.svelte. This will be the base layout file that is used across the app. This is where you will import the css file and use it.

<script>
    import "../app.css";
</script>

<slot />

Update the ./src/routes/+page.svelte to use some tailwind classes.

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

Start the server

npm run dev

Now we should see the styling being applied! We now have tailwind set up.

Installing SvelteUI

I never used a UI library in a framework before so I'm hoping this is easy and won't get too much in the way. I won't be rushing to add my custom styles so hopefully this gives me a good enough design as design is definitely not my strong suit. Maybe someday :)

https://www.svelteui.org/

I found this on reddit and arbitrarily chose it.

Installation is just installing some npm packages. It has typescript support which I'm not sure what that means in this context of components but could be cool.

npm i @svelteuidev/core @svelteuidev/composables  

Ran into an issue with versions as it looks like svelteui has hardcoded dependency of svelte@3.47.0 and svelte is currently on 3.54.0. The github issue seems that it should be >= version check in svelteui but that is getting stripped out when pushed to npm but not when the maintainer generates it. Currently looking into it.

https://github.com/svelteuidev/svelteui/issues/205

The workaround:

npm i --legacy-peer-deps @svelteuidev/core @svelteuidev/composables

Now that we have the UI lib added, we now need to wrap the +layout slot to use the UI library. This is to get dark and light theme working. We can use the UI library without this step but we'd be missing out on an easy to add darkmode.

<script>
    import { SvelteUIProvider } from '@svelteuidev/core';
    import "../app.css";
</script>

<SvelteUIProvider themeObserver="dark">
    <slot />
</SvelteUIProvider>

Now we can use a UI element in our base page, ./src/routes/+page.svelte.

<script>
      import { Button } from "@svelteuidev/core";
</script>

<h1 class="text-3xl font-bold underline">
    Hello world!
</h1>

<Button class='text-3xl'>Click Me</Button>

Voila! We have a button from the UI library now and it's using a tailwind class!

Installing FlowBite-Svelte

SvelteUI doesn't show an layouts or headers that I could use quickly, I switched to FlowBite. This has examples and code that I could take directly which is useful when trying to move quickly.

Remove SvelteUI

npm remove @svelteuidev/core @svelteuidev/composables

I also removed the svelteui code from the layout file.

Install flowbite:

npm i -D flowbite-svelte

Update tailwind.config.cjs so it knows about flowbite.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './src/**/*.{html,js,svelte,ts}',
        "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
    ],
    theme: {
        extend: {},
    },
    plugins: [
        require('flowbite/plugin'),
    ],
    darkMode: 'class',
}

I'm not sure what the interaction is between flowbite, tailwind and svelte really is yet.

After a couple hours of playing around with things, I'm not a big fan of using flowbite. It seems to basically just give tailwind snippets so I'm not sure why I should bring the UI library. It's not like it gave me easy to use classes or components that I could drop in.