Integrate Svelte with Strapi

These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

What Is Svelte?

Svelte is a modern JavaScript framework that compiles components into efficient JavaScript at build time, unlike React or Vue, which handle heavy lifting in the browser. It uses a reactive programming model where state changes directly update the DOM without the need for a virtual DOM. This results in smaller bundles and faster performance.

Svelte’s assignment-based reactivity updates the DOM automatically when variables change, using the $: syntax. The framework also supports reactive statements, allowing developers to run code when dependencies change. With scoped styling and minimal code, Svelte enables fast, responsive user experiences.

Why Integrate Svelte with Strapi

Integrating Svelte with Strapi creates a powerful stack for modern web development, which combines a flexible back-end with a lightning-fast front-end. Strapi, a leading headless CMS, manages your content through a user-friendly admin interface that is ideal for non-technical users. It delivers content via REST and GraphQL APIs, providing flexibility for your Svelte app.

Svelte’s modular, maintainable components allow you to build reactive user interfaces, while Strapi handles content modeling. Customize your data structure in Strapi, then easily consume it in Svelte for versatile applications. You can start with REST APIs and switch to GraphQL as your app grows, all without altering your back-end setup.

You can use Strapi’s headless CMS to avoid the limitations of traditional CMS architectures and benefit from more control and scalability. Svelte’s efficiency, combined with Strapi’s flexibility, creates a stack that is both developer-friendly and user-oriented. The open-source nature of both tools provides transparency, community support, and extensive customization.

Deployment is straightforward with Strapi Cloud, or you can choose from various deployment options. Strapi’s v5 updates enhance performance and development tools, making it easier to integrate with Svelte.

Choosing to integrate Svelte with Strapi can help you create a clean separation of concerns—Strapi manages your content while Svelte delivers fast, reactive interfaces for a wide range of web applications.

How to Integrate Svelte with Strapi

Ready to build something amazing with Svelte and Strapi? Let's walk through how to integrate these powerful tools to create responsive, content-rich applications.

Prerequisites

Before we start, make sure you have:

• Node.js (LTS version recommended)
• npm (Node Package Manager) or Yarn
• Basic command-line knowledge
• JavaScript fundamentals

Visual Studio Code with the Svelte extension will make your coding experience much smoother.

Setting Up Svelte/SvelteKit

Start by creating a fresh SvelteKit project. If you're evaluating different frameworks, this SvelteKit comparison provides insights into how SvelteKit stacks up against alternatives like Next.js.

1. Run this command in your terminal:

npx sv create my-svelte-app

2. Follow the prompts to select your project options (TypeScript, ESLint, etc.).
3. Move into your project folder and install dependencies:

cd my-svelte-app
npm install

4. Fire up the development server:

npm run dev

You're now running SvelteKit! The project structure includes src/routes/ for your pages and src/lib/ for your components and utilities.

Setting Up Strapi

Next, let's create your Strapi back-end:

1. In a new terminal window, run:

npx create-strapi@latest my-strapi-api

When prompted with "Start with an example structure & data?", ensure you choose "yes".

2. When installation finishes, Strapi will start automatically. Access the admin panel at http://localhost:1337/admin.
3. Create your admin account when prompted.
4. Use the admin panel to publish the article entries.
5. Configure API access permissions in "Settings > Roles & Permissions > Public" to allow find and findOne for your Article collection type.

This should enable your Article collection type to be publicly accessible using the API endpoint http://localhost:1337/api/articles.

Connecting Svelte to Strapi's REST API

Let's integrate Svelte with Strapi's API:

1. Create ./src/routes/articles/+page.js file to get article data from Strapi before the route component renders. This is done by creating the load function. Add the code below.

// Path: ./src/routes/articles/+page.js

export const load = async ({ fetch }) => {
    const res = await fetch('http://localhost:1337/api/articles');
    const { data } = await res.json();

    return { articles: data };
};

The return value is now available to the page via the articles prop. Let's create the article page.

2. Create a new file ./src/routes/articles/+page.svelte and add the code below:

// Path: ./src/routes/articles/+page.svelte

<script>
	let { data } = $props();
</script>

<h1>Svelte and Strapi Integration</h1><div>
{#each data.articles as article}
  <h2>{article.title}</h2>
  <p>{article.description}</p>
{/each}
</div>

This code fetches articles from Strapi and displays them in your Svelte app as shown below when you visit http://localhost:5173/articles:

GitHub Code

You can find the complete code for the project above here.

Using GraphQL with Strapi and Svelte

If you're unsure whether to use REST or GraphQL, consider reading about the REST vs GraphQL decision to make an informed choice that suits your project's needs.

For more complex data needs, GraphQL offers precise control:

1. Enable the GraphQL plugin in your Strapi project.
2. Install a GraphQL client in your SvelteKit project:

npm install @urql/svelte

3. Create a GraphQL client in src/lib/graphql-client.js:

import { createClient } from '@urql/svelte';

export const client = createClient({
  url: 'http://localhost:1337/graphql',
});

4. Use the client in your Svelte components:

<script>
  import { client } from '$lib/graphql-client';
  import { gql } from '@urql/svelte';
  import { onMount } from 'svelte';

  let articles = [];

  const ARTICLES_QUERY = gql`
    query GetArticles {
      articles {
        data {
          documentId
          title
          description
          }
        }
      }
    }
  `;

  onMount(async () => {
    const response = await client.query(ARTICLES_QUERY).toPromise();
    articles = response.data.articles.data;
  });
</script>

<h1>Articles</h1>
{#each articles as article}
  <h2>{article.title}</h2>
  <p>{article.content}</p>
{/each}

This approach gives you precise control over what data you fetch.

Common Challenges and Solutions

1. CORS Issues: If you encounter CORS errors, configure Strapi in config/middlewares.js:

module.exports = {
  settings: {
    cors: {
      enabled: true,
      origin: ['http://localhost:5173'], // Your SvelteKit dev server
    },
  },
};

2. Authentication: For protected routes:
   • Use Strapi's /auth/local endpoint to log in.
   • Store the JWT in localStorage or a secure cookie.
   • Include the JWT in the Authorization header for API requests.
3. Environment Variables: Store API URLs and secrets in .env files:

# In your SvelteKit project
VITE_STRAPI_URL=http://localhost:1337

4. Access these in your Svelte components with import.meta.env.VITE_STRAPI_URL.

Reviewing Strapi Cron best practices can help ensure efficient and reliable background operations if your application requires scheduled tasks.

Follow these steps, and you will have a solid foundation for integrating Svelte with Strapi. As your app grows, remember to optimize queries, implement caching, and follow security best practices.

Project Example (GitHub Project Repo)

Let's dive into a real-world example—a blog platform built by integrating Svelte with Strapi. This project shows you practical implementation details and solutions to common challenges.

Blog Platform Overview

Our example is a modern blog that uses SvelteKit for the front-end and Strapi as the headless CMS. You can review the complete code on GitHub.

This blog platform features:

• Server-side rendering for better SEO
• Client-side interactivity for a smooth user experience
• Content management through Strapi's admin interface
• Efficient data fetching via Strapi's REST API

Key Integration Points

Here are some crucial aspects of how integrating Svelte with Strapi works:

1. Data Fetching: The project uses SvelteKit's load function to grab blog posts:

export const load = async ({ fetch }) => {
    const res = await fetch('http://localhost:1337/api/articles');
    const { data } = await res.json();

    return { articles: data };
};

2. Dynamic Routing: SvelteKit's dynamic routes create individual blog post pages:

export async function load({ params, fetch }) {
  const { slug } = params;
  const res = await fetch(`http://localhost:1337/api/articles?filters[slug][$eq]=${slug}`);
  const { data } = await res.json();
  return { article: data[0] };
}

3. Content Rendering: Svelte components display the Strapi content:

export const load = async ({ fetch }) => {
    const res = await fetch('http://localhost:1337/api/articles');
    const { data } = await res.json();

    return { articles: data };
};

Performance Optimization Techniques

The project uses several techniques to maintain performance:

1. Minimizing Re-renders: Svelte's reactive declarations update only what needs changing:

const formattedDate = $derived(new Date(article.publishedAt).toLocaleDateString());

2. Efficient Data Fetching: Strapi's query parameters help fetch only what's needed:

const res = await fetch('http://localhost:1337/api/articles?populate=author');

3. Caching Implementation: SvelteKit's caching reduces API calls:

export const csr = false;
export const prerender = true;

Handling Common Challenges

The project addresses several typical integration issues:

1. CORS Configuration: The Strapi back-end is set up to accept requests from the Svelte app:

// config/middlewares.js
module.exports = [
  'strapi::errors',
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'http:', 'https:'],
          'img-src': ["'self'", 'data:', 'blob:', 'http:', 'https:'],
          'media-src': ["'self'", 'data:', 'blob:', 'http:', 'https:'],
        },
      },
    },
  },
  // ... other middlewares
];

2. Authentication Flow: The project uses Strapi's JWT tokens for login, storing them in localStorage (note: for better security, storing JWTs in HttpOnly cookies is recommended):

async function login(email, password) {
  const response = await fetch('http://localhost:1337/api/auth/local', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ identifier: email, password }),
  });
  const data = await response.json();
  if (data.jwt) {
    localStorage.setItem('token', data.jwt);
    return true;
  }
  return false;
}

3. Environment-Specific Configuration: The project uses environment variables for different settings:

# .env
PUBLIC_STRAPI_URL=http://localhost:1337

# src/lib/api.js
const BASE_URL = import.meta.env.PUBLIC_STRAPI_URL;

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours, Monday through Friday, from 12:30 pm to 1:30 pm CST: Strapi Discord Open Office Hours.

For more details, visit the Strapi documentation and the Svelte documentation.

Frequently Asked Questions (FAQs)