Svelte APP with the Star Wars API Pt 1

Starting with the starter template we started last week, we’ll build in the next few posts an app that displays information provided by an API.

The Star Wars API I’m going to be using is an Open source project. Star Wars API is an API that doesn’t require an API Key or credentials so for a proof of concept, it works wonderfully. This project won’t take full advantage of the API. After we’ve worked our way through, feel free to add more features and extend this app.

In this post we’re going to focus on the header and footer components. Please have the template up and running and your editor up and running. If you don’t have one running, please go to my post “Svelte Template” and follow those steps first.

First Component – Header

In the src folder, create a folder named components. As the name suggests, this is where we’ll put the components. It’s common to sort types of files together in a folder. If you were going to use separate files for the CSS, HTML and JavaScript, you might even want to make another folder to put the files for each component. We’ll be putting each component a single file, so no need for deeper sub-folders.

Inside the components folder, create a file called Header.svelte. It’s common to capitalize the names of the components. This makes it easier to tell a Svelte component from an HTML element.

In the Header.svelte file place the following code:

<header class="header">
    <h1>Star Wars Information</h1>
    <h2>Provided by Star Wars API</h2>
</header>

<style>
    .header {
        height: 100px;
        width: 100%;
        background-color: var(--backgroundColor);
        margin: 0;
        padding: 10px;
        text-align: center;
        font-family: 'Rowdies', cursive;
    }
    h1 {
        margin-top: 0;
    }
    h2 {
        margin-bottom: 0;
    }
</style>

This is a very basic header. Since there is no JavaScript for the component, we aren’t including script tags. Empty script tags can be placed in the file as a placeholder.

The HTML is what you may expect for a header section of a simple page.

The CSS, again seems very simple. But…. wait. There is two things that are not so simple. The first is the CSS variable. The second which you might not notice, it’s the font-family. We’re using a Google Font. But they aren’t being defined or imported from inside the component.

Now is a good time to talk about the global.css file that is located in the public folder. This file is loaded directly by the index.html file and the CSS Styles are available to all components. It’s a perfect place to put CSS variables and Google Fonts that multiple components will need to use.

While all the CSS could be put all in this file. That would defeat the idea of using components. If everything is included inside it’s own component it’ll be very easy to use it in a different project.

In this app we want some styling that will be used in multiple components. Both of these items are used in the Header and also the Footer. Putting them in the global.css file means a central spot for common CSS so if changes need to be made only one file needs to be edited.

public/global.css

Replace everything in the global.css file with the following:

:root {
	--backgroundColor: aquamarine;
}

@import url('https://fonts.googleapis.com/css2?family=Exo+2&family=Rowdies&display=swap');

body {
	margin: 0;
	padding: 0;
	font-family: 'Exo 2', sans-serif;
}

The Google Fonts line is actually pulling two fonts. The Exo 2 we are setting as the default font across the whole body. And the Rowdies font that we are using in the Header and soon the Footer.

Having all the CSS variables located here will allow us to change the styling from a single file. If aquamarine isn’t to your liking, go ahead and change it.

App.svelte

At this point the Header component will not load because it’s not being called. Components need to called from inside other components. All the way back up to the App component, which is called from the main.js file when the index.html is loaded.

Replace everything in the App.svelte file with the following:

<script>
	import Header from './components/Header.svelte';
</script>

<main>
	<Header />
</main>

In the script tag we are importing the Header component and using <Header /> we are placing the component there. If you put <Header /> in multiple times, you’ll get multiple times. Svelte doesn’t care how many times you put the component in, it’ll keep putting it in.

Once saved you can run the page and see a header. Granted not much to see so far.

Footer.svelte

Now for the Footer Component.

In the components folder create a new file named Footer.svelte. Place the following in it:

<footer class="footer">
    <p>Russ Eby &copy; 2020</p>
    <p>Star Wars information provided by <a href="https://swapi.dev/">The Star Wars API</a></p>
</footer>

<style>
    .footer {
        padding: 5px;
        border-top: 1px solid #333;
        text-align: center;
        background-color: var(--backgroundColor);
        font-family: 'Rowdies', cursive;
    }
</style>

A very simple footer. Here the background-color is using the variable same as the header. This lets both components use the same color. Go ahead and put your name in the footer.

App.svelte

Back to App.svelte, add the following to the script tag:

import Footer from './components/Footer.svelte';

Add the following below to the main element.

<Footer />

Once everything is saved, you can run the app and now we have a header and footer. The order of the imports don’t matter, but the order of the HTML does. Flip the order around and the footer will appear above the header.

Not exactly the most exciting web site so far, but maybe you can style it up a bit. We won’t be touching these components so feel free to go to town.

Next up

Next part will be the call to the API. At this point we have a displaying page so data coming back from the API we can display.

Resources

The Star Wars API