Sveltekit sample app

Setup the SDK

In this short guide we’ll setup a fully functioning sveltekit application with a queue that can be used to trigger background and cron jobs in a sveltekit application.

After going through this guide remember to:

• Read the more in-depth examples showcasing all the features of the SDK in the examples folder of the sdk repo.
• Checkout the Docs section of the website.
• Join the Discord server to get help and share feedback.

Bootstrap a sveltekit app

This step is optional, skip it if you already have a working sveltekit application

npm create svelte@latest qron-example
cd qron-example
npm install

Install dependencies

Follow the installation steps to install the sdk and its peer dependencies

Create an access token

An access token is not needed during local development, make sure to create one on the access tokens page before going to production

Setup

Create an environment file called .env at the root of your project adding the following two environment variables

QRON_TOKEN=<token>

# This is the default vite dev server url. 
# Make sure to change it to the url where your app is accessible
PUBLIC_URL=http://localhost:5173

• PUBLIC_URL is the url where you app is accessible over the web. This is used so Qron knows where to schedule your jobs
• QRON_TOKEN is an access token you created in the previous step.

Create a file named src/lib/qron.ts to initialize the sdk

import { createClient } from '@qron-run/sveltekit'
import { z } from 'zod'
import { env } from '$env/dynamic/public'

const { QRON_TOKEN, PUBLIC_URL } = env

export const { createQueue } = createClient({
  token: QRON_TOKEN,
  publicUrl: PUBLIC_URL
})

Now let’s create an example queue. This queue will simply print a message and commit the job without scheduling retries.

export const helloq = createQueue('helloq', async ({ commit, state }) => {
  console.log(`Hello ${state.name}! 🎉`) 
  return commit()
}, z.object({
  name: z.string()
}))

As a last setup step, we need to mount the queue we created in the previous step. Create a file named src/api/queues/[name]/+server.ts that imports the handler

import { createHandler } from '$lib/qron'
import { helloq } from '$lib/qron'

export const POST = createHandler(
  helloq,
  // ... other queues here
)

Done! Now it’s possible to start scheduling jobs

Scheduling

Let’s create a simple application showing how to schedule jobs in the hello queue that was created in the previous steps

Choose any +page.svelte and create the following form

<form action="?/hello" method="post">
  <div>
    <label for="name">Name</label>
    <input type="text" name="name" required placeholder="Who?" />
  </div>
  <button type="submit">Say Hi 👋</button>
</form>

Now let’s connect this form with their respective action inside +page.server.ts

The corresponding server action will be

import { helloq } from "$lib/qron";
import type { Actions, PageServerLoad } from "./$types";

export const actions: Actions = {
  async hello({ request }) {
    const form = await request.formData()
    const name = form.get('name')

    await helloq.asap().schedule({
      name: String(name),
    })
  }
}

Add this line to the scripts section of package.json and then start Qron in a separate terminal window.

"scripts": {
  "qron": "qron-cli start"
}

You are all set to schedule thousands of jobs ⏰