Orion and Google App Engine Push-to-Deploy

After reading an article by Brad Abrams on Cloud based deployment leveraging Git push and Google App Engine I thought I’d outline how Orion can be leveraged in the same way.

Brad suggests starting with a Google Cloud Platform Guestbook Application hosted at GitHub. If you already have an account at OrionHub and are logged in, you can shortcut the steps of creating a project and cloning a repository by simply clicking this “Create and Clone the Guestbook in Orion” link.

When this is done, you should be placed in the editor on the contents of the cloned Git repository. Let’s use a related link (since we know it’s a Git Repository) to get to the Orion repositories page.

GoToGitRepository

The Repository page on the Google Guestbook

GitRepositoryPage

Strictly not needed step but lets enable an Orion setting to remember your Git repository credentials in local storage. Nothing is stored in the server, only in your browser and can be cleared or unchecked to clear. In the upper right of the Orion window select the Persona and go to your settings page. Here is a case where I open that link in a new tab because once I’m done with this task I’ll just close that tab and go back to the task I was working on.

GotoSettingsPage

GitCredentialsSetting

Now (exactly like Brad’s article describes) you’re going to have to go create a new App Engine at http://cloud.google.com/console and enable Push-To-Deploy on the App Engine settings page.

SourcePushToDeploy

There’s a couple of things you need to copy and paste here so I’d suggest having Orion in one tab/window and the App Engine page in another. What we’re going to do is setup another Git remote for the repository you cloned originally. The remote is the URL you see in the above image (well your link will be different). The username is your google ID and the password is the token generated by clicking in that link that says “get your auth token”. Ignore the description about adding it to the netrc file.

Go back to the page which was your Git Repository view on the cloned repository. Look for the button that says “New Remote” and click it. In the slide out, you enter “appengine” for the name (to be compatible with Brad’s article) and paste in the repository URL from the Google App Engine settings page. Then press ‘submit’.

AddRemote

Once you’ve added the remote you need to push what you have from the master of the GitHub repo to that Google remote. Choose the “Push All” button but pick the “More” option in the Git Push to open Choose Branch dialog.

PushAll

GitPushDialog1

Select the “appengine” remote and manually type in “master” and press ok.

MoreChooseBranch

This is where you’re enter your credentials, your google ID for App Engine and the auth token you received earlier. If you select the no prompt again option it shouldn’t prompt you again later when you push additional changes. Choose Submit.

PushCredentials

So Orion will take a bit of time pushing to the Google App Engine repository master branch. Then it takes a bit of time for Google App engine to cycle (or whatever) before you see the app running (like a couple of minutes in my case). But then I saw the following application running at my URL.

PlanetOrionTestRunning1

Let’s make a simple change. Switch to the editor view by picking the related link “editor” as follows:

SwitchToEditor

In the editor page, click on index.html to edit the file. Now press Ctrl-F (or Cmd-F Mac) and find “book”, hit enter to find the second occurrence. Now edit the text to also say “PLEASE!!”. Save the file. (Note: you can turn on auto-save by accessing the option in the spanner/wrench icon over on the right side of the editor).

EditIndexHtml

Let’s go to the Git Status page, again through a related link to this file. You can see how Orion works, by either top level pages or by navigating contextually via related links pertaining to the current task and resource you’re working with.

RelatedLinkGitStatus

In this particular page, the task is looking at unstaged changes for a particular repository, staging the ones you want, committing them, and finally pushing them to a remote.

GitStatusNoCompare

This next screen shot is opening the twisty to show the changes made to index.html. You can view them side by side or inline. If happy with the change, you select the line the file is in and choose stage. You can imagine if you had a bunch of changes but only wanted to stage and commit some of them, but not in this case.

GitStatusWithUnstaged

Now that the change is staged lets commit it, again selecting the line the file is on and pressing commit adding a comment to the commit.

GitStatusStagedCommit

You should then see your commit ready for pushing. Press Push but again choose “more” in the dialog so you can choose the branch.

GitStatusAfterCommitBeforePush

Now if you expand the twisty for “appengine” you’ll see the master branch and you can select it and press ok. If you remembered your credentials, you shouldn’t have to do anything more just waiting for the push to complete.

GitStatusAfterPushChooseBranch

Quite quickly, at least in my case, my site was updated with the change and when I refreshed the page I saw my change.

NewPlanetOrionWithChange

BONUS Points for reading this far….

Orion by default is setup to edit JavaScript, CSS, HTML type files and provide content assist, linting and syntax colouring for these types of files. In this project you can edit the “guestbook.py” file, but by default there’s no syntax colouring. We’ve written a client side plugin for Orion that understands the CodeMirror mode formats. To enable this plugin, again go to the settings page from the persona icon on the top right of an Orion page.

In the settings page choose the “plugins” tab and choose the link for “Get Plugins”.

GetPlugins

This will take you off site to a GitHub account where we keep a list of plugins. In this case you want to choose the “Install” link for the CodeMirror Modes Orion plugin.

PluginsList

This directs you back to Orion with the plugin inserted and ready to install. Plugins for Orion are HTML, JavaScript and CSS and run in your browser securely. While this plugin is hosted at GitHub, it provides bound functionality to the editor by enabling syntax highlighting for specific file types. Simply press Submit to install this plugin.

InstallPlugin

When it’s done, in your editor page, just refresh the page and the source should now look like:

NewSyntaxColouringViaPlugins

To uninstall or disable this syntax colouring return to the plugin settings page and choose the right option for that plugin.

DisableUninstallPlugin

The user preferences for what plugins you have installed and enabled is stored on the Orion server. This means if you login from your iPad, your friends machine, the airport or hotel, you’ll have the same setup that you had before.

A bit of a long post, but demonstrates how to use Orion with services that utilize Git repositories to deploy, build, or otherwise run an application. More information about working with Git in Orion can be found on our Orion User Guide. All our doc is also available off the Persona icon on the top right of each page.

This entry was posted in Tips & Tricks. Bookmark the permalink.