Effective Volto

Effective Volto is intended as a training to learn proven practices of Plone 6 Volto frontend development. It's both an online course and a sketch for an on-the-spot training.

The goal of this training is to provide a comprehensive overview of Volto to developers that still don’t have enough confidence to start a client project with Volto. Because of the huge amount of knowledge and variety of the content covered, it is less a "hands-on training" and more of a "show and tell". We present concepts, explain how things work and leave it to the participants to put all this in practice.

The training will cover essential concepts, as well as good practices and notions of how Volto works under the hood. Tips and tricks will be also covered, providing a good amount of insights for those who want to learn more beyond the Volto basics.

This training is intended for an intermediate audience that already has some contact with Volto and tried it out, or has a decent amount of experience with it. Even experienced Volto developers will find this training useful, as less known areas of Volto are exposed.

Effective Volto

• About Effective Volto
  • Trainers
  • License
  • Using the documentation for a training
  • Contributing
• Getting Started
  • 1. Bootstrapping a full Plone 6 project
    • 1.1. Requirements
    • 1.2. Project Generation Options
  • 2. Bootstrapping an Add-on
    • 2.1. Use the generator
    • 2.2. Developing in isolation using a full dockerized project approach
  • 3. Developer roadmap
    • 3.1. The foundation
    • 3.2. Basic Volto development
    • 3.3. Normal, everyday Volto development
    • 3.4. Advanced
• Architecture
  • 1. Volto Client - Server duality
    • 1.1. The Plone backend
    • 1.2. Volto Nodejs server
    • 1.3. Volto - the SPA client bundle
  • 2. Razzle
  • 3. Webpack
  • 4. Babel
  • 5. Webpack loaders
    • 5.1. Add your own Webpack loader
  • 6. Bootstrap Volto
    • 6.1. Install nvm (Node.js version manager)
    • 6.2. Yarn (NodeJS package manager)
    • 6.3. Use or Install Docker
    • 6.4. Run a Volto ready Plone Docker container
    • 6.5. Install Volto
    • 6.6. Build the production bundle
  • 7. Inside Volto
    • 7.1. Volto codebase
    • 7.2. Deep dive into Volto
  • 8. Volto Blocks
    • 8.1. Volto Blocks engine
  • 9. Configuration Registry
  • 10. Redux
    • 10.1. Alternatives to Redux
  • 11. CORS
  • 12. Multilingual
    • 12.1. How to enable
    • 12.2. Make code i18n aware
• Backend
  • 1. Plone REST API endpoints
  • 2. Writing an endpoint
  • 3. Writing a serializer or a deserializer
  • 4. Writing a content expansion endpoint
    • 4.1. Make Volto aware of it
  • 5. Writing a block transform
    • 5.1. Generic block transformers and smart fields
  • 6. Block field contribute to searchableText
    • 6.1. Client side solution
    • 6.2. Server side solution
  • 7. Link integrity for blocks
  • 8. Writing Express middleware
• Add-ons
  • 1. What is a Volto add-on
  • 2. Bootstrap an add-on
  • 3. How does a Volto add-on work?
    • 3.1. Loading a Volto Add-on in a project
    • 3.2. Add-on dependencies
  • 4. Add a third-party released Volto Add-on in your project
  • 5. Configure an unreleased add-on from an existing repository
    • 5.1. Add mrs-developer dependency and related script
    • 5.2. mrs.developer.json
    • 5.3. tsconfig.json / jsconfig.json
  • 6. Volto views
    • 6.1. Router views
    • 6.2. External routes
  • 7. Create a block using BlockDataForm
    • 7.1. Using a blockSchema and the dataAdapter pattern
  • 8. Blocks Layout
  • 9. Block Extensions
  • 10. Block Styling
    • 10.1. Enabling Style Wrapper in a block
    • 10.2. Extending the default styles field in Styling fieldset
    • 10.3. The styles field
    • 10.4. Using className in your block view component
    • 10.5. styleClassNameConverters
    • 10.6. styleClassNameExtenders
    • 10.7. Main edit wrapper class injection
  • 11. Add-on dependencies
  • 12. Add-on and project configuration pipeline
    • 12.1. All-in with add-on approach
    • 12.2. Define your add-ons programatically
  • 13. Create a theme add-on
    • 13.1. Using your own theming escape hatch
    • 13.2. Modify a custom theme from another add-on
  • 14. Extending Semantic UI
  • 15. Create a custom Listing block variation
  • 16. Integrate with Volto’s asyncConnect for SSR
  • 17. Add-on Internationalization
    • 17.1. Override translations
  • 18. Extend Webpack setup from an add-on with razzle.extend.js
• Testing
  • 1. Acceptance testing
    • 1.1. How to run acceptance tests locally (during development)
    • 1.2. Helper commands
    • 1.3. Cypress component testing
  • 2. Jest
    • 2.1. Standard setup
    • 2.2. Config for projects and for add-ons
    • 2.3. Transforms
    • 2.4. Modulemapper
    • 2.5. Caveats
  • 3. Unit testing
  • 4. Storybook
  • 5. Testing add-ons
    • 5.1. Jest configuration override
    • 5.2. Testing add-ons in isolation
• Deployment
  • 1. Recommended deployment schema (aka Seamless mode)
    • 1.1. nginx example config for seamless mode deployments
    • 1.2. Feature history
    • 1.3. Challenges and goals
    • 1.4. Features part of seamless mode
    • 1.5. Advantages of the seamless mode
  • 2. Requisites for using Seamless mode
  • 3. [DEPRECATED] Old (pre-seamless mode) deployment
    • 3.1. Reverse proxies
  • 4. Docker
    • 4.1. Simple example
    • 4.2. Full with reverse proxy
    • 4.3. Recommended setup
  • 5. release-it
    • 5.1. Basic configuration
    • 5.2. Using it along with towncrier in add-ons
• Development tools
  • 1. How to setup your development environment using environment variables
    • 1.1. Internal Proxy is enabled (to avoid dealing with CORS)
    • 1.2. Debug an external site (provided you have access to it)
    • 1.3. Disabling the internal proxy
  • 2. Environment variables
    • 2.1. Runtime environment variables
    • 2.2. Environment variables reference
    • 2.3. Use add-ons via the ADDONS environment variable
    • 2.4. BUILD_DIR
  • 3. Icons
    • 3.1. Custom icons
  • 4. Husky and lint-staged
  • 5. Shortcuts (name aliases)
    • 5.1. @root / @package
    • 5.2. volto-themes
    • 5.3. volto-original
  • 6. Internationalization
    • 6.1. Broad overview
    • 6.2. Creating i18n Strings
    • 6.3. Extracting i18n Strings
    • 6.4. Overriding i18n messages
    • 6.5. Translating add-ons
    • 6.6. Contributing translations for an unsupported language
  • 7. Lazyloading components, injectLazyLibs for libraries
    • 7.1. Lazy load a component
    • 7.2. Lazy-loading libraries
  • 8. critical.css
  • 9. Bundle analyzing
  • 10. Component Registry
    • 10.1. Registering components by name using config.registerComponent
    • 10.2. Retrieving a component from the component registry
    • 10.3. Adapting the component using dependencies array
  • 11. Linters
    • 11.1. ESlint
    • 11.2. Prettier
    • 11.3. Stylelint
  • 12. Debugging with Volto
  • 13. VSCode extensions/helpers
  • 14. vim and neovim integration

Please note that this document is not complete without the spoken word of a trainer.

We attempt to include the most important parts of what we teach in the training. But reading it here can not be considered equal to attending a training.