vite VS SvelteKit

import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import { pluginAPI } from 'vite-plugin-api' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ react(), pluginAPI({}) ], })

As you may already know, under-the-hood Vite uses the main bundler Rollup (instead of using the dreaded Webpack bundler).

Vite is a fast local development server, which uses a bundler to create the bundle of JS that the client receives. It currently uses two bundlers, actually.

Vite is a recommended bundler for React; thus, we'll use Vite in this tutorial. You can also use other tools like Create React App (CRA) instead.

https://vitejs.dev/ provides a quick and easy way to set up a boilerplate project with all the tooling you need.

Bun is great, yes!, Lately everyone is amazed and I was able to play around with it today, and I found it is pretty awesome to use it alongside with Hono, Vite and TailwindCSS.

Vite: A build tool that provides a faster and smoother workflow for developing web applications. It supports code splitting and breaks down codebases into smaller chunks, leading to more efficient loading and execution of JavaScript. It also supports lazy loading and ensures modules are only loaded when required, which reduces initial load times and improves performance. Its bundle size is 18.2kb minified and 5.9kb gzipped

We will be using Vite to create the React project. Vite is a tool to quickly start a project from a basic template for popular frameworks such as React, Angular, Vue, etc

import { defineConfig } from 'vite'; import { resolve } from 'path'; // https://vitejs.dev/config/ export default defineConfig({ build: { lib: { entry: resolve(__dirname, 'src/main.ts'), formats: ['es'] } }, resolve: { alias: { src: resolve('src/') } }, });

SvelteKit: The modern, blazing-fast web application framework that simplifies development with its intuitive approach and seamless transitions

Aha another Play user.

I took over a rather large Play project at work and it feels like the worst parts of Rails, then there's a poorly-implemented, old ReactJS + bootstrap frontend on it.

Would highly recommend taking a look at Sveltekit [0] with TypeScript and drizzle-orm if you want a full-stack experience.

[0] - https://kit.svelte.dev/

FYI SvelteKit moved from file-based routing to filesystem-based or directory-based routing[1]. This change was inspired by next.js[2]

Many users grumbled about needing more folders and files. With many files sharing the same name. But I think this was the right choice. See the explanations in the links below.

[1]: https://github.com/sveltejs/kit/discussions/5037

[2]: https://nextjs.org/blog/layouts-rfc

Svelte Headless UI : A complete port of React Headless UI, which is compatible with SvelteKit (Svelte meta framework). See above for more details.

I personally really like https://kit.svelte.dev. One of SvelteKit's philosophies is "use the platform." So it sticks close to vanilla HTML/CSS/JS and adds enhancements where it makes sense. Also the SvelteKit community is pretty active and helpful.

The base SvelteKit skeleton project provides a minimal site using best practices so you can get started right away on the unique features of your app. You don't have to use any of SvelteKit's extra enhancements, but they are designed to cut down the boilerplate almost every project needs.

I have built several small projects with SvelteKit. Here is one of my latest projects, built in an afternoon or two (the biggest feature is hidden away):

- https://github.com/Leftium/transform/commits/main

- https://tt.leftium.com/

---

On the other hand, there is merit in using tech you are already proficient with. (StackOverflow uses .net because that's what the devs were familiar with.) It is possible to use PHP/Python/Django for the backend and just use SvelteKit on the frontend.

The frameworks mentioned do not allow a page interaction without a code being executed in a browser. The exception is Svelter.Kit, which tries hard to make a web page interactive even with disabled JavaScript.

As a “one-developer” agency you will find the Svelte/SvelteKit ecosystem amazing. The most common route imo is SvelteKit + Vercel + Baas (Supabase) + TailwindCSS + UI Component Library (Skeleton UI, DaisyUI). This stack gets you a fully scalable, blazingly fast™️, and a joy-to-develop ecosystem with basically zero deployment management.

// See https://kit.svelte.dev/docs/types#app // for information about these interfaces import PocketBase from 'pocketbase'; declare global { namespace App { // interface Error {} interface Locals { pb: PocketBase; id: string; email: string; } // interface PageData {} // interface Platform {} } } export {};

In our most recent community highlight, we were excited to announce the introduction of the SvelteKit client. Now, Lacey Pevey made it even easier to get started using Svelt expeerience with her new SvelteKit eCommerce Store Starter, a Svelte storefront designed to integrate with your Medusa backend seamlessly.

Edit: But the best resource is honestly the main documentation sites: https://svelte.dev/ https://kit.svelte.dev/