Effective Volto

Effective Plone 6 Volto is intended as a training to learn proven practices of Plone 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 “Swiss army knife” to developers that still don’t have enough confidence to start a client project with Volto.

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/advanced audience that already has some contact with Volto and tried it out, or has a decent amount of experience with it.

Effective Volto

• About Effective Volto
  • Trainers
  • License
  • Using the documentation for a training
  • Contributing
• Getting Started
  • Bootstrapping a full Plone 6 project
    • Requirements
    • Project Generation Options
  • Bootstrapping an Add-on
    • Use the generator
    • Developing in isolation with a vanilla Volto project
  • Developer roadmap
    • The foundation
    • Basic Volto development
    • Normal, everyday Volto development
    • Advanced
• Architecture
  • Volto Client - Server duality
    • The Plone backend
    • Volto Nodejs server
    • Volto - the SPA client bundle
  • Razzle
  • Webpack
  • Babel
  • Webpack loaders
    • Add your own Webpack loader
  • Bootstrap Volto
    • Install nvm (NodeJS version manager)
    • Yarn (NodeJS package manager)
    • Use or Install Docker
    • Run a Volto ready Plone Docker container
    • Install Volto
    • Build the production bundle
  • Inside Volto
    • Volto codebase
    • Deep dive into Volto
  • Volto Blocks
    • Volto Blocks engine
  • Configuration Registry
  • Redux
  • CORS
  • Multilingual
    • How to enable
    • Make code i18n aware
• Backend
  • Plone REST API endpoints
  • Writing an endpoint
  • Writing a serializer or a deserializer
  • Writing a content expansion endpoint
    • Make Volto aware of it
  • Writing a block transform
    • Generic block transformers and smart fields
  • Block field contribute to searchableText
    • Client side solution
    • Server side solution
  • Link integrity for blocks
  • Writing Express middleware
• Add-ons
  • What is a Volto add-on
  • Bootstrap an add-on
  • How does a Volto add-on works?
    • Loading a Volto Add-on in a project
    • Addon dependencies
  • Configure a released Volto Add-on in your project
  • Configure an unreleased add-on from an existing repository
    • Add mrs-developer dependency and related script
    • mrs.developer.json
    • tsconfig.json / jsconfig.json
  • Volto views
    • Router views
    • External routes
  • Create a block using BlockDataForm
  • Blocks Layout
  • Block Extensions
  • Block Styling
    • Enabling Style Wrapper in a block
    • Extending the default styles field in Styling fieldset
    • The styles field
    • Using className in your block
    • Main edit wrapper class injection
  • Add-on dependencies
  • Add-on and project configuration pipeline
    • All-in with add-on approach
    • Define your add-ons programatically
  • Create a theme add-on
    • Use less and css props
  • Extending Semantic UI
  • Create a custom Listing block variation
  • Integrate with Volto’s asyncConnect for SSR
  • Add-on Internationalization
    • Override translations
  • Extend Webpack setup from an add-on with razzle.extend.js
• Testing
  • Acceptance testing
    • How to run acceptance tests locally (during development)
    • Helper commands
    • Cypress component testing
  • Jest
    • Standard setup
    • Config for projects and for add-ons
    • Transforms
    • Modulemapper
    • Caveats
  • Unit testing
  • Storybook
  • Testing add-ons
    • Jest configuration override
    • Testing add-ons in isolation
• Deployment
  • Seamless mode
    • Feature history
    • Challenges and goals
    • Features part of seamless mode
    • Advantages of the seamless mode
  • Requisites for using Seamless mode
    • nginx example config for seamless mode deployments
  • Simple deployment
    • Reverse proxies
  • Docker
    • Simple example
    • Full with reverse proxy
    • Recommended setup
  • release-it
    • Basic configuration
• Development tools
  • How to setup your development environment using environment variables
    • Internal Proxy is enabled (to avoid dealing with CORS)
    • Debug an external site (provided you have access to it)
    • Disabling the internal proxy
  • Environment variables
    • Runtime environment variables
    • Environment variables reference
    • Use add-ons via the ADDONS environment variable
    • BUILD_DIR
  • Icons
  • Husky and lint-staged
  • Shortcuts
    • @root / @package
    • volto-themes
    • volto-original
  • Internationalization
    • Broad overview
    • Creating i18n Strings
    • Extracting i18n Strings
    • Overriding i18n messages
    • Translating add-ons
    • Contributing translations for an unsupported language
  • Lazyloading components, injectLazyLibs for libraries
    • Lazy load a component
    • Code splitting bundle analyzer
    • Lazy-loading libraries
  • critical.css
  • Bundle analyzing
  • Component Registry
    • Registering components by name using config.registerComponent
    • Retrieving a component from the component registry
    • Adapting the component using dependencies array
  • Linters
    • ESlint
    • Prettier
    • Stylelint
  • Debugging with Volto
  • VSCode extensions/helpers
  • 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.