Example Projects

This article will walk you through the best way to using Prismic with Node.js applications. The example projects provide a collection of pre-built sample content, Custom Types, source code, and more. It will guide you on how to build an application and explore various features and capabilities of Prismic.


Install the Prismic CLI

The first thing is to install the Prismic CLI (command line interface) if you haven't already. Launch the terminal (command prompt or similar on Windows) and run the following command.

  • npm
  • Yarn
Copy
npm install -g prismic-cli
Copy
yarn install -g prismic-cli

Sometimes it's possible that the above command doesn't work because of permission levels on your machine.

If that's the case for you, run the following sudo command:

  • npm
  • Yarn
Copy
sudo npm install -g prismic-cli
Copy
sudo 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 command in your terminal.


Choose a project

You can choose any of the available sample projects. You can also see a preview of the project to check how the application works.

Prismic 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. It will ask you to give the name of your Prismic repository and the local folder to initialize your project.

Blog website

This blog website is an excellent starting point to explore Node.js and Prismic. Modify and adapt it to your liking.

Run the following Prismic theme command in the terminal to install this project locally:

Copy
prismic theme --theme-url https://github.com/prismicio/nodejs-blog --conf prismic-configuration.js

Business website

A Business website with multiple pages and a dynamic menu. This project provides all the code you need for a website with a homepage, information pages, and navigation

Run the following Prismic theme command in the terminal to install this project locally:

Copy
prismic theme --theme-url https://github.com/prismicio/nodejs-website --conf prismic-configuration.js

Multi-language website

A website with a multilingual feature to targeting multiple audiences.

Run the following Prismic theme command in the terminal to install this project locally:

Copy
prismic theme --theme-url https://github.com/prismicio/nodejs-multi-language-site --conf config/prismic-configuration.js

Multi-language configuration

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 the second locale

And, if you want to add additional locales, go to your repository, navigate to Settings/Translations & locales and add another language. Learn about more how to add languages to Prismic repository.

🌐 Can I change the master locale?

To change the master locale you need to make a request to the activations team here.

If you add a new 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 the prismic repo matches the URL of the Prismic repository created earlier in this article. To find this, go to your Prismic dashboard, then to your repository.

If the URL for your repository is https://my-awesome-repository.prismic.io, then you'll need to replace your-repo-name with my-awesome-repository.


Install nodemon

nodemon is a tool that starts develop Node.js applications automatically when file changes in the directory are detected. Launch the terminal, go to your project location by cd name-of-your-project and install nodemon (you can also install nodemon globally on your machine)

  • npm
  • Yarn
Copy
# Install nodemon
npm install nodemon

# Install nodemon globally on your machine
npm install -g nodemon
Copy
# Install nodemon
yarn add nodemon 

# Install nodemon globally on your machine
yarn global add nodemon

Run the website in development mode

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.


Related articles


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.