Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 16 Next »

DEV-159 - Getting issue details... STATUS

 

Update

The PoC has become a new Magnolia project. Here are its coordinates

Jira:  https://git.magnolia-cms.com/scm/build/npm-jumpstart.git

GIT: https://git.magnolia-cms.com/projects/BUILD/repos/npm-jumpstart/browse (master [jetty+Magnolia web app ] and tomcat-bundle branches)

Jenkins: https://jenkins.magnolia-cms.com/job/build_npm-jumpstart/

 

 

Rationale

It is a truth universally acknowledged that front-end developers don't like Maven and all the "cumbersome" tools we Java devs use in our daily job. Therefore, we want to provide them with a way to quickly set up Magnolia for light development. 
After Tomáš's presentation at Lunch&Learn about his cool Node.js module called CLI https://git.magnolia-cms.com/users/tgregovsky/repos/cli/browse it was clear even to me that Node.js and its package manager npmjs are the way to go.

Goal

Whereas the CLI module or package (afaics they should mean basically the same thing in the Node.js world) is designed to easily create pages and components from the command line, it still requires some manual steps on the dev's side, such as getting a JEE Web container installation with Magnolia and copying it into the project folder. We want to automate these steps and provide an npm package for front-end devs to get started fast and painlessly (hopefully) with Magnolia and light development.

Experimenting with Node.js and npm

As I'm a newbie to Node.js I had first to get familiar with the new technology. The result of my trials and errors is the little module at https://git.magnolia-cms.com/users/fgrilli/repos/mgnl-light-dev-poc/browse  https://git.magnolia-cms.com/projects/BUILD/repos/npm-jumpstart/browse

There are two flavours of the module on two different branches 

  • master: a module using Jetty + Magnolia community web app 
  • tomcat-bundle: a module using Magnolia's CE tomcat bundle

From the module's readme.txt

This is a PoC for a nodejs module (package) which installs and runs a Magnolia instance ready for light development.
...
Run:
- run "npm start". This will
-- connect to Magnolia's public repository on Nexus and download Magnolia (see package.json)
-- extract Magnolia
-- change some magnolia.properties (again see package.json)
-- start up Magnolia

Custom commands:
- Apart from the standard npm commands corresponding to the phases of a package lifecycle, e.g. install, start, etc.
this module provides these additional commands 
-- start-magnolia, usage "npm run start-magnolia" 
-- stop-magnolia, usage "npm run stop-magnolia"  
-- restart-magnolia, usage "npm run restart-magnolia"


Fundamental features

 The npm module could offer users the ability to customise their project via the standard package.json file by choosing

  • Magnolia version
  • CE or EE
  • name of the light dev project

And then 

  • create a project basic structure with folders and files as expected by the light development conventions
  • optionally install the hello-magnolia project as an example to learn from

We might consider using Jetty and a stripped down version of Magnolia like the magnolia-community-webapp's war instead of the complete Tomcat bundle as I did in the PoC. This would probably make for an even faster and easier setup. 

A custom command might allow users to download additional Magnolia modules as they come in need and place them automatically in WEB-INF/lib (well resolving dependencies in that case could be tricky).

Next steps

The PoC can be a starting point for the goal we set. However, I think it would be worth investigating the possibility of using a very popular npm package for our specific goal, i.e. http://yeoman.io

We're still in the domain of Node and npm but what's exactly Yeoman? 

Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. To do so, we provide a generator ecosystem. 
A generator is basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts.

Again a generator is an npm package. There are generators for all sorts of projects and technologies from angularjs to wordpress.  A generator can also have so-called sub-generators which are accessed as generator:sub-generator.

Take generator-angular as an example. Once the full angular app has been generated, other features can be added. To add a new controller to the project, you run the controller sub-generator:

yo angular:controller MyNewController

This seems to fit well with what Tomáš did, for instance the cli module command addPage myHome could be a good candidate for a sub-generator.
I just had a quick look at Yeoman but seems very promising and could provide us with some nice functionality out of the box. As far as I could see, it is kind of a Maven archetype in the Node.js world. 

yo angular:controller

 

 

  • No labels