Slice Machine now supports Prismic environments

Prismic environments (available starting on Platinum plans) allow you to clone your entire repository for development. With the release of version 1.21, Slice Machine now supports environments, meaning you can switch between your production and development repositories using a toggle in the Slice Machine interface.

Environments will allow large teams to safely and smoothly create new models in Prismic, avoiding conflicts and collaboration issues.

Configuration

To make environments work in Slice Machine, follow these steps:

  • Update slice-machine-ui
  • Update your adapter
  • Update your API configuration
  • Update your .gitignore

Here are the steps for each framework:

Next.js

Update packages:

npm i -D slice-machine-ui@latest @slicemachine/adapter-next@latest

Update prismicio.js:

- export const repositoryName = config.repositoryName;
+ export const repositoryName =
+   process.env.NEXT_PUBLIC_PRISMIC_ENVIRONMENT || config.repositoryName;

Update .gitignore:

+ .env.local

Nuxt

Update packages (Nuxt 2):

npm i -D slice-machine-ui@latest @slicemachine/adapter-nuxt2@latest

Update packages (Nuxt 3):

npm i -D slice-machine-ui@latest @slicemachine/adapter-nuxt@latest

In Nuxt, you don't need to update your API config. @nuxtjs/prismic will handle the config automatically.

Update .gitignore:

+ .env

SvelteKit

Update packages:

npm i -D slice-machine-ui@latest @slicemachine/adapter-next@latest

Update prismicio.js:

- export const repositoryName = config.repositoryName;
+ export const repositoryName =
+   import.meta.env.VITE_PRISMIC_ENVIRONMENT || config.repositoryName;

Update your .gitignore file:

+ .env.local

How it works

Behind the scenes, Slice Machine will update your environment variables to the currently-selected Prismic environment. You don't need to edit your environment variables (though, as previously stated, you must ensure that they are .gitignore'd so you don't accidentally deploy your staging environment).

Learn more in the environments documentation.