Today's Svelte App With Minimal UI!

Getting Started

Create a new svelte project inside your local directory with the following command:

# Creating a new project
npx degit sveltejs/template 

# Install the dependencies...
npm install

...then start Rollup:

npm run dev

Navigate to localhost:8080. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

Adding Bootstrap

Add Sveltstrap using one of the following methods:

# Method One: Install sveltestrap and peer dependencies via NPM

 npm install sveltestrap 

# Method Two: Include CDN within Static HTML layout

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

Folder Structure

On the root level, we will create the following files.

Joke.svelte
Transition.svelte
Api.js

Extracting Data From API

Go into API.js and add the following code to fetch data from our API using the getJodeData function.

export const getJokeData = async () => {
    const response = await fetch('https://icanhazdadjoke.com', {
        headers: {
            Accept: 'application/json',
        },
    });

    const json = await response.json();

    return json.joke;
};

Creating Our Components

This project will have two components where we have one for the animations and one for displaying our Joke-text.

Now add the following code to our Joke.svelte file.

<script>
  import { Card } from "sveltestrap";
  export let joke;
</script>

<style>
  :global(.joke-text){
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  text-align: center;
  }
</style>

<Card class="joke-text" body>{joke}</Card>

And create our fly transitions inside the Transition.svelte file.

<script>
  import { fly } from "svelte/transition";
  export let duration = 1000;
  export let distance = 200;
</script>

<div in:fly={{ y: distance, duration }} out:fly={{ x: distance, distance }}>
  <slot />
</div>

Completing Our App.Svelte

Our App.Svelte structure should look like this now.

<script>
 // JavaScript Logic
</script>

<style>
 // CSS Styles
</style>

<main>
 // HTML Markup
</main>

Now we need to import the following bootstrap components from sveltestrap to our scripts.

import { Col, Container, Row, Button} from "sveltestrap";

Next up we can create our container using the following components that we just defined.

<Container class="joke-container">
    <Row>
        <Col>
            <h1>The Best Dad Jokes!</h1>
        </Col>
    </Row>
    <Row>
    <Col>
      <Button class="random-joke" color="danger">
        Random Joke
      </Button>
    </Col>
    </Row>
</Container>

This is the fun part of the App so let's style up our container.

<style>
  :global(.random-joke) {
    width: 100%;
  }
  :global(h1){
    color: white;
  }
  :global(.row) {
    margin-top: 10px;
    padding: 10px;
  }
  :global(.joke-container){
  border-radius: 10px;
  background-color: #00092C;
  }  
</style>

Our App.svelte should then be modified to import the following components we just created alongside using onMount to load our Joke data over the network.

<script>
import { onMount } from "svelte";
import { Col, Container, Row, Button} from "sveltestrap";
import { getJokeData } from "./api.js";
import Transition from "./transition.svelte";
import Joke from "./joke.svelte";
</script>

Let's create our onMount handler with our get requests from our api and complete up our App.Svelte file.

<script>
import { onMount } from "svelte";
import { Col, Container, Row, Button} from "sveltestrap";
import { getJokeData } from "./api/api.js";
import Transition from "./components/transition.svelte";
import Joke from "./components/joke.svelte";
let randomJoke;
let jokes = [];
let mode = "loading";
onMount(async () => {
    await onRandomJoke();
  });
async function onRandomJoke() {
    try {
      mode = "loading";
      await sleep(500);
      randomJoke = await getJokeData();
      await sleep(500);
      mode = "random";
    } catch (e) {
      alert("Oops! You've Encountered An Error.");
    }
  }
  const sleep = delayMS => new Promise(res => setTimeout(res, delayMS));
</script>

<style>
  :global(.random-joke) {
    width: 100%;
  }
  :global(h1){
    color: white;
  }
  :global(.row) {
    margin-top: 10px;
    padding: 10px;
  }
  :global(.joke-container){
  border-radius: 10px;
  background-color: #00092C;
  }  
</style>

<Container class="joke-container">
    <Row>
        <Col>
            <h1>The Best Dad Jokes!</h1>
        </Col>
    </Row>
    <Row>
    <Col>
      <Button on:click={onRandomJoke} class="random-joke" color="danger">
        Random Joke
      </Button>
    </Col>
    </Row>
    {#if mode === 'random'}
    <Transition>
      <Row>
        <Col>
          <Joke joke={randomJoke}/>
        </Col>
      </Row>
    </Transition>
  {/if}
</Container>

Deployment: 🤯

You can deploy your svelte project to any hosting platform. I personally choose to deploy this application to Vercel by importing my git repository. I highly recommend you check out their docs if you get stuck on deployment.

Check It Out! 🔥

Recap

If you followed along then you should have completed the project and finished off your Svelte Dad-Jokes App.

Now if you made it this far, then I am linking the code to my GitHub page for you to fork or clone and then the job's done.

License: 📝

This project is under the MIT License (MIT). See the LICENSE for more information.

Contributions

Contributions are always welcome...

Fork the repository
Improve current program by
improving functionality
adding a new feature
bug fixes
Push your work and Create a Pull Request

Blog