This add-on is operated by JAWS DB, LLC

Code directly from your browser! Provides a Cloud9 IDE and development server.

Last updated November 01, 2022

Kloude is an add-on that provides a full-featured IDE for developing, deploying, and editing Heroku applications in the browser.

The Kloude add-on comes with an Ubuntu Linux server supporting many programming languages out of the box. These languages include Node.js, Java, Python, Ruby, PHP, and Go. You can add more through Ubuntu’s apt-get package manager.

The included IDE, AWS Cloud9, supports syntax highlighting, Git source control, terminal windows, code completion, debugging, outline view, and more.

Provisioning the Add-on

You can add a Kloude Development Environment to your app via the Heroku CLI, the Heroku Elements Page, or by searching for the add-on kloude on your app’s Resources page.

Provisioning via the Heroku CLI

Use the -a flag to specify which application to attach the add-on to.

$ heroku addons:create kloude:plan_name -a example-app
Creating kloude on example-app... free
Your add-on has been provisioned successfully

Dashboard

The dashboard is the IDE itself. Its main components are a code editor, a directory tree, and a terminal for accessing the underlying Linux development server.

Access the dashboard by selecting the Kloude add-on from your application’s Resources page, or by executing this Heroku CLI command.

$ heroku addons:open kloude -a example-app
Opening kloude for example-app

Environment Setup

After provisioning the Kloude add-on, users can open the Dashboard to begin creating an application for hosting on Heroku, or to modify an existing one.

Git comes pre-installed in your environment and you can either pull an existing repository down or create a new one to begin version-controlled development in Kloude.

Deploying to Heroku

Deployment to Heroku is enabled via Heroku’s GitHub integration (aka Heroku GitHub deploys).

The Heroku Github Integration article provides detailed information for enabling Github Integration on your app. Users can specify the main branch of their GitHub repositories, or another branch of their choosing, which automatically deploys to their Heroku app with git push. You can also configure manual deploys to control when changes are deployed to Heroku

Other Version Control Providers

GitHub is the only version control provider with first-party support from Heroku for deploys. It’s still possible to deploy from other providers such as GitLab or Bitbucket. Use continuous integration (CI) tools compatible with the dpl command, or via GitHooks using the dpl command, or the Heroku Platform API to deploy.

More information can be found in this Dev Center article.

Terraform

Hashicorp Terraform is a tool that enables you to configure and deploy a wide range of integrated cloud resources, including Heroku’s, with a simple declarative language called HCL. See the Using Terraform with Heroku Article for more information about deployments with Terraform.

The Heroku CLI

In certain circumstances, you can also use the Heroku CLI for direct deployments. This method is only available to users who don’t have two-factor/multi-factor authentication enabled in their account.

The Heroku CLI article contains instructions for installing it.

To log in to Heroku from the CLI, use the following command:

$ heroku login -i

Set Up the Heroku Git Remote

After establishing a Git repository for your application in the Kloude environment, users can connect it to Heroku by adding their app as a Git remote.

$ git remote add heroku https://git.heroku.com/example-app.git

Deploy to Heroku

After setting up the heroku remote, deploy the application to Heroku with the following command.

$ git push heroku main

Changing Plans

The difference between plans is primarily in the performance capability of the development environment’s underlying virtual machine. Smaller plans work great for smaller coding projects, for projects being accessed infrequently, or for quick changes. As access becomes more frequent, or code grows in complexity, or other needs increase, users can provision higher-level plans.

From your application’s Resources page, click the button next to Kloude’s plan name and cost. Select Modify Plan and select the desired plan.

Change Plans via the Heroku CLI

Use the -a flag to specify which application’s instance of Kloude to modify.

$ heroku addons:upgrade kloude:new_plan_name -a example_app
-----> Upgrading kloude:new_plan_name to example_app.. done, v18 ($49/mo)
       Your plan has been updated to: kloude:new_plan_name

Deprovisioning the Add-on

From your application’s Resources page, select the button next to Kloude‘s plan name and cost. Select Delete Add-on and follow the prompts.

Deprovisioning via the Heroku CLI

Use the -a flag to specify which application to remove the add-on from.

$ heroku addons:destroy kloude:plan_name -a example-app
-----> Removing kloude from example-app... done, v20 (free)

Troubleshooting

400 Error “User is not authorized to open this environment”

A session-specific Amazon Web Services account facilitates the IDE and is set in the browser when the IDE is opened. Any access of another AWS account in the same browser, even from another Kloude environment, overwrites those first credentials set in the browser session. When this overwrite happens, this error occurs but your Kloude environment is kept intact. Logging back into the environment resets your browser’s AWS credentials for access to the IDE.

Using a private browser window, a guest browser window (browser-specific), or a separate browser provides an environment with separate sessions and cookies. This method allows you to use multiple different Kloude environments or AWS accounts at once.

Support

Submit all Kloude support and runtime issues via one of the Heroku Support channels. Any non-support-related issues or product feedback is welcome at Kloude’s Twitter Account.

For questions relating to AWS Cloud9 environments, see the Cloud9 documentation. For security’s sake, many integrations from Cloud9 to other AWS services are disabled.