PHPStorm, grunt.js and File Watchers

I had a pickle of a time getting grunt.js to work on my Mac. So eventually I gave up and decided to use PhpStorm's built in watchers to do my tasks.

I highly recommend you get this all working in Grunt first. Once things work as expected there, then you can set up PhpStorm.

Tested with PhpStorm 7.1.1, node 0.10.25, grunt-cli 0.1.13 and grunt 0.4.2.

Project Structure

In this project, we have a bunch of HTML sections that are baked together. For example, the header, nav, and footer are html files that are "baked" into a final file in the build directory. In a css subfolder we have all our css (/css/styles.less and /css/custom/, /css/vendor/ for Bootstrap) which are combined via Less into one final /build/css/styles.css file. And the JS files are also copied to the build folder.

LESS

This was by far the easiest. If you've already got this to work then you don't need any help. I simply had to change the default "Output paths to refresh" from "$FileNameWithoutExtension$.css" to be "$ProjectFileDir$/build/css/$FileNameWithoutExtension$.css" and it worked.

Grunt Tasks

This was the tricky bit, as I wasn't methodical enough. Assuming that you have installed grunt globally then the following settings will work. 

• Name: Grunt Bake
• Description: Builds HTML (obviously change these two to what you want them to be)
• Turn off immediate file synchronization
• File type: HTML files
• Scope: Changed files. This is under VCS, probably at the bottom of the drop down. This stops the watcher being triggered when the file is created in the final build folder.
• Program: On a mac, with grunt installed globally, it is /usr/local/bin/grunt. Run "which grunt" in your terminal to figure it out (sorry Window's users, I don't know the command for you).
• Arguments: This is the name of the task. For me, I added this line to the Gruntfile.js. "grunt.registerTask('phpstorm-bake', ['bake'] );" Which means my argument is phpstorm-bake
• Working directory: $ProjectFileDir$

That's it. 

It's beyond the scope of this article how to get grunt and it's associated tasks up and running. There are plenty of handy tutorials and documentation on the web for that already. 

Bootstrap Dropdown Mega Menu

Update: Just use this plugin https://github.com/CWSpear/bootstrap-hover-dropdown. It's most likely better tested than this hastily put together script.

I would just like to point out that I agree with the Twitter Bootstrap dev's, in that you should not be having the megamenu display on hover. That's paraphrasing their words but seems to be their general intent.

Now that that's out of the way, if you do want a Mega Menu that works on desktop and tablets, here is some code that may be of assistance. I'm pretty curious about it's behaviour on touch screen PCs, but as we don't have any to test with I can't check it :(

var topLevelLinks = jQuery('.dropdown-toggle');  // We're using bootstrap for the dropdown, but we need it to display on hover

    if (!Modernizr.touch) {

        // pseudo hover stuff

        topLevelLinks.on('mouseover', function(event) {

            topLevelLinks.removeClass('disabled');

            jQuery(this).dropdown('toggle').addClass('disabled');

        });

        // pseduo off hover

        jQuery('#menu-main-menu').on('mouseout', function() {

            jQuery('.dropdown-toggle.disabled').removeClass('disabled').dropdown('toggle');

        });

    }

    topLevelLinks.on('click', function(event) {

        if (jQuery(this).parent().hasClass('open')) {

            // stop the dropdown stuff and let the normal link stuff happen

            event.stopPropagation();

        }

    });

Installing Drupal (7.20) on Fortrabbit

Want to install Drupal on Fortrabbit? Here's how. Bear in mind these settings may change as Drupal get's newer or Fortrabbit matures/changes. Also, I've made some assumptions on how you want to do things. Your use case may be different, so have a read over things before following the steps.

I've assumed you have already installed git on your local machine. You're going to need it.

Login and create an App

We're going to login and create an app. Then we're going to set up git access for later.

• Login in to Fortrabbit (or create an account)
• Create the app in Fortrabbit
• Give the app a name
• Give the app a description (in the notes section)
• Leave this window open for later.
• Open the .ssh folder with "gitbash"
• Open windows explorer
• Right click on the folder that matches your username (you'll find in under Desktop)
• Select the "gitbash" option.
• If you haven't yet created all the ssh stuff, google "github generating ssh keys"
• In git bash, run this command "clip < ~/.ssh/id_rsa.pub"
• Move the cursor into "Your public SSH Key"
• Paste the previously copied key info into this field (ctrl + v)
• If you want to have login details emailed to you, enter the email address into the field
• Click Save App Settings
• Wait. This takes a little while.

SSH Access to the server (via a key-pair)

SSH access is gold. Unfortunately, for Windows Users it is a pain to set up. Follow this step by step guide, and make sure you have installed Putty and PuttyGen. You don't need PuttyGen if you like to try and remember your password every login. That works for some people.

Or you could set up a key value pair so you never have to remember the username/password combination again.

• This may not work straight away, as the account needs to be verified. Come back in 5 minutes if it didn't.
• Open Putty
• In Saved Sessions, write a memorable name
• Click Save
• I do these two steps first so I always remember about it. You don't have to.
• Put in the hostname (ssh1.eu1.frbit.com)
• In category, expand "Connection" and click on "Data"
• Put your username in the Auto-login username field
• Go back to Session and click save
• Click open
• Type in your password
• You're now connected. If you don't want to use a keygen pair, you're done. If you do, follow these steps
• As we're using Putty, we need to create a keygen there
• Open PuttyGen
• Click Generate
• Move the mouse cursor like a good developer
• When it's generated, save the key
• Right clock on the generated key
• Select "select all" 
• Right click and select copy
• Go back to your connected shell
• Type "cd ~/.ssh"
• Then type "vim authorized_keys"
• Press "i" to insert
• Assuming your public key is still in your clipboard, right click and it will be copied into the file
• Press "esc"
• Type ":wq!"
• This is now saved.
• Exit the shell.
• In putty, either create a new session or load the existing one
• Expand "Connection", then "SSH" and click on "Auth".
• Click on browse to select Private Key File
• Select the previously saved file.
• Go back to the session menu and save it
• Open
• You now have ssh access using a key (no more remembering passwords)

Installing Drupal

• http://drupal.org/documentation/install/download has all the instructions you need to install Drupal. 
• On Fortrabbit, you need to change the .htaccess file after you have moved and untarred everything.
• Comment out line 14 of the .htaccess (Options +FollowSymLinks)'
• This isn't allowed by the server settings, as it's already set.
• Go to your apps URL and follow the prompts to install Drupal.

Getting mysql to work

• Use MySQL workbench. Download it from Oracle. 
• Create a new connection.
• Set the conenction method to "Standard over SSH"
• Use the SSH and MySQL details that FortRabbit supplied to connect. 
• If you want to create/edit users, use the Model view. That's not intuitive.

Alright then. 

Enjoy the steps and let me know any steps I've missed.