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:
https://github.com/collective/volto-hands-on-training
This repo has the starting stage of the training in the master
branch.
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 kitconcept.voltodemo
.
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 volto-hands-on-training
.
2.2.1. Plone environment¶
To build your Volto site, use the make
command:
$ make build-backend
Note
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.
Note
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.
Then use nvm
to ensure you are using the required node
version:
$ 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
or:
$ yarn
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 omelette
folder.
2.4. Recommended plugins¶
No matter which integrated development environment (IDE) you use, you should also install these plugins:
Prettier
ESlint
prettier-stylelint (for VSCode)