Yo Umbraco!

No I am not trying to be a kid from the 90′s and start every greeting off with yo, but in fact I want to introduce you to a new tool I have built called Yo Umbraco, which help boost productivity for developing property editors for Umbraco 7 & newer.

What is Yo Umbraco?

It’s a handy command line tool that will quickly generate and scaffold all the different parts you need to help build your own property editors, by asking a series of questions it will help customise your needs and give you a great starting point for that next awesome property editor you are going to build.

How to install

If you have node already installed then you can skip over this first bit and move onto the next step.

To begin with you need to install nodejs from their website so we can then download some packages from the nodejs package library known as npm. You can think this as the equivalent of the NuGet package repository. When you install nodejs ensure you mark the option to add it to the PATH. This means you will be able to access node from any folder location in the console window.

To verify you have node installed run the following commands which should display a version number for each command.

node -v
npm -v

With nodejs installed we can install the next part which is YeoMan. YeoMan is a node package on the npm repository that is a scaffolding tool and can help scaffold various different types of things from AngularJS applications to Chrome Extensions.

To install YeoMan run the following command in the console. Note the -g switch this tells node to install this package globally and not just in the directory your console is currently in.

npm install -g yo

After YeoMan has finished installing we need to verify it installed by typing the following command to see its version number.

yo -v

YeoMan or yo as it’s known in the command line does not do anything interesting out of the box. For it to be useful you need to install addons for it, which are known as Generators. There are hundreds of generators out there ranging from helping you create a webapp to our Umbraco property generator.

The next part is install our generator from npm. To do so run the following command.

npm install -g generator-umbraco

With it installed you can now happily run the following command and start working with it.

yo umbraco

yo-umbraco

The friendly YeoMan will ask you some questions about creating your Umbraco property editor and then go off and scaffold it all for you to start building your own Umbraco property editor.

Once you have YeoMan create the Umbraco Property Editor for you you can use the power of GruntJS build tool to help build the property editor. If you have GruntJS already installed then you will not need to run the command below.

npm install -g grunt-cli

Grunt Tasks

There are several grunt tasks you can run from the folder where YeoMan has copied the folder & files for you, make sure you chaneg directory to that folder then you can run the following commands:

yo-umbraco-grunt

General Build

grunt

Build NuGet Package

grunt nuget

Build Umbraco Package

grunt package

Automatically watch & build files

This will monitor the Less, Javascript & HTML files for you and build, concat & copy them as needed every time you save a file.

grunt watch

Test with an Umbraco Site

You can easily copy your property editor to an Umbraco site to test it out. This will copy the folder that gets run when calling grunt. You simply need to specify the root of the Umbraco site by specifying a target switch.

grunt --target=c:\inetpub\wwwroot\my-umbraco-site\

Yo Umbraco - Grunt with --target

Thanks

So I can’t take all the credit for Yo Umbraco as i’ve have had the help with Tom Fulton and his experience with building Archetype the awesome property editor for Umbraco 7. So I have to give a big thank you to Tom and his colleague Taylor Smith to help improve Yo Umbraco.

So what you waiting for, download it today and start building your next Umbraco property editor. Have Fun & I look forward to seeing what you build with Yo Umbraco!

About these ads

5 responses to “Yo Umbraco!

  1. Pingback: Yo Umbraco! | Ismail's umbraco adventures·

  2. Warren,

    Really cool project! I found a couple of things that may be issues or I may be using it wrong.

    * I think the creation process uses the Google Maps sample even if the blank one is selected. That’s what my tests seemed to indicate.

    * When I build with grunt the only .js file copied over is the initial controller. Any new directives or dialog controllers aren’t getting copied over.

    * The package build didn’t install. It seems correct, but it throws an error in the install process (perhaps something changed in the latest v7?).

    Anyways, super job and I really want to use this as a start to building packages in the future!

    • Hey Jason
      Thanks for the feedback & I will look into it shortly as I am due to create/hack a new property editor that I had an idea for.

      So will look into your feedback & see if I can resolve that at the same time.

      Cheers,
      Warren :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s