Consuming REST APIs in Svelte
Tags: svelte, javascript, webdev
Published: 2020-02-11 17:25:48

---
title: Consuming REST APIs in Svelte
published: true
date: 2020-02-09 22:00:08 UTC
tags: svelte,javascript,webdev
canonical_url: https://blog.logrocket.com/consuming-rest-apis-in-svelte/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/4igb0bu6lzhisw9xsypb.jpeg
---
**Written by [Abdulazeez Abdulazeez Adeshina](https://blog.logrocket.com/author/abdulazeezadeshina/)**✏️

Judging by the latest issue of the annual [“State of JavaScript” survey](https://dev.to/bnevilleoneill/what-are-the-most-in-demand-frontend-frameworks-in-2020-862), Svelte is the frontend library to watch in 2020 thanks to its modern style and simplicity.

Svelte is a modern reactive component framework that runs at build time, converting components into highly efficient imperative code that surgically updates the DOM.

## What we’ll be building

In this article, we’ll explore how Svelte consumes and renders data from an API by building a simple app. We’ll first write a simple backend to store our data and then write our Svelte components.

I assume you have an understanding of JavaScript, CSS, Node.js, and how Svelte works itself. If you’re brand new to Svelte, you should take a look at [this](https://dev.to/bnevilleoneill/how-to-build-a-simple-svelte-js-app-2090) [tutorial](https://dev.to/bnevilleoneill/how-to-build-a-simple-svelte-js-app-2090) before proceeding. You can also find the code used in this article in [this GitHub repo](https://github.com/Youngestdev/svelte-continent-app).

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## Setup

The first thing we’ll do is set up a working directory where we’ll store the code for our application. There are a number of ways to get a Svelte project up and running, and since this isn’t an introductory tutorial on Svelte, we’ll be using [degit](https://github.com/Rich-Harris/degit), a scaffolding tool to clone a Svelte template.

To scaffold our app, which we’ll call `continent-app`, run the following command in your terminal from your preferred working directory:

```jsx
npx degit sveltejs/template continent-app
```

Next is to navigate into the newly created directory and install the dependencies:

```jsx
cd continent-app && npm install
```

Once the dependencies installation is complete, we create two component files, `Continents` and `Continent`, and then start the app:

```jsx
touch src/{Continent,Continents}.svelte
npm run dev
```

You should get the screen below:

![Preview Of Our Svelte.js App](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/02/svelte-app-preview.png?resize=730%2C444&ssl=1)

## Building the API

Now that we have our Svelte app up and running, we are set to build the API before writing the components for the Svelte app. Our API is a simple one that holds hard coded informations about the seven continents that can be retrieved once a call is made to it.

Next, create a new folder `api`, in the app’s directory and install the following dependencies:

```jsx
mkdir api && cd api
npm init -y // Quick initialisation of directory
npm install express cors body-parser
```

After the installation, create a new file, `app.js`, that will hold the simple backend, and then copy the accompanying code below into it:

```jsx
touch app.js
```

### `app.js`

We start off by importing the dependencies and initializing them:

```jsx
const express = require("express");
const bodyParser = require("body-parser");
const cors = require('cors')

const app = express();
app.use(bodyParser.json());
app.use(cors())
```

Next, we create an array of data in JSON format holding the names, population, number of countries in the continent, and the area in kilometers

```jsx
const continents = [
  {
    id: 1,
    name: "Asia",
    population: "4,624,520,000",
    no_of_countries: 50,
    area: "44,579,000"
  },
  {
    id: 2,
    name: "Africa",
    population: "1,327,042,300",
    no_of_countries: 54,
    area: "30,370,000"
  },
  {
    id: 3,
    name: "North America",
    population: "590,176,500",
    no_of_countries: 23,
    area: "24,709,000"
  },
  {
    id: 4,
    name: "South America",
    population: "429,276,300",
    no_of_countries: 12,
    area: "17,840,000"
  },
  {
    id: 5,
    name: "Antartica",
    population: "No real data on populants",
    no_of_countries: 0,
    area: "14,000,000"
  },
  {
    id: 6,
    name: "Europe",
    population: "747,447,200",
    no_of_countries: 51,
    area: "10,180,000"
  },
  {
    id: 7,
    name: "Australia",
    population: "42,448,700",
    no_of_countries: 14,
    area: "8,600,000"
  }
]
```

Now that we have our continents’ data stored in the continents variable, we will write the handler for the API that allows us retrieve the data as well as start the backend:

```jsx
app.get("/", (req, res) => {
  res.send(continents);
});

app.listen(8081, () => {
  console.log("App's running on port 8081");
});
```

We have successfully completed the backend app! We can start it with the command:

```jsx
node app.js
```

We get a running message, and navigating to the url `localhost:8081` returns a list of the continent and its data.

Next we’ll write the Svelte app’s component to retrieve and render data.

## Writing the Svelte components

As we have seen above, the Svelte app displays its default landing page, and we have completed the backend. The next step is to write our Svelte components and redesign the app to render our continents data. We’ll be writing two components:

- `Continent`: This component renders the data of the continents passed as a prop to it from the `Continents` component
- `Continents`: This component retrieves the list of continents from the backend and renders them through the `Continent` component

We’ll begin by writing the `Continent` component that renders the data of continents passed to it from the `Continents` component.

### `Continents.svelte`

We’ll begin by creating a prop, `continent`, in the `<script>` section of the component.

```jsx
<script>
  // create a prop
  export let continent;
</script>
```

The `continent` prop will be used to render data, just as in other libraries like React and Vue.

Next, we render the data from the prop. Remember that from our API, we have the following data: name, population, number of countries, and area. We’ll render this just below the script tags:

```jsx
<article>
    <h1>{continent.name}</h1>
    <small>
      Population: <b>{continent.population}</b>   
    </small><br/>
    <small>
      Number of countries: <b>{continent.no_of_countries}</b>
    </small><br/>
    <small>
      Continent's size: <b>{continent.area}</b>
    </small>
</article>
```

Great! Next, we’ll add a little styling :

```jsx
<style>
  article {
    margin: 0 0 1em 0;
  }
  h1 {
    font-size: 1.4em;
    margin: 0;
    display: block;
  }
</style>
```

We have successfully completed our Continent component, this is quite straightforward than in other libraries where you have to write plenty code for a component. Next, we write the Continents component.

### `Continents.svelte`

In this component, we retrieve the list of continents from the backend, iterate over it, and pass each continent as a prop to the `Continent` component to render it. We’ll begin by importing the `onMount()` method and the `Continent` component.

```jsx
<script>
  import { onMount } from "svelte";
  import Continent from "./Continent.svelte";
  // define the data holding variable
  let continents;
```

Next, we define the `onMount` method that executes as soon as the `Continents` component is rendered.

```jsx
onMount(async () => {
    await fetch(`http://localhost:8081/`)
      .then(r => r.json())
      .then(data => {
        continents = data;
      });
  })

</script>
```

Next thing is to iterate over the continents data retrieved and pass each one as a prop to the `Continent`. This is done through Svelte’s built-in conditional support.

```jsx
{#if continents}
  {#each continents as continent }
    <ul>
      <li>    
        <Continent {continent} />
      </li>
    </ul>
  {/each}
{:else}
  <p class="loading">loading...</p>
{/if}
```

In the code above, we first check if the data has been retrieved. If yes, the data is iterated and rendered through the `Continent` component, as can be seen in lines 2–8. Otherwise, it displays a loading message.

### `onMount()` component method

Just as we have `componentDidMount()` in React, we also have the `onMount()` method in Svelte.  
This method is a function that is executed when the component is rendered. It can take a predefined function as an argument, or a function can be defined in it, as seen above.

Next, we add a little styling:

```jsx
<style>
  .loading {
    opacity: 0;
    animation: 0.4s 0.8s forwards fade-in;
  }
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  li {
    list-style-type: georgian;
  }
</style>
```

## Rendering the app

We’ve successfully written the components, and the next step is to render the data via the app’s main component. We’ll be rewriting the `App` component:

```jsx
<script>
  import { onMount } from "svelte";
  import Continent from "./Continent.svelte";
  import Continents from "./Continents.svelte";
  let continents;
  let continent;
</script>

<h1>The Seven Continents Svelte App</h1>
<main>
    <Continents {continents} />
</main>
```

Svelte has a hot-reloading function pre-built, and so if we navigate to our application via [`http://localhost:5000`](http://localhost:5000/), we get a screen as this:

![List Of Continents Rendered In Our App](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/02/continent-list-rendered.png?resize=730%2C444&ssl=1)

Next we’ll change our app title and style our app a bit (if you’d like to keep it black-and-white, it’s OK to skip this 😊).

```jsx
<svelte:head>
  <title>Svelte Continent App</title>
</svelte:head>


<style>
  main {
    background-color: lavenderblush;
    font-size: 15px;
  }
  h1 {
    font-size: 25px;
  }
</style>
```

Once saved, the app reloads and we have this screen:

![Our Svelte App With Styling](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/02/svelte-app-with-styling.png?resize=730%2C444&ssl=1)

## Conclusion

In this article, we looked at how to consume and render data from a backend in Svelte, define and export props, and pass props to components. We also briefly looked at what the `onMount()` method is.

The inbuilt template system is also a great advantage to building simple apps since this function removes the need for excessive JavaScript conditionals we’d normally need in, say, React. After reading this tutorial, I believe you should now be able to write components and consume and render consumed data from an API — keep coding, and again, you can find the code used in this article [here](https://github.com/Youngestdev/svelte-continent-app).

* * * 
## Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps
 
![LogRocket Dashboard Free Trial Banner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png?resize=1200%2C677&ssl=1)
 
[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
[Try it for free](https://logrocket.com/signup/).
* * *

The post [Consuming REST APIs in Svelte](https://blog.logrocket.com/consuming-rest-apis-in-svelte/) appeared first on [LogRocket Blog](https://blog.logrocket.com).