Plone Remix Stack

Remix stack for Plone 6, the enterprise open-source CMS.

Handles multilanguage routing, navigation, and content rendering.

Supports Volto blocks with volto-slate text blocks.

Learn more about Remix Stacks.

npx create-remix --template raw-material/plone-remix

What's in the stack

i18n

• remix-i18next

Plone REST API TypeScript Client

• plone-restapi-client

Linting and formatting

• Prettier
• ESLint
• StyleLint
• Husky
• Commitlint

Release

• Commitlint
• Release-it

Misc

• Storybook
• GitHub Actions

Make it yours

In the package.json file, check release-it, eslint, stylelint and prettier configurations and change the values to match your project and your preferences.

Getting started

Use this template:

npx create-remix --template raw-material/plone-remix

Or clone this template:

npx degit raw-material/plone-remix

And setup your environment variables:

mv .env.example .env

Configuration

The stack is configured to work with a Plone site running on http://localhost:8080/Plone with the plone.restapi addon installed.

Check the .env file to change the configuration.

Setup your project settings in app/config.tsx as you do in Volto.

Development

From your terminal:

npm run dev

This starts your app in development mode, rebuilding assets on file changes.

Deployment

First, build your app for production:

npm run build

Then run the app in production mode:

npm start

Now you'll need to pick a host to deploy it to.

DIY

If you're familiar with deploying node applications, the built-in Remix app server is production-ready.

Make sure to deploy the output of remix build

• build/
• public/build/