3. Bootstrapping A Volto Project

3.1. Installing Plone

On order to run Volto you need a backend. This can be either Plone or Guillotina. For this course we will use Plone, you can download Plone at https://plone.org/download. We need plone.restapi, so make sure you have that installed and configured correctly. For an example look into the api folder of the Volto repostory: https://github.com/plone/volto/tree/master/api

Warning

Make sure you set a CORS policy or things tend to magically go wrong. See https://github.com/plone/volto/blob/master/api/buildout.cfg for an example.

3.2. Installing Dependencies

First step is to install the correct Node version using nvm:

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

Then you can install the latest LTS version of node:

$ nvm install v8.11.3

We use the package manager yarn, to install do:

$ npm install -g yarn

And add the create-volto-app package:

$ yarn global add @plone/create-volto-app

3.3. Bootstrapping A Project

To create a new volto project type the following:

$ create-volto-app my-volto-app

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

my-volto-app
├── README.md
├── node_modules
├── package.json
├── .babelrc
├── .eslintrc
├── .gitignore
├── .yarnrc
├── locales
├── public
│   ├── favicon.ico
│   └── robots.txt
├── theme
│   └── theme.config
└── src
    ├── actions
    ├── components
    ├── constants
    ├── customizations
    ├── helpers
    ├── reducers
    ├── client.js
    ├── config.js
    ├── index.js
    └── routes.js

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

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