Developing EWD.js Applications using a Chromebook

My previous posting discussed the many potential benefits of using a Chromebook instead of a “traditional” full-blown PC or Mac.  Whilst it’s clear that a Chromebook can be used for the growing numbers of cloud-based services and browser-based applications, it’s less clear how you could use one if you’re an application developer.  It turns out that it’s entirely possible, as there are some extremely good cloud-based IDEs.  The problem isn’t so much developing the code: it’s how you can then deploy and run it on your target run-time system.

I decided to figure out a viable way to develop EWD.js applications using only a Chromebook.   In this technical article, I’m going to take you through the steps required to make this possible.  Non-technical readers / non-developers can stop reading now!

After some research (this article was particularly useful), I decided that ShiftEdit was probably the most useful and appropriate for my purposes.  It can be used free of charge, but you’re restricted to a single endpoint connection.  I was hoping to find an IDE that would allow SCP access to a remote site, but none currently exist.  ShiftEdit supports SFTP which is useful if your run-time/deployment system is already set up to support it, but in my experience, getting SFTP installed and properly configured on a Linux server can be a bit of a nightmare (I’m sure it’s trivial for a seasoned Linux administrator!).  ShiftEdit can also integrate with Dropbox and Google Drive.  Since you get 100Gb of storage space for free for 2 years when you purchase a Chromebook, I decided to explore this as an option.

ShiftEdit makes it easy to create and maintain the HTML and JavaScript files that make up a typical EWD.js application, and provides very nice colour-coding and syntax-checking and JavaScript Lint tools are built-in.  The problem that remained, of course, was how to get your work from Google Drive to the actual EWD.js system on which they need to run.  I decided that the best approach would be to develop an EWD.js application that you could run on your run-time EWD.js machine that would access your Google Drive account and download your EWD.js files.  This application, being browser-based could, of course, be run from your Chromebook.

If you install or upgrade your copy of the ewdgateway2 module to the latest version (0.50.8 at the time of writing), you’ll find that it includes a pre-built application named ewdGDSync.  To install it on your EWD.js system, you’ll need to copy the following files from the ewdgateway2 module:

  • ewdLite/www/ewd/ewdGDSync/*  to your EWD application source directory, eg ~/www/ewd/ewdGDSync
  • ewdLite/node_modules/ewdGDSync.js to your node_modules directory, eg ~/node/node_modules/ewdGDSync.js

Before you can run the application, you need to do two further things:

1) Install the Node.js Google API module:

  cd ~/node
  npm install googleapis

2) Register the application on Google’s Cloud Console so that it can access Google Drive accounts via the OAuth 2.0 authentication that is provided by the googleapis module.  There are a few steps to this, and they are well documented by Google, but in summary:

  • Log onto the Google Cloud Console at https://cloud.google.com/console using your Google credentials
  • If you don’t already have one, create a new project which you can name however you like
  • Select the project
  • Click the menu option APIs & Auth
  • Make sure that the status of the Drive API is On
  • Select the Registered Apps menu option and create a new App by clicking the red Register App button
  • Fill in the name, eg EWD.js Google Drive Synchroniser.  Leave the default platform as Web Application.  Save the details.

You should now see a page that provides you with the various ids and keys that Google have set up for your new application.  In particular you need to click on the first section – OAuth 2.0 Client Id.  You’ll need to cut and paste those values as follows:

In a text editor, open up the node_modules file that you copied a few steps ago – ie ewdGDSync.js.  At the top of it you should see the following lines:

 
  var google = {
    // Register and configure this application on your Google Account using the Google Cloud Console:
    //  https://cloud.google.com/console#/project
    api_key: '[Your Google Cloud API Key for this application]',
    client_id: '[Your Google Cloud Client Id]',
    client_secret: '[Your Google Cloud Client Secret]',
    redirect_url: 'https://[Your External Domain Name]:8080/ewd/ewdGDSync/google.html',
    scope: 'https://www.googleapis.com/auth/drive',

You  need to replace the values of client_id and client_secret with the values for the corresponding fields in the Google Cloud Console.

Next, click on the Server Key section in the Google Cloud Console page and copy the API key to the api_key field in ewdGDSync.js

The last step is to register the redirect URL – this is the purpose of the EWD.js page named google.html that is included in the ewdGDSync application source code.  You’ll see above that I’ve provided a likely template value for it already for you – typically you’ll just need to provide the domain name, eg www.myEWDjsSite.com.  Note that this must be an internet-accessible URL that must be able to be invoked by Google’s servers – ie a local LAN address such as 192.168.1.100 isn’t going to be any good!  Also make sure that the port number in the URL corresponds to that used by your EWD.js Node.js master process and also reflects any external mapping through your router, eg the externally accessible URL might be:

  https://robtweed.co.uk:68080/ewd/ewdGDSync/google.html

You need to do two things with this URL:

  • Edit it into the value of redirect_url in the ewdGDSync.js module file
  • Add it as a Redirect URI in the OAuth 2.0 Client Id section of the Google Cloud Console page.  Make sure you click the blue Generate key after you’ve added it!

Save your edited version of ewdGDSync.js.

That should be everything set up on the Google authentication side of things.

There’s one more thing to do: start up ShiftEdit, authorise it to use your Google Drive account and create a top-level folder on your Google Drive named EWD.js.  This is where the ewdGDSync application will look for your EWD.js applications.

Now create an application sub-folder under the EWD.js folder  – name it what you like, eg myTestApp.

Next, create two sub-folders under your application folder.  Name these frontend and node_modules.  Note: you must always use these folder names within any application folder you create.

Next,  create a test HTML file and JavaScript file in the frontend folder.  These will be the files for your EWD.js application that get loaded into the browser.  For now don’t worry too much about what you put in them or whether they’ll run properly in EWD.js – we just want to test whether you can successfully copy them from Google Drive to your EWD.js system.

Finally, create a test JavaScript module file in the node_modules folder.  This should have the same name as the application sub-folder name, eg myTestApp.js.

Save these files to your Google Drive.

Now let’s see if we can transfer them.  Make sure your Node.js / ewdgateway2 service is running and, in a new Chrome tab fire up the ewdGDSync application, eg:

   https://robtweed.co.uk:68080/ewd/ewdGDSync/index.html

You’ll be asked for a password – the one you need to provide is the one defined in the ewdgateway2 startup file – by default it’s keepThisSecret! but I’d strongly recommend you change this!  In order for this application to work you’ll need to now do the following two steps:

  • authorise popups for this application
  • click that little grey shield at the far right of the URL location window and allow it to load the JavaScript and CSS files needed by this application

You’ll probably have to reload the application into the browser after these two steps and may have to log in again.

If everything is working correctly and has been configured properly, you should now see a browser window popping up.  The first time this happens it will ask you for your Google username/password and ask for your permission to access your Google Drive account.  After a bit of to-ing and fro-ing (the so-called OAuth Dance), the pop-up will close and after a slight delay, a folder tree should appear on your browser, showing the folder(s) you’ve created on your Google Drive under the EWD.js folder.

Drill down into the folders and click on the files you created.  A panel will appear to the right.  Click the Update button and the file should be transferred to the corresponding application folder on your EWD.js system.  Note: if the application and/or file already exists on your EWD.js system, it will be overwritten by the Google Drive copy, so be careful!

As soon as the file(s) are transferred, you can try running the EWD.js application – you’ll need to open another Chrome tab on your Chromebook for this.

So, assuming you negotiated your way through those steps, you should be ready to start developing using your Chromebook:

  • Create and edit your front-end and back-end JavaScript files and your HTML files using ShiftEdit in one Chrome tab.  Create your EWD.js applications under the EWD.js folder on your Google Drive.
  • Run the ewdGDSync application in a second Chrome tab and use it to transfer the files from Google Drive to your EWD.js system
  • Test-run the EWD.js application that you are developing in a third Chrome tab.
  • Finally, if necessary, you can even have the Node.js / ewdgateway2 master process running in an SSH session within a crosh tab, so you can see and monitor the back-end activity.  Alternatively (or in addition) you could run the ewdMonitor application in yet another Chrome tab.

Complete EWD.js development using just a Chromebook!

One comment

  1. Awesome! Does this mean you’re handing out Chrome Books for folks at the upcoming tutorial? jk.

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

%d bloggers like this: