Open in Cloud9 Button


#1

Open in Cloud9 from Github

Being able to open a project in Cloud9 right away can be very empowering. This can be useful in the classroom, professional, or hobbyist setting. If you’d like to enable this on every Github repository you visit, simply install this Chrome extension: Open in Cloud9.

This extension can be tremendously helpful for those that have it installed but asking everyone you know to install this so they can easily run code you have in a git repository is not realistic.

Open in Cloud9 from Anywhere

Luckily, you can create and embed your own “Open in Cloud9” button using the following steps:

  1. Find the git URL for the repository you’re interested in (SSH or HTTP will do). In this instance, let’s say it’s https://github.com/c9/core.git.
  2. Encode the URL using a tool like this one. For this repository, that gives me https%3A%2F%2Fgithub.com%2Fc9%2Fcore.git.
  3. Append the result of the previous step to the end of this: https://c9.io/open/?clone_url=, giving me https://c9.io/open/?clone_url=https%3A%2F%2Fgithub.com%2Fc9%2Fcore.git.
  4. Encode this result using a similar tool as before, so now I have https%3A%2F%2Fc9.io%2Fopen%2F%3Fclone_url%3Dhttps%253A%252F%252Fgithub.com%252Fc9%252Fcore.git.
  5. Append the result of the previous step to the end of this: https://c9.io/auth/github?r=. This gives me https://c9.io/auth/github?r=https%3A%2F%2Fc9.io%2Fopen%2F%3Fclone_url%3Dhttps%253A%252F%252Fgithub.com%252Fc9%252Fcore.git.

Now I can make this the href for a hyperlink or a button like this: Open Cloud9 Core Repository in Cloud9.

As a quick alternative to running through the steps above, you can call the following javascript function, passing in the git URL you want as a string.

function cloud9Linkify(gitURL) {
    return "https://c9.io/auth/github?r=" + encodeURIComponent("https://c9.io/open/?clone_url=" + encodeURIComponent(gitURL));
}

Cloud9 vs. Koding Comparison
#4

To add to this post (I use a student laptop with restrictions such as not being able to install extensions), I have come up with a bookmarklet:
javascript:window.open("https://c9.io/auth/github?r=" + encodeURIComponent("https://c9.io/open/?clone_url=" + encodeURIComponent(window.location.href)))

Just create a new bookmark with the above code, and you’re all ready to go!


#5

While the above bookmarklet that I created works perfectly, when I tried adding the link to my README, clicking it wouldn’t work. It would just give me this error:

Cannot GET /auth/https%3A%2F%2Fc9.io%2Fopen%2F%3Fclone_url%3Dhttps%3A%2F%2Fgithub.com%2Fdannytech%2Fopenpass-core.git

However, copying and pasting the link into a new tab worked perfectly. Can someone help explain, please?

I have tried this on two computers, both chrome, one Window 8, the other 10, and it still doesn’t work. The workspace with this problem is https://ide.c9.io/dannytech/openpass, in the README for openpass-core.


#6

Actually this repo worked well for me. Check out this workspace: https://ide.c9.io/bradydowling/openpass-core. I did try this on one of my own github repos and it had no files so perhaps this is the same issue you saw. I’ve never had this issue before but curious to see if you continue to see this or if anyone reports the same thing.


#7

Very interesting. Just thinking, could it be possible that my account is messed up in some way? When I first started out, after the first few tries, Github asked me to authorize Cloud9. I accepted, of course, but nothing changed, yet I’m not sure why that even happened.


#8

Could be in a weird state. If you’re worried about this then you could try redoing the Cloud9/Github connection. I might try it in this order:

  1. Disconnect Github from Cloud9 on the Connected Services page.
  2. Check your Github settings to make sure Cloud9 access is revoked.
  3. Reconnect Github from the Cloud9 connected services page above.

#9

Nope, I tried, but still the exact same situation

EDIT: Just as a test, could you possibly try cloning a repo from your Github (make sure your Github is connected). For instance, cloning the c9 core repo works perfectly for me, maybe it has something to do with me being the owner of the repo?


#10

Just as an update, I added a badge to my README with the link. While testing from the Cloud9 Preview, it gave the weird error, but when I pushed to GitHub, it works just fine: https://github.com/dannytech/openpass-core


#11

Sweet, badges like these are super helpful and make it really easy to see your code in action :tools:


#12

For anyone wondering how to make the badge (using shields.io, with c9 core as an example), here it is:
[![Open in Cloud9](https://img.shields.io/badge/Open%20in-Cloud9-blue.svg?style=flat-square)](https://c9.io/auth/github?r=https%3A%2F%2Fc9.io%2Fopen%2F%3Fclone_url%3Dhttps%253A%252F%252Fgithub.com%252Fc9%252Fcore.git)

EDIT: While it’s great to be able to create your own badge and such, I’d like to recommend that there be a feature to generate a badge (such as in the dashboard when you click on a project), or that a badge be automatically included in the default README of every workspace.


#13

Cool idea and this would be simple to implement. The tricky part would be the text/explanation to go along with it. Lots of Cloud9 users are really new to programming so if you have any thoughts on where in the dashboard you’d put this and how you’d phrase it then I’m all ears. Include a mockup for bonus points :wink:


#14

Hmm, you make a good point. I think the simplest would be to just automatically add the badge to the README (if it’s possible to do that dynamically), and make it so if users who know how to use the README see it, they can decide whether they want it or not, and either keep it or remove it. This also means that users could easily share their code for editing, and I think could be embraced by the community. I’d love to hear some other user’s opinions on this and come to a decision.


#15

It could be added to the default readme for the workspace as you mention, just as long as we check if the workspace is a git repo clone. Indeed, other ideas would be helpful.