Svelte.js 3 Local JSON Storage Tutorial

Lesson Video

If you prefer to learn visually, you can watch this lesson in video format.

Lesson Project

If you want to follow along with the examples in this lesson, you’ll need a Svelte app that was cloned with degit or scaffolded with Vite

If you already have an app from previous lessons, you can use that instead.

Data in a local JSON file

An application may not always need a large external storage solution like Firebase. If our application is small and doesn’t need a lot of data, or if we simply want to work with a large array, we can use a JSON file that’s stored locally on the same server as our app.

As an example, let’s create the following new JSON file.

• src/assets/users.json

The project should look similar to the following.

project_folder/
├── src/
|   ├── assets/
|   |   └── users.json
|   └── App.svelte

Then add the following four object literals to it.

[
  {
    "id": 0,
    "name": "John"
  },
  {
    "id": 1,
    "name": "Jane"
  },
  {
    "id": 2,
    "name": "Jack"
  },
  {
    "id": 3,
    "name": "Jill"
  }
]

How to install the json Rollup plugin

To get data from a local JSON file, we’re going to need the json Rollup plugin to convert JSON files to ES6 modules.

To install the plugin, open your terminal and navigate to your project folder. From there, execute the following command.

tip If you’re using Visual Studio Code, you can go to Terminal > New Terminal to open a terminal with the project’s path already selected.

npm install @rollup/plugin-json --save-dev

Once the package has been installed, you should see it under “devDependencies” in the package.json file.

{
  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0"
  }
}

The next step is to tell Rollup that we want to use the plugin in the rollup.config.js file in the root of the project’s directory.

We’ll need to import the package at the top of the file.

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only';
// import "json" plugin
import json from '@rollup/plugin-json';

Then specify it in the plugins array of the configuration object further down in the file.

export default {
  // other config options

  plugins: [
    // add "json" plugin
    json(),

    // other rollup plugins
  ]
}

That’s all we need to start working with the plugin.

tip There are many more bundler plugins available for Svelte around the web.

How to retrieve local JSON data with the json plugin

Now that we have the plugin installed, we can use it to retrieve data from our JSON file.

To do that, we simply import the file with any name. Then we use the name to access the data in whichever way we need.

tip A good way to avoid naming conflicts with component imports is to use camelCase for the name. For example: userData instead of UserData.

For our example, we’ll just iterate over the users and output each one’s name on the page.

<script>
  import users from './assets/users.json'
</script>

{#each users as user (user.id)}
  <p>{user.name}</p>
{/each}

If we run the example in the browser, we’ll see the 4 names from our JSON file.