Oracle JET on Cloud 9

I really like the collaborative editing features of Cloud9 (c9), but can I use them to collaboratively build Oracle JET applications? C9 is sort of like Google Docs for developers, allowing multiple users to work on the same file at the same time. You can forget about painful merges with source code systems because c9 allows everyone to work on the same files at the same time. It also doesn't hurt that c9 gives full access to the command line and provides an amazing editing experience.

Given c9's command line and node support, I was pretty sure that following the Getting Started Guide (steps 1 - 3) would get me up and running in a matter of minutes. After a grunt build, you can open index.html, click the run button, and explore the QuickStart Template. But what about grunt serve and livereload? There really isn't any magic in Oracle JET, so the first step is to see if anyone else has connect and livereload working in c9. This Stackoverflow post has a lot of great information as does this c9 doc and this c9 example. Based on that information, we see that c9 runs apache httpd on port 80 and makes ports 8080, 8081, and 8082 available. Our goal is to get connect and livereload running on those last three available ports. As that Stackoverflow post noted, 8080 was in use because I used the run button inside c9 to launch my application. If you want c9's default run feature to work, then I suggest you use port 8081 for the server and port 8082 for livereload.

Now that we have some available ports, the next hurdle is getting Oracle JET's grunt file to use them. Fortunately, the Oracle JET engineers already considered this and included command line options for optional ports. The following command will launch a web server on port 8080 with livereolad on 8081:

grunt serve --serverPort=8080 --livereloadPort=8081

This will get our app running in dev mode, but unfortunately, it won't be accessible from outside the c9 VM. If you test launching your app with the URL http://[yourworkspacename]-[yourusername].c9users.io:8080/, you will see a nice c9 message telling you that nothing is running on 8080. If you try the same URL with port 8081, however, you will see that livereload is working and waiting.

With that in mind, our final hurdle is to get grunt serving our app on an address we can access outside the VM. Unfortunately, this isn't configurable and will require us to change one line in the Oracle JET grunt configuration scripts. Within the scripts directory of your project, navigate to grunt/config and open connect.js. Inside the devServer options, right about line 14, you will see hostname. Just delete the contents of that string (should be localhost). Don't comment out the line, because that causes livereload to misbehave. The hostname option should now look like this:

hostname: "",

From the c9 terminal window, relaunch grunt serve using the command supplied above and test your project URL (http://[yourworkspacename]-[yourusername].c9users.io:8080/). You should be greeted by a fully functional QuickStart template that reloads when you modify and save files within your project. Now go and build something amazing!