Webinar retrospective: Building modern responsive sites quickly with Magnolia

Published on November 19, 2015 by Tomas Gregovsky


Early in November, I presented a webinar that was (mostly) for Magnolia front-end developers.


Based on the feedback they gave, participants appreciated how the webinar combined many practical topics and techniques into a 30 minute live demo. Also, the whole demo was done with just an installation of Magnolia and without any IDE or Java coding. Developers could work with just the command-line and their favorite text editor.


During webinar attendees learned about these topics:


Magnolia’s content apps

  • How to create them directly in running Magnolia

  • How to modify them

  • How to use Magnolia’s REST API to import data into content apps

  • How to render static data from a content app using cmsfn

  • How to render list of data from a content app using AngularJS and the REST API



  • A quick tour of the Magnolia REST tools app (which use the Swagger UI to make it easy to explore and test REST APIs)

  • REST API JSON format structure and how to use it with AngularJS


Bootstrap framework

  • Magnolia’s Bootstrap framework module, which provides 2 basic page templates and 5 basic components to give you a fully editable and responsive layout

  • How to reuse the module for your projects

  • How to add new components

  • How to quickly apply and import custom styles



  • How easy is to get AngularJS into Magnolia

  • How to use AngularJS and the REST API to render lists of data from a content app


Light development / configuration by file

  • How to configure Magnolia to use file-based configuration

  • How nice it is to work with resources like CSS and Javascript on the filesystem

  • Basic use of YAML template configuration


In addition to these key points, I also provided tips on how to speed up Magnolia development by using the Neat Tweaks JCR configuration app instead of regular JCR configuration.


With so many topics for a 30 minute demo, I focused on speed and simplicity.  My idea was to show webinar attendees a good range of the possible ways to build a project. If every attendee found one or two practices to reuse or try, I’ll be glad. Speaking of speed, while the webinar demo took around 30mins, I did use some prepared styles and Javascript that took me a few hours to prepare. The project you saw at the end of webinar was done in around 2.5 hours in Magnolia. I think that’s really cool.


Watch the full webinar here.


If you have any follow-up questions or ideas for next front-end oriented webinar, please share them with me at tomas.gregovsky(at)magnolia-cms.com . Thank you!


{{item.userId}}   {{item.timestamp | timestampToDate}}

About the author Tomas Gregovsky

Tomas Gregovsky is a web and front end developer with 15 years of experience. He joined Magnolia three years ago and focuses on the development of Magnolia’s websites. In his free time, he likes to spend time with his family and friends, snowboard and watch American football. He mostly blogs about using Magnolia as a front-end developer.

See all posts on Tomas Gregovsky