Custom type builder
Model your content in the blink of an eye
Scheduling & previews
Manage, schedule and preview your content releases
Full revision history
Never lose a change thanks to revision history
Multi-language
Localize your content and succeed globally
Dynamic layouts
Create dynamic layouts with reusable custom components
Integration fields
Feature products in your website & campaign pages by connecting prismic to your existing catalog
Flexible Query API
A flexible API enabling any design on any device
Discover
Quick start guide
Set up a website with Prismic and Node.js
API reference
How to fetch content from Prismic
User guides
How to create and manage content in the Writing Room
Examples
Sample projects built with Prismic
Best practices
Hands-on step-by-step implementation guides
What is a headless CMS
500-word intro without nonsense
Content modeling tips
Guides & best practices for a good CMS UX
A repository is where your website's content will live. Simply create one choosing a repository name and a plan. We've got a variety of plans including our favorite, Free!
To get started with your website, download the Prismic PHP Quickstart project.
Unzip the downloaded file, then open the PHP Quickstart project folder in your favorite code editor.
Open config.php and assign the API endpoint for your Prismic repository to the PRISMIC_URL constant:
// In config.php define('PRISMIC_URL', 'https://your-repo-name.prismic.io/api/v2');
Fire up a terminal (command prompt or similar on Windows), point it to your project location and run the following commands:
Make sure that you have Composer installed globally on your computer. You can either follow the instructions on the Composer website or install it with Brew.
composer install ./serve.sh
You can now launch your browser to http://localhost:8000, you should see a static HTML page.
Next let's see how to create a page in your website filled with content retrieved from Prismic!
To get started with your website, install the command line tool. It allows you to quickly start JavaScript projects that access your Prismic backend.
If you don't already have them, make sure to first install Node.js and npm on your machine.
Fire up a 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
Since every web developer speaks some JavaScript, we chose JavaScript and Node.js for the purpose of this tutorial. But Prismic content management approach is API based, and you're free to use PHP, JavaScript, Ruby or any other programming language or framework.
The prismic command is now available globally. We will now use that tool to launch this tutorial project. In the terminal, navigate to the location you want to launch your project and run the following command.
prismic init your-repo-name --template Quickstart-NodeJS
The `init` command will initialize a Node.js project that is configured to connect with the repository you just created!
The command will end by displaying a link to your content repository backend in the form of https://your-repo-name.prismic.io.
Point your terminal to the folder that was just created and run:
# Navigate to the newly created folder and run npm run dev
You can now launch your browser to http://localhost:3000, you should see a static HTML page.
We will create a page containing a title, a paragraph and an image. Let's create a Custom Type in Prismic with the corresponding fields. We'll add an additional UID (unique identifier) field for querying the page.
Go to the repository backend you've just created (at https://your-repo-name.prismic.io). Then navigate to the "Custom Types" section (icon on the left navbar) and create a new Repeatable Type, for this tutorial let's name it "Page".
Before clicking on button "Create new custom type", make sure that the system automatically assigns this an API ID of "page", because we'll use it later for querying the page.
Once the "Page" Custom Type is created, we have to define how we want to model it, that is to say a document containing a UID, a title, a paragraph and an image. Click on "JSON editor" (right sidebar) and paste the following JSON data into the Custom Type JSON editor. When you're done, hit "Save".
{ "Main" : { "uid" : { "type" : "UID", "config" : { "placeholder" : "UID" } }, "title" : { "type" : "StructuredText", "config" : { "single" : "heading1", "placeholder" : "Title..." } }, "description" : { "type" : "StructuredText", "config" : { "multi" : "paragraph,em,strong,hyperlink", "placeholder" : "Description..." } }, "image" : { "type" : "Image" } } }
Custom Types are the structure, model, and configuration for your content. They allow you to define the needed fields for your content.
There are two kinds of Custom Type: Repeatable Types and Single Types. Repeatable Types are for content that you will have more than one of, such as articles, products, places, authors, etc. Single Types are for content that you only need one instance of, such as a homepage or a privacy policy page.
The "Page" Custom Type you've just created contains a title, a paragraph, an image and a UID (unique identifier). Now it is time to fill in your first page!
Create a new "Page" content in your repository: go to "Content" and hit "New".
Fill the corresponding fields. Note the value you filled in the UID field, because it will be a part of the page URL, for that purpose let's use "quickstart".
When you're done, hit "Save" then "Publish".
Now that you've created your "quickstart" page in your Prismic repository, go back to your local code. Let's make an API call to retrieve the page content. For that, we will use the specified UID.
Once we've retrieved the page, we will render the template providing it with its content.
Add the following route to your app/app.php file:
Add the following route to your app.js file:
// In app.js, in place of the block starting with "app.route('/')", put the following: app.route('/').get(function(req, res) { req.prismic.api.getByUID('page', 'quickstart').then((document) => { res.render('index', { document }); }); });
// In app/app.php, in place of the block starting with "$app->get('/',", put the following: $app->get('/', function ($request, $response, $args) use ($app, $prismic) { // Query the API $api = $prismic->get_api(); $document = $api->getByUID('page', 'quickstart'); // Render the page render($app, 'home', array('document' => $document)); });
Now all that's left to be done is replace the static non-managed content in the template with content we fetched from the API. In your app/views/home.php file replace everything with the following:
Now all that's left to be done is replace the static non-managed content in the template with content we fetched from the API. In your views/index.pug file:
extends ./layout.pug block body div.welcome img(src=document.data.image.url, class='star') != PrismicDOM.RichText.asHtml(document.data.title, ctx.linkResolver) != PrismicDOM.RichText.asHtml(document.data.description, ctx.linkResolver)
<?php use Prismic\Dom\RichText; $document = $WPGLOBAL['document']; ?> <?php include_once 'header.php'; ?> <div class="welcome"> <img src="<?= $document->data->image->url ?>" class="star"/> <h1><?= RichText::asText($document->data->title) ?></h1> <div> <?= RichText::asHtml($document->data->description) ?> </div> </div> <?php include_once 'footer.php'; ?>
Refresh the page http://localhost:8000 and you should see your content! You've officially created a page that pulls content from Prismic.
In your browser go to http://localhost:3000 and you're done! You've officially created a page that pulls content from Prismic.
Obviously, since this approach is based on API, you're completely free to choose a different framework or template engine. It's all up to you!
Sit back and enjoy the result.
Basically in these few steps you've added content management to your page and thanks to the Prismic Writing Room, you'll have:
- Full versioning of your content- A nice rich editor to create and edit your content- Collaboration with other users you choose to add to your repository- Performance and scalability for your content using a Content Delivery Network around the world