Start a prismic.io project from scratch using React.js
prismic.io makes it easy to get started on a new React.js project by providing a specific React starter project kit. Simply define, edit and publish your content in a prismic.io content repository, use the starter kit to query and fetch content from our API, and integrate the content into your components.
This page walks you through getting up and running using the React starter project kit.
There are two ways to get your project up and running. The first (and easier of the two) is to get your repository and project created using the prismic.io command line interface. The second (for those interested in the full process) is to go through those steps manually.
Both processes are explained below.
Setting up your project using the command line interface
To get your prismic.io project up and running faster, we have a Command Line Interface (CLI) that helps create your prismic.io content repository and download the project files for the React.js starter project.
First step is to install the prismic.io 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
Navigate to the location you want to create your prismic.io project and run the following command to get started.
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 you prismic.io email and password, but once you are done with that, the CLI will set everything up.
After you've gone through the prompt series, the command line tool will automatically create your new prismic.io repository, add the project files, download the project dependencies, and you are ready to go!
At this point, you can skip down the page to "Launching your local server" to continue.
Setting up your project manually
If you don't want to use the prismic.io CLI you can go through the following steps to manually set up your project. You don’t need to do these if you have already gone through the steps outlined in "Setting up your project using the command line interface".
Create a content repository
A content repository is where you define, edit and publish content.
Download the Node.js starter kit
The Node.js starter kit allows you to query and fetch content from your content repository and integrate it into your template.
Unzip the downloaded project files into a your desired location for your project.
Configure the API Endpoint
Replace the API Endpoint url in your prismic-configuration.js file with your repo name.
// In prismic-configuration.js apiEndpoint: 'https://your-repo-name.prismic.io/api/v2',
Launching your local server
At this point you should have set up your project either using the prismic.io CLI or manually. Now we will launch the local server so you can start developing your website.
Fire up a terminal (command prompt or similar on Windows), point it to your project location and run!
If you didn't install the project using the command line interface, then you will need to install the dependencies for the project. Simply run the following command:
Next you can launch your local server.
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.
And your prismic.io journey begins!
Now you're all set to start building your website with prismic.io 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. Helper functions are provided for each content field type to make integration as easy as possible. Check out the Templating documentation to learn more.