Start a Prismic project from scratch with React.js

Prismic makes it easy to get started on a new React.js project by providing a specific React starter project.

Install the Prismic command line interface

First step is to install the Prismic CLI (if you don't already have it). Launch the terminal (command prompt or similar on Windows) and run the following command.

npm install -g prismic-cli

Sometimes it's possible that this command doesn't work. If that's the case for you, try executing a sudo command:

sudo npm install -g prismic-cli

Install the React.js starter project

Navigate to the location you want to create your Prismic project and run the following command to get started.

prismic new

This will launch the installer. It will prompt you to name your Prismic repository and local folder. It will also give you a selection for your technology, simply select React. You may need to enter the email and password for your Prismic account, but once you are done with that, the CLI will set everything up.

The command line tool will automatically create your new Prismic repository, add the project files, and download the project dependencies.

Launching your local server

Now you can launch your local server. Navigate to the root of your newly created project and run the following command.

npm start

You can now open your browser to http://localhost:3000/. You should see a help page load. This page is filled with helpful information on how to query your api and start building pages for your site.

Pagination of API Results

When querying a Prismic repository, your results will be paginated. By default, there are 20 documents per page in the results. You can read more about how to manipulate the pagination in the Pagination for Results page.

And your Prismic journey begins!

Now you're all set to start building your website with Prismic content management. Here are the next steps you need to take.

Define your Custom Types

First you'll need to model your pages, posts, events, etc. into your Custom Types. Refer to our documentation to learn more about constructing your Custom Types using our easy drag-n-drop builder.

Query your documents

After you've created and published some documents in your repository, you'll be able to query the API to retrieve your content. We provide explanations and plenty of examples of queries in the documentation. Start by learning more on the How to Query the API page.

Integrate content into your templates

The last step is to integrate the content into your templates. Check out the Rendering documentation to learn more.