How to use Bootstrap in Svelte apps (using CDN)

 Bootstrap is one of most used CSS/Sass framework nowadays, even though the bundle size is larger than that of TailwindCSS.

 

So how do we use Bootstrap in Svelte and Svelte kit. Importing the CDN link from the entry point would be an ideal approach.

Svelte

In Svelte apps we can use the app.svelte to import the Link and scripts. Svelte provides svelte:head component for including external links or just use a regular head tag.

<svelte:head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

</svelte:head> 

Svelte Kit

In Svelte Kit there is no entry point, so we can use +page.svelte component file for including bootstrap CSS. For global css , +layout.svelte would be the right place. 

Additionally you may require Sass which require configure svelte preprocess. See the Sass guides. 📖

Read More

Configure TailwindCSS in Svelte Kit

 TailwindCSS can be configured in Svelte Kit. Install the dependencies first 🤜.

 

npm install -D tailwindcss postcss autoprefixer svelte-preprocess

npx tailwindcss init tailwind.config.cjs -p 

 Configure the the Tailwind config content key with the following 

//tailwind.config.cjs

content: ['./src/**/*.{html,js,svelte,ts}'], 

Create app.css file and import Tailwind classes and utilities.

//app.css

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

Import the app.css in +layout.svelte file.

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

Lets test some style

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

Now it should working. 🤔

 Read more TailwindCSS guides

Read More

How to create a component in Svelte

 Components are basic building block in a Svelte app. A Svelte component cane made of simple HTML statements , styles, scripts etc.

Property, Reactivity

There can be only one top level script in a component. Here is a Quick example. 

//src/components/Message.svelte

<script> export let message="Hi";</script>

<h1>{message}<h1>

Property can be defined using a reactive assignment with export state. In Svelte assignment add reactivity. With the special operator $ we can make statements reactive too as follows

<script>
	export let title;

	// this will update `document.title` whenever
	// the `title` prop changes
	$: document.title = title;

	$: {
		console.log(`multiple statements can be combined`);
		console.log(`the current title is ${title}`);
	}
</script>

Read More

Configure Sass in Svelte Kit

 Sass is the most mature, stable, and powerful professional grade CSS extension language. Svelte simplify the use of Sass. 

 

In order to use Sass or scss in Svelte app we have to use the preprocess.

First up all install the node dependencies and sass.

npm i --save-dev bootstrap node-sass svelte-preprocess

In our project locate the  svelte.config.js and import the svelte preprocess and add it to the config object as follows.

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
/** @type {import('@sveltejs/kit').Config} */

const config = {
kit: {
adapter: adapter()

},
preprocess: [preprocess() ]
};
export default config;

Lets make sure it is working and a simple scss style.

<style lang="scss" type="text/scss" >

$color: red;
h1{
color: $color;
}

</style> <h1>Hello world</h1>

 The heading will be show up in red. 😆

Read more sass guides

Read More

How to include external CSS and Scripts in Svelte

 One of the problem I was faced in Reactjs and Vue is linking external style sheets and script from CDN which may require special approach.
 

In Svelte we can include the CSS and Script using the dedicated <svelte:head> tag.

<svelte:head>

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" ...>

</svelte:head>

Sometimes we also need to add external script which provide special functionality to our app, such as bootstrap carousel actions.  drop the script at the head section.

<svelte:head>

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" ... crossorigin="anonymous"></script>

</svelte:head>

Svelte also let us import external CSS using the import statement in styles.

@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css");

Read More

How to create a Svelte app

 Svelte is a Javascript Framework for create web app. We can create a Svelte web app using Svelte Kit. The prerequisites required are

 

• Nodejs should be installed on development machine
  
• Web browser
• Code editor , (VS Code recommended)

Create a project

 After setting up the Node and npm package manager you can create new project using the following 

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

Routing

Routing is the individual pages in your web app. For more details on routing and all other matters please visit official docs

 

Read More

Svelte, a compiler based Javascript framework

 Svelte is one of the Javascript Frame work , most loved by the developer community. It is little bit different from React, Vuejs and Angular. 

Unlike React Svelte uses a compiler to generate bundles,  as result of this when user launches the app, it run faster, and bundle size will be minimal. 🚀 

 

Learning curve

Learning Svelte is not so hard, it is just another language. Documentation is worth reading and there is a good community for help.

Components

Svelte reusable component comprises of plain HTML code. In React they uses functional component or class component with props.

Svelte simplify these. Also let use Markdown to create components and routes. 

Props

Properties props can be think of variable. 

let posts[];

Reactivity

What is achieved in Vuejs' s computed property or React's useEffect can be done with few line of code. Here is how I implemented a search logic in Svelte

 

let searchTerm = '';$: {
if (searchTerm) {
filteredPokemon = $pokemon.filter((pokeman) =>
pokeman.name.toLowerCase().includes(searchTerm.toLowerCase())
);
} else {
filteredPokemon = [...$pokemon];
}

The above code filter pokemons collection using the searchTerm which is a reactive variable and  binded to a input box. Whenever user input search term it will automatically filter and display the content.

The same thing can be done in Reactjs with more lines of code. Thanks to the $ operator which make the reactive property observable.

The complete pokemon project can be found on Github Repo.

SvelteKit

So what is SvelteKit ? It is like Nextjs for React developers. SvelteKit helpful to setup app with all scaffolding and configurations such as routing. In short it is the easiest way to create a Svelte app.

 

Read More