Frog Rain is an opinionated starter kit for Magnolia CMS frontend development. It contains everything necessary to kickstart a Magnolia site project with no Java coding required.
Frog Rain was inspired by Topher Zimmermann's magnolia-lighter and that scene from Magnolia the movie.
Building a Magnolia build environment for light module development is no rocket science, but since there are not many opinionated boilerplate projects available for it there's a lot of decisions for you to make. This project encapsulates some of the best practices we at Houston Inc have ended up with, while still allowing you to use the frontend technologies you know and love.
Frog Rain is built on the principle that all components and pages have their own isolated styles and JavaScript functionality. Any component JavaScript or its dependencies will not be loaded unless they are actually used on the page. This helps keep the project tidy and minimize unnecessary JS downloading and execution.
Clone the repository and modify it to your needs. To see how it works, install the dependencies, build the project with gulp, and create a page in Magnolia.
npm install
gulp
This will build the files in src into the magnolia-modules directory.
Connecting Magnolia to the files can be done in any of these three ways:
- Point your Magnolia instance's
magnolia.resources.dirat themagnolia-modulesdirectory. - Use symlinks to link from your instance to the
magnolia-modulesdirectory. - Copy the files from
magnolia-modulesdirectory to your instance.
Or use the included Vagrant files to launch a local Magnolia virtual server (requires Vagrant and VirtualBox):
vagrant up
vagrant rsync-auto
Access it at http://localhost:8888.
Notice that the "Simple example" component automatically loads and runs the javascript that it needs.
Likewise, notice how the "Page with script" page template automatically loads and runs the script provided in its src directory.
- Gulp for building the project
- Babel for transpiling the modern ES2015 language to ES5 compatible JavaScript
- SASS, the excellent CSS preprocessor
- PostCSS for autoprefixing properties (no need to worry about -o, -webkit, -moz, etc)
- Vagrant for quickly creating a local Magnolia development server
- Magnolia 5.5 Community Edition
- ESLint for enforcing code style conventions
- PPR.js for writing component specific JavaScript
- RequireJS for dynamically loading JS dependencies
- Karma, Mocha and Chai for tests (WIP)