Intro To Headless Wordpress With Sveltekit

Overview

The “Headless WordPress with SvelteKit” is a presentation given by Kellen Mace at the Svelte Summit conference in fall, 2021. This presentation introduces the concept of Headless WordPress, which decouples the front-end and back-end of a WordPress site. The SvelteKit app showcased in the presentation demonstrates how to utilize the WPGraphQL plugin to fetch data from a local WordPress site and integrate it with a Svelte front-end.

Features

• Headless WordPress: The app demonstrates the concept of decoupling the front-end and back-end of a WordPress site.
• SvelteKit: The app is built using SvelteKit, a framework for building web applications with Svelte.
• WPGraphQL Integration: The app utilizes the WPGraphQL plugin to fetch data from a local WordPress site’s GraphQL API.

Installation

Follow the steps below to install and run the SvelteKit app:

1. Set up a local WordPress site and install the WPGraphQL plugin.
2. Clone the repository to your local machine.
3. Navigate to the root directory of the project.
4. Create a .env.local file and define an environment variable as follows:

VITE_PUBLIC_WORDPRESS_API_URL=http://sveltesummit.local/graphql

Replace “http://sveltesummit.local” with the domain of your local WordPress site.

5. Run the following commands:

npm install
npm run dev

6. Open your browser and visit http://localhost:3000 to see the app in action.

Summary

The “Headless WordPress with SvelteKit” presentation introduces the concept of Headless WordPress and showcases a SvelteKit app that integrates with a local WordPress site using the WPGraphQL plugin. The app demonstrates how easy it is to fetch data from a WordPress site’s GraphQL API and leverage it in a Svelte front-end.