Setting up integration between Adobe AEM, Brackets and BitBucket (Git)

Brackets is an open-source text editor by Adobe, that integrates with both AEM and Git.

It is therefore possible to work on your AEM components using brackets and have these changes merge seamlessly with your local AEM server, and then push these changes to BitBucket directly from Brackets.

To achieve this here are a few guidelines / steps:

Assumptions:

•     You have Git installed. 
•     You have created a branch from Jira on Bitbucket, and have pulled that branch to a local folder
•     Your local Git is pointed to the branch from Jira

Setting up Brackets

1. Get Brackets : http://brackets.io/
2. In brackets you will need the following extensions:
1. Brackets Git
2. AEM Brackets Extension
3. To get these:
1. go to File --> Extensions
2. type in "git" or "aem"
3. click install next to the extension

Once you have the extensions you will see the following in the top left of your brackets window:

The blue and green icons above are the Brackets Git Extension and the AEM Extension respectively.

Updating a File on AEM localhost from Brackets

• Start your localhost in dev mode.
• Check the AEM configuration in Brackets, by clicking the AEM --> Project Settings menu
• Open the "ui.apps/src/main/content" folder on your hard drive from inside brackets. This folder can be found by browsing to the folder you pulled the Jira branch into. To open the folder in brackets you select the folder dropdown in brackets:

• Browse to the file you want to edit in the file structure:

• Edit the file:

• Save the file (Cmd - S), and the changes should push immediately to your AEM localhost.
• If you chose to edit an xml file, you will need to select "AEM --> Export Content Package to Server" to push the changes to the server
• You can check that the changes have been pushed to the localhost by opening your local CRXDE lite and browsing to the file.

Pushing Changes to BitBucket

• Check that you are pointed to the correct branch in Brackets (if you are not change it to the correct branch). This menu is found on the left pane of Brackets:

• Select the Git Plugin by clicking the blue icon:

• In the Git window that opens (bottom pane of Brackets) select the file you updated and saved:

• Click Commit to commit the change to your local Git:

• Insert a comment and click OK

• The change is now saved to your local Git.
• Click the push icon to push the change to BitBucket (In the screen shot below it is the icon with the (1) next to it):

• Ensure that the push is happening to the correct branch, and that you are happy with all the other settings. You should not need to enter your password.
• Click OK:

• Your changes will be pushed to BitBucket:

• You can check that BitBucket was updated by opening the repository in your browser and viewing the last check in:

Note that this guide takes you to the point that you have now pushed an update to your BitBucket branch. It is not showing you the best practise, but is merely meant to show you how to integrate Brackets with AEM localhost, and then with BitBucket.

Happy coding!!