Developers / React / Set up

Set up Prismic

This technology has no Slice Machine integration

This framework has no integration with Prismic's developer tool, Slice Machine. You can still build a Prismic website with this technology by using Prismic's Legacy Builder. However, if you're starting a new project with Prismic, we strongly recommend using a technology that integrates with Slice Machine: Next.js or Nuxt.

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

Required knowledge

This guide assumes you have 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 React, but a basic understanding of the library would be helpful. For an introduction, we recommend React'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.js 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.js or npm, here are some installation guides we recommend:

Preparation

You will need a React project initialized. If you don't have one, check out the Create React App or Vite 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:

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:

Install Prismic packages

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

  • npm
  • Yarn
npm
Copy
npm install @prismicio/react @prismicio/client
Yarn
Copy
yarn add @prismicio/react @prismicio/client

Further Learning: What do these dependencies do?

@prismicio/react helps with displaying content from Prismic. @prismicio/client helps with fetching content from the Prismic API.

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:

Copy
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.

Copy
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'

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

Now run:

Copy
npm start

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

← Previous

Overview

Next →

Fetch Data

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.