Example Projects

Launch an example project with Express and Prismic in a few minutes.


Install the Prismic CLI

Install the Prismic CLI if you haven't already. Launch the terminal and run the following command:

  • npm
  • Yarn
Copy
npm install -global prismic-cli
Copy
yarn global add prismic-cli

Prismic CLI version

Make sure you're using the latest version of prismic-cli. You can check your version by running prismic --version in your terminal.

Choose a project

Choose one of the below projects to install. You can see a preview of the project and explore the source code on GitHub.

Blog website
BlogBlog website

This blog website is an excellent starting point to explore Express and Prismic. You can modify it as you like.

Business website
Multi-pageBusiness website

A website with multiple pages and a dynamic menu.

Multi-language website
Multi-languageMulti-language website

A website with a multilingual feature to target international users.

Run the theme command

To install a sample project, run the theme command. The theme command clones the project locally, installs all necessary dependencies, and creates a Prismic repository with Custom Types and pre-built content.

The command will ask you to give the name of your Prismic repository.

  • Blog
  • Business
  • Multi-language
Copy
prismic theme --theme-url https://github.com/prismicio/nodejs-blog --conf prismic-configuration.js
Copy
prismic theme --theme-url https://github.com/prismicio/nodejs-website --conf prismic-configuration.js
Copy
prismic theme --theme-url https://github.com/prismicio/nodejs-multi-language-site --conf config/prismic-configuration.js

Configuration for the multi-language example

For the multi-language project, you'll have a default locale configuration on your repo. This will be:

  • English (en-gb) as the master locale
  • And, French (fr-fr) as an additional locale

To add additional locales, navigate to Settings > Translations & locales in your repository. Learn more about how to add languages.

If you change the master locale, update your language settings in the config folder of the project. Open the site-config.js file and replace the defaultLanguage with the master language of your repository.

Verify repository name

Open prismic-configuration.js file and verify that the Prismic repo matches the URL of the Prismic repository created earlier. If the URL for your repository is https://my-awesome-repository.prismic.io, then you'll need to replace your-repo-name in the config file with my-awesome-repository.

Install nodemon

nodemon is a tool for restarting Node.js applications automatically on file changes. Launch the terminal, and install nodemon globally.

  • npm
  • Yarn
Copy
# Install nodemon globally on your machine
npm install nodemon --global
Copy
# Install nodemon globally on your machine
yarn global add nodemon

Run the website in development mode

In your terminal, navigate to the root of the project directory and run the following command to launch a local development server at http://localhost:3000:

Copy
nodemon

Now you can customize the code and content however you want, and deploy your project when you're ready.


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.