Today's Svelte App With Minimal UI!

Helitha Rupasinghe - May 16 '22 - - Dev Community

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
Enter fullscreen mode Exit fullscreen mode

...then start Rollup:

npm run dev
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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;
};

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

import { Col, Container, Row, Button} from "sveltestrap";
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Useful Resources

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .