Developers / Express

Get Started with Express

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.

This guide will teach you how to create a web app with Express and Prismic.

If you want to jump right in, proceed to the Install step:

Install Prismic

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

Curious about pricing? Prismic has an unlimited free tier for projects with one user. To learn more, see our pricing page:

Prismic Pricing

Find the right plan for any size of project.

What technical skills do I need?

If you're a developer building a project with Prismic and Express: We recommend that you already have a basic knowledge of JavaScript, CSS, Express, Node, and API querying.

If a developer is setting up Prismic for you: You won't need any technical knowledge. Prismic is designed to be used by anyone.

Why should I use Prismic with Express?

Express is the most commonly used server-side rendering framework in the Node.js ecosystem. It makes your website dynamic and allows you to create website routes and middlewares. You can use many templating systems (such as Pug or EJS) with Express. However, Express doesn't have a default tool for managing content.

Content, the most important part of your website (the reason you have a website), deserves a tool. Prismic is the tool for your content. It enables dynamic content in your app. Prismic also formats content as slice components that map to your Express templates.

Moreover, Prismic adds some superpowers to your websites, like image optimization, content versioning, scheduling, and user roles.

Have a question or comment?

This documentation is still in beta. If you have ideas for how to improve it, we'd love to hear from you at the Prismic Community Forum.

Six steps to get started

This guide will walk you through six steps to deploying your website and creating content.

Here's what we'll go over:

1. Install Prismic

In this step, you'll add the Prismic Kits to your Express project. By the end of the page, you'll have a collection of Prismic utilities integrated in your project.

2. Fetch Data

Next, you'll learn how to use your new Prismic utilities to retrieve data from your Prismic repo. By the end of this step, you will know how to query the Prismic API.

3. Template Content

Once you have Prismic data in your project, you can display it on the page. By the end of this step, you will know how to template every type of content from the Prismic API.

4. Render slices

As you grow your app, you'll need a way to add components. That's where slices come in. On this page, you'll learn to render page sections with a SliceZone.

5. Deploy an App

In this step, you'll learn how to deploy your site with Heroku. By the end of this step, you will have a live website online.

6. Preview Drafts

With your site online, you'll need a way to preview draft changes and unpublished documents. By the end of this step, you will have previewing set up.

Resources

See example projects below. (Note: These examples use Pug templating. Examples with EJS are forthcoming.)

Example Projects

Launch pre-built Prismic–Express examples.

Next →

Install Prismic

Can't find what you're looking for?

Need technical Support? Spot an error in the documentation? Get in touch with us on our Community Forum.

Adjust cookie settings