Set up Prismic

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

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:

Create Repository

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

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

• Learn how to create and edit documents in Prismic
• Learn how to model your content in Prismic

Install Prismic packages

Run this command in your terminal to install the Prismic React integration and client library:

npm install @prismicio/react @prismicio/client

Create an API client

A Prismic API client is an object containing methods for querying the Prismic API.

Create a conveniently-located file called prismic.js. If you’re using Create React App or Vite, we recommend placing this file inside /src so you can access it from your components.

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

import * as prismic from "@prismicio/client";

// Fill in your repository name
export const repositoryName = "your-repo-name";

export const client = prismic.createClient(repositoryName, {
  // If your repository is private, add an access token
  accessToken: "",

  // 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 routing in your project.
  //
  // If you are not using a router in your project, you can change this
  // to an empty array or remove the option entirely.
  routes: [
    {
      type: "homepage",
      path: "/",
    },
  ],
});

You will need to make the following changes:

• Update the repositoryName to your own.
• Add an access token if you have one.
• Update the routes to match the custom types in your repository. If your app does not use a router, you can omit the routes option entirely.

Register the API client

To use the API client in your app, you must register it in your app’s entry point. In Create React App, this is in /src/index.js. In Vite, this is in /src/main.js.

Add <PrismicProvider> around <App /> and provide your client, like in the following example. Update the path to the client if you gave it a name other than /src/prismic.js.

import React from "react";
import ReactDOM from "react-dom";

import "./index.css";
import App from "./App";

import { PrismicProvider } from "@prismicio/react";
import { client } from "./prismic";

const root = ReactDOM.createRoot(
  document.getElementById("root"),
);
root.render(
  <React.StrictMode>
    <PrismicProvider client={client}>
      <App />
    </PrismicProvider>
  </React.StrictMode>,
);

Now run:

npm start

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