Integrating Prismic into Your Existing SvelteKit Project

Integrating Prismic into Your Existing SvelteKit Project - sabbirz.com

Install prismic with existing sveltekit project

sveltekit
prismic
  1. Create Sveltekit Project
    npm create svelte@latest .

    This will create sveltekit project in existing directory

  2. Create Prismic repository using the prismic website Prismic Website Prismic | Create project

    Prismic | Create New Repository

  3. Create Slice Machine.Prismic | Get started with slice machine

    Prismic | Get started with slice machine

  4. Click on “I already have a project”. Prismic | Alread have a project
  5. Prismic will guide you on how to connect to its platform.Prismic | Setup slice machine

    Prismic | Set up slice machine

    npx @slicemachine/init@latest --repository [repositoryName]

    If you know the repository name

    or
    npx @slicemachine/init@latest

    If you don't know your repository name

    5a. Prismic will prompt you to press any key to initiate a browser-based login5b. Then, Prismic will prompt you to run the Slice Machine; press 'Y' to proceed.5c. Now, Prismic will open the Slice Machine tab at localhost:9999

    If you want to run the slice machine manually, run

    npm run slicemachine
  6. Let's create a PAGE (Single-use Component) In my case I'm using a template from prismicOn the top right, press Page Snippet Follow the instructions
  7. Open prismic on the browser

    https://[repositoryName].prismic.io/documents

    Create your first content and publish the content