Skip to content

Latest commit

 

History

History

with-sveltekit

README.md

StepZen Example: with-sveltekit

Introduction

This project builds a GraphQL API that is consumed by a Svelte fronted created with SvelteKit. SvelteKit is a serverless-first Svelte metaframework for building web applications with filesystem-based routing.

Getting Started

You'll need to create a StepZen account first. Once you've got that set up, git clone this repository onto your machine and open the working directory:

git clone https://github.com/stepzen-dev/examples.git
cd examples/with-sveltekit

Before you can run this example, you need to have a free DEV.to Community API Key, which you can find on this page. This API Key is used to pull data from DEV.to that will be consumed by the example you're going to build.

You can copy the file stepzen/sample.config.yaml to a new stepzen/config.yaml file:

cp stepzen/sample.config.yaml stepzen/config.yaml

And add your DEV.to Community API Key to it:

# stepzen/config.yaml

configurationset:
  - configuration:
      name: devto_config
      devto_api_key: xxxx

Run StepZen

Open your terminal and install the StepZen CLI:

npm install -g stepzen

You need to login here using the command:

stepzen login

After you've installed the CLI and logged in, run:

stepzen start

A proxy of the GraphiQL playground becomes available at http://localhost/5001 (in example http://localhost:5001/api/with-sveltekit), which you can use to explore the GraphQL API. Also, the endpoint at which your GraphQL API is deployed gets logged in the terminal. You can query your GraphQL API from any application, browser, or IDE by providing the API Key linked to your account.

SvelteKit Setup

Include your StepZen endpoint and API keys in .env, by copying then file .env.sample to .env:

cp .env.sample .env

And add the endpoint and API Key for Stepzen:

STEPZEN_ENDPOINT=
STEPZEN_API_KEY=

Install Dependencies and Start Development Server

Install the dependencies using npm or Yarn:

npm i
npm run dev

Open localhost:3000 to see the project.

Learn More

You can learn more in the StepZen documentation. Questions? Head over to Discord or GitHub Discussions to ask questions.