What the heck is SvelteKit?

So you've heard about this new-ish UI Framework Svelte that's taking the world by storm, and you want to build out your next big online creation and kick the tires. You start thinking about all of the problems you'd have with SEO, link unfurling etc, initial app load speeds. There has to be a way to do this like React does with Next.js, Vue with Nuxt.js, and Angular with Universal, right?

Enter SvelteKit. SvelteKit is a framework for building web apps that can be prerendered, server-side rendered, while still running like a SPA in the browser. As of the time of this writing, it should be mentioned that SvelteKit is currently on the road to 1.0 and as such, you may experience some issues as they continue to improve the framework. Even though this framework hasn't reached 1.0, it is currently what backs the site you're reading today!

I will be publish a tutorial for this site at some point in the not-so-distant future as well, if you're looking to take your learning even further.

Getting Started

To complete this tutorial, you will need the following:

• Node / NPM download (The LTS version should work)
• About 10 minutes of time to read and execute the commands listed below.

Start by opening a terminal and navigating to a folder where you'd like your app folder to live. Run the following commands in order.

#replace my-app with the name of your app/site
npm init [email protected] my-app

The Svelte app initializer will ask you a few questions to get your app up and running. You can choose other options, but for the purposes of following this tutorial, these are the options I chose.

• Which Svelte app template? Choose 'Skeleton project'
• Use TypeScript? Choose 'yes'
• Add ESLint for code linting? Choose 'yes'
• Add Prettier for code formatting? Choose 'yes

After the app has been initialised run the following commands to grab the dependencies for your app/site.

cd my-app

npm install

At this point you have a SvelteKit app initialized, and you can run the app with the following commands

npm run dev

This will launch a local server at http://localhost:3000 which you can navigate to in your web browser and see your new SvelteKit app.

Time To Get Stylish

Okay, so you have a web app up and running, cool, but you want to start adding some pizazz. You could always use css in your svelte files to style your components, but as far as I'm concerned, the best developer experience comes from using TailwindCSS. You can run a quick search on their site for any style you're thinking about implementing and their documentation is very, very good.

To add TailwindCSS quickly and easily to our site, we can run the following commands.

npx [email protected] tailwindcss

# IMPORTANT - At the time of this writing, svelte-add isn't installing the newly added dependencies for TailwindCSS.
npm install

Test to make sure that Tailwind is working properly

Let's head into our brand spanking new ✨ SvelteKit app and add a few styles to get ensure that SvelteKit and Tailwind (as well as Just-in-Time Mode)are working together.

Ensure that your app is currently running npm run dev, and open in your web browser (http://localhost:3000).

With your app currently running, open your code editor (I pretty much exclusively use Visual Studio Code) and modify the following file src/routes/index.svelte to contain the following:

<h1 class="text-3xl text-[#2478ff] mb-[30px]">My SvelteKit App</h1>

Save your index.svelte file and head back to your browser. You should see your title updated in big blue letters with some spacing between it and the text below. Two important things are checked by this quick text.

Note: Currently in your development environment, when you first load a page (try Ctrl+R), you will likely see a Flash of Unstyled Content (FOUC). When running your app in a production environment, this should not be an issue.

• First, just using the style of text-3xl we're testing that TailwindCSS is integrated and providing styles properly to our application.
• Second, the two classes text-[#2478ff] and mb-[30px] are testing the Just-in-Time (JIT) capabilities of TailwindCSS, and compiling your custom css properties at build time.

What's next?

Now that you have an app up and running, I would encourage the following:

• New to Svelte? Head over to the Svelte Tutorial and start learning about all things Svelte related.
• SvelteKit Docs - You'll likely be needing these as you continue your journey of learning and implementing Svelte and SvelteKit.

If you've run into any issues with this tutorial, please let me know so I can get them corrected. If you have any questions, I highly recommend the #svelte-kit channel on the Svelte Discord.

Thanks for stopping, by, see you next time!