Use Your Favorite Framework in the Cloud with Codenvy and Bitnami Development Containers

Introduction

Bitnami's Development Containers are designed to make development frameworks incredibly simple to access and use. Development Containers are currently available for many popular frameworks, including Express, Laravel, Rails, Symfony and Swift, and they're now also integrated with Codenvy's hosted version of the Eclipse Che IDE.

This integration makes Bitnami's Development Containers even easier for developers to access and use. This guide is a quick introduction to that integration and will show you how to start developing with literally just the click of a button.

What is Eclipse Che?

In a nutshell, Eclipse Che is an Open Source web-based IDE supported by the Eclipse Foundation. You can run Eclipse Che locally, and thanks to Bitnami,you can also easily run it on your choice of public cloud. Codenvy is completely free to use, and there's also a professionally hosted version that has some extra features.

Step 1: Choose your framework

Your first stop is the Bitnami Docker Images page. This page lists dozens of apps and tools already rolled into ready-to-use images and compose files. The top of this page lists the current Bitnami Development Containers. Check back often, as this list is updated frequently. Here's what it looks like:

Bitnami Codenvy integration

For this tutorial, we will be using Laravel. Simply click the "Get on Github" button for our Laravel container, to be navigated to the corresponding Github page.

Step 2: Start Codenvy

Codenvy has the very cool feature of allowing the creation of a workspace from a Github repository. This feature can be very handy for things like encouraging contributions to your project, sharing a development environment among friends, and things like that.

Of course, one option is to simply download the docker-compose.yml file from the repository and use:

$ docker-compose up

to start developing. But, this guide is about using Codenvy, so scroll down, find the button with the Codenvy logo that says "Developer Workspace" and click it.

Bitnami Codenvy integration

Clicking that button will start Codenvy. It is really that easy. If you don't have an account, you will be prompted to create one first.

After a few moments, Codenvy will start building the container and other pieces needed for development.

Bitnami Codenvy integration

After everything is done building, a complete development environment will appear inside your web browser.

Bitnami Codenvy integration

Step 3: Test that it all works

The first thing that Laravel creates is a project scaffolding. The first step is to run that scaffold to see that everything is working well. Do this using the custom run command that is in the drop-down list on the upper right. This is a special command that Bitnami included with the Laravel container that integrates into Codenvy, so there's no need to learn cryptic commands.

Bitnami Codenvy integration

Simply click the blue arrow to run the command.

Bitnami Codenvy integration

The terminal window that comes up displays two critical pieces of information. First, it shows that the command ran successfully. Second, it includes a URL that Codenvy provides to navigate to the running app.

Bitnami Codenvy integration

Click that preview link, and you should see the app running.

Bitnami Codenvy integration

Step 4: Take a workspace snapshot

Now that the development environment is running nicely, it's a good idea to take a snapshot. Che has a notion of a "Workspace", which is essentially a collection of projects running inside a container. Taking a "snapshot" of a workspace lets you preserve this space. This saves time as there's no need to wait for the containers and everything else to rebuild themselves each time.

First, click the "Workspace" tab on the left to navigate to the workspace view, which looks like the image below:

Bitnami Codenvy integration

Then, click the workspace name to get to its details page.

Bitnami Codenvy integration

This page provides an interface to many important and interesting workspace-related functions. For the moment, click the "Snapshot" button. Codenvy will then start creating the snapshot.

Bitnami Codenvy integration

Bitnami Codenvy integration

At this point, the workspace snapshot has been created and it's time to write some code! Hit the "Run" button to start the workspace again and get back to where we left off.

Step 5: Write some code!

To illustrate how Codenvy works, make a change that's immediately visible. Navigate to the file resources/views/welcome.blade.php, which generates the Laravel welcome page shown earlier.

Bitnami Codenvy integration

This will open the file in the code editor.

Bitnami Codenvy integration

This file has the default welcome page content. Find the body of the document.

<body>
    <div class="container">
        <div class="content">
            <div class="title">Laravel 5</div>
        </div>
    </div>
</body>

Change it to something else, for example:

<body>
    <div class="container">
        <div class="content">
            <div class="title">Bitnami and Codenvy make Laravel 5 easy and fun!</div>
        </div>
    </div>
</body>

If you closed the terminal window that has the preview URL, don't worry, just re-run the custom run command. Then, access the preview URL to see the change!

Bitnami Codenvy integration

You're on your way to learning Laravel!

Conclusions

This integration between Bitnami and Codenvy means that, with the click of a button, you have Bitnami's modern, up-to-date, development environments available from any computer that runs a Web browser. In short, you can go from thinking about a new app, to coding it, in just a few minutes. Pretty awesome!

containers

Bitnami Documentation