2. Quick Start¶
2.1. Using the hands on code repository¶
You can find the repository with the code that we will be using during the training in:
This repo has the starting stage of the training in the
Get it like this:
$ git clone https://github.com/collective/volto-hands-on-training $ cd volto-hands-on-training
There’s a branch with the name of each chapter. In case you get lost at any point, you can easily fast forward (or rewind) to get the complete code for each chapter. You can also start fresh for each new chapter.
The repo has an
api folder, where you can find a preconfigured buildout that will build Plone 5.2 along with the package
Building it is an easy way to get a Volto site running.
To start your own project you can use https://github.com/plone/create-volto-app to bootstrap your package. Further reading on full Plone/Volto setup can be found here: https://training.plone.org/5/volto/bootstrap.html
2.2. Build environments¶
We need to build two environments.
Start two terminal sessions, one for each environment, Plone and Yarn, and a third session to issue Git and other shell commands.
In each terminal session you should be in the folder
2.2.1. Plone environment¶
To build your Volto site, use the
$ make build-backend
It assumes that you have
Python 3 in your path, and that you have all the necessary system dependencies for building Plone already installed on your machine.
If you have problems building the Plone backend, use a Docker container to run it instead:
$ make start-backend-docker
2.2.2. Install Volto dependencies¶
Install the Volto dependencies on your machine.
nvm to ensure you are using the required
$ nvm use 10.15.1
2.2.3. Yarn environment¶
The repo also has a Volto project ready to build in the root.
To build the yarn environment, you can either use:
$ make build-frontend
2.2.4. Executing environments¶
In your Plone environment, use this command to run Plone:
$ make start-backend
Once Plone is listening on port 8080, use this command to run Volto in your yarn environment in another terminal or shell:
$ yarn start
2.3. Volto source code¶
When developing Volto you will find yourself looking quite often at the Volto source code to see how things are done, the code syntax, and how to clone or override components.
For convenience, a symlink to a copy of the Volto code is set up inside
node_modules when you run
yarn in the hands-on repository.
You will find this copy of Volto in the
2.4. Recommended plugins¶
No matter which integrated development environment (IDE) you use, you should also install these plugins:
prettier-stylelint (for VSCode)