Install Prismic

By the end of this page, you will have a Svelte project set up with basic utilities from Prismic.

Required knowledge

This guide assumes you have a basic knowledge of HTML, CSS, and JavaScript. It also assumes you know how to use the terminal.

This guide does not assume any prior knowledge of Svelte, but a basic understanding of the framework would be helpful. For an introduction, we recommend Svelte's introductory tutorial.

Software requirements

Before you get started, you will need Node.js and a package manager like npm or Yarn installed globally on your system.

To make sure you have Node installed, run the following command in your terminal:

node --version

To make sure you have npm installed, run the following command in your terminal:

npm --version

If you don't have Node or npm, here are some installation guides we recommend:

Preparation

You will need a Svelte or SvelteKit project initialized. If you don't have one, check out the Svelte or SvelteKit docs for instructions to get started.

Create a repository in Prismic

This is where you will create and manage your content. If you don't already have one, create a repo:

Then, add some content to your repo, so that you have something to template in your Svelte project.

Need some tips on how to get started with your repo? Check out our guides to creating content:

Install Prismic packages

Run this command in your terminal to Install Prismic dependencies:

Copy
npm install --save-dev @prismicio/helpers @prismicio/client

Further Learning: What do these dependencies do?

@prismicio/client helps with querying the Prismic API and @prismicio/helpers provides a set of helpers to retrieve the content.

Create an API client

An API client is a collection of methods for querying the Prismic API.

Create a conveniently-located file called prismicClient.js. If you're in SvelteKit, we recommend placing this file inside /src/lib, so you can access it from your components with the $lib/prismicClient alias.

Open prismicClient.js and paste in the following code, filling in your repository name, optional access token, and routes:

Copy
import * as prismic from '@prismicio/client'

const repoName = `your-repo-name` // Fill in your repository name
const accessToken = `` // If your repository is private, add an access token

// This defines how you will structure URL paths in your project.
// Update the types to match the Custom Types in your project, and edit
// the paths to match the folder-based routing in your project.
const routes = [
  {
    type: 'page',
    path: '/:uid',
  },
]

const createClient = (fetch) => {
  const clientOptions = {
    fetch,
    accessToken,
    routes,
  }
  const client = prismic.createClient(repoName, clientOptions)
  return client
}

export default createClient

You will need to make the following changes:

  • Update the repoName to your own
  • Add an access token if you have one
  • Update the routes to match the Custom Types in your repository (learn more about Route Resolving)

Then open your homepage component (By default src/App.svelte in a plain Svelte project or src/routes/index.svelte in a SvelteKit project) and paste in the code below. Update the path to the client with either a relative path for Svelte or $lib/prismicClient for SvelteKit.

Copy
<script context="module">
  import createClient from 'path/to/client';
  import  * as prismicH from "@prismicio/helpers";
  
  const client = createClient(fetch)
  const prismicQuery = client.getFirst()
</script>

{#await prismicQuery}
  <p>Loading...</p>
{:then prismicResponse}
  <h1>{prismicH.asText(prismicResponse.data.title)}</h1>
  {@html prismicH.asHTML(prismicResponse.data.description)}
{:catch error}
  <pre>{error.message}</pre>
{/await}

Now, run:

Copy
npm run dev

The terminal output should show a server running. When you open it, you should see the start of your site.


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.