3. Bootstrapping a Volto project#

Note

It is recommended to work on Linux or macOS.

3.1. Installing Plone backend#

In order to run Volto you need a backend. This can be either Plone or Guillotina. For this course we will use Plone. Because we will focus on the frontend, for simplicity we will install a backend in a Docker container. The installation of a Plone backend in a Docker container is described in Containers.

In short, create a directory named backend, and run the following command.

docker run --name plone6-backend -e SITE=Plone -e CORS_ALLOW_ORIGIN='*' -d -p 8080:8080 plone/plone-backend:6.0

This installs and starts a Plone backend on port 8080.

3.2. Installing prerequisites for Volto (Plone frontend)#

First Install nvm (NodeJS version manager).

Install Yarn.

Install @plone/generator-volto:

npm install -g yo @plone/generator-volto

3.3. Create a Volto project#

To create a new volto project type the following:

yo @plone/volto

Follow the prompts' questions, providing my-volto-app as the project name.

Warning

Do not start your project name with volto, as it will cause plone/generator-volto to fail.

It will create a folder called my-volto-app inside the current folder with the following structure:

my-volto-app/
├── babel.config.js
├── cypress
│   ├── fixtures
│   ├── .gitkeep
│   ├── plugins
│   ├── support
│   └── tests
├── cypress.config.js
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── jsconfig.json
├── locales
├── Makefile
├── mrs.developer.json
├── node_modules
├── omelette -> node_modules/@plone/volto/
├── package.json
├── patches
├── .prettierignore
├── public
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── icon.svg
│   ├── index.html.spa
│   ├── robots.txt
│   └── site.webmanifest
├── razzle.config.js
├── README.md
├── src
│   ├── actions
│   ├── addons
│   ├── client.js
│   ├── components
│   ├── config.js
│   ├── constants
│   ├── customizations
│   ├── helpers
│   ├── index.js
│   ├── reducers
│   ├── routes.js
│   └── theme.js
├── .storybook
├── theme
│   └── theme.config
├── .yarn
├── yarn.lock
└── .yarnrc.yml

3.4. Running the project#

To run the project you can type:

cd my-volto-app
yarn start

This will start the server on port 3000. You can change the port and/or hostname for the frontend by specifying PORT and/or HOST:

HOST=my_hostname PORT=1234 yarn start

Per default the Plone backend runs on port 8080. If your backend runs on a different port and/or uses a different hostname you can specify the full url:

RAZZLE_API_PATH=http://localhost:55001/plone yarn start