Kitematic

(Short URL to this Gist: http://git.io/v8d55)

Kitematic is an open source project that simplifies the Docker experience. Here, you'll learn how to set up your Kitematic development environment and practice working on an example issue.

Find an issue on GitHub

Go to the kitematic/kitematic repository, and click the "Issues" link. (The full URL to the repo is: https://github.com/kitematic/kitematic)
From the "Labels" drop-down, select exp/beginner to filter on easier issues.
Find an unclaimed issue that interests you. (For this exercise, select issue #1191 Missing container id.)
Add a #dibs comment to the issue you choose to work on. (Make sure it's unclaimed.)
Make a note of the issue number; you will need it for later.

Set up your Kitematic development environment

Kitematic is built on Electron , Node.js , and React and AltJS (which follows the Flux pattern)

To install on Windows: download latest release , and follow the installer steps to get NVM installed. Be sure to uninstall any existing versions of node.js before installing NVM for Windows.

To install on Mac OSX/Linux: copy-paste the following install script to a terminal window:

      curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

To activate nvm, close the terminal window and re-open a new one, or source nvm from the current shell: . ~/.nvm/nvm.sh

Install Node.js

Install Node.js, make it the default, and confirm you've got the right version.

        $ nvm install v4.2.1
        $ nvm alias default v4.2.1
        $ node --version

Fork the master branch of Kitematic

Go to the <a href="https://github.com/kitematic/kitematic "target="_blank"> kitematic/kitematic repository and fork it to create YOUR_ACCOUNT/kitematic.
Copy your fork's clone URL from GitHub. (For this exercise, use HTTPS protocol.)

Clone your repository locally and create a branch

Create a directory for a new repository (e.g., kitematic). From the root of the repo, clone the fork to your local host, then create and checkout a branch for the issue you will be working on.

    $ git clone https://github.com/YOUR_USERNAME/kitematic.git
    $ git checkout -b 1191-branch

Set up your signature and upstream remote

In a real-world workflow, you'd set up your signature and an upstream remote. Here, we'll skip this step.

Install dependencies, start Kitematic, and verify your setup

The Node.js install includes npm, which we'll use to install supporting packages and start the app. Verify that the package manager is running and check the version (e.g., v2.14.7), then install the package dependencies. From the root of your Kitematic repo, use npm to start Kitematic and confirm all went well.

    $ npm --version
    $ npm install
    $ npm start

The core files in Kitematic are in the src folder which then follows the AltJS structure of:

kitematic/
|--src/
    |--actions/
    |  |--MyActions.js
    |--stores/
    |  |--MyStore.js
    |--components/
    |  |--MyComponent.react.js

The components folder is where the layout files are, the stores represent the application logic and actions are the dispatcher for actions taken within the components.

Develop in Kitematic (work on an issue)

Currently, Kitematic shows only the name for a selected container. Let's add the container id.

Open the project in your favorite editor. (We recommend Atom with ES lint support.)
Open the ContainerSettingsGeneral.react.js file in src/components/ folder and look for the code that describes the layout (around line ~ 200).
```
    return (
	    <div className="settings-panel">
	    ...
```

Above this code, create a javascript variable that will allow us to display our container id. (This code snippet is available at GitHub gist.)

let shortId = (
    <div className="settings-section">
        <h3>Container Id</h3>
        <div className="container-name">
            <input id="input-container-name" type="text" className="line" placeholder="Container Id" defaultValue={this.props.container.Id.substr(0, 12)} readOnly></input>
        </div>
    </div>
);

Now, include the variable in the rendered view by adding it below the {rename} tag.
```
     return (
          <div className="settings-panel">
               {rename}
               {shortId}
```
At this point, the updated code should look similar to this:
Save your changes and re-start Kitematic.
```
 $ npm start
```
The container ID should show on the Settings tab, along with the container name (similar to docker ps command output ).
You can close the Kitematic application now, and kill the running process in the terminal via CTRL+c.

Stage your changes by adding them, and commit the code.

 $ git add src/components/ContainerSettingsGeneral.react.js
 $ git commit -s -m "added container id to show on settings tab, fixes issue #1191"

Next steps and carry-home development challenge

Congratulations! You've just improved the Kitematic GUI, and created a PR for your featurelet! The next step would be to participate in your PR's review.

For more practice, try enhancing Kitematic to show the command an active container is running.

Watch this space: http://docs.docker.com/opensource/kitematic/ for a detailed version of this tutorial, coming soon!

FrenchBen/kitematic_contrib_quickstart.md Secret