(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.
- 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.
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, 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
- 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.)
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
In a real-world workflow, you'd set up your signature and an upstream remote. Here, we'll skip this step.
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
.
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 insrc/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"
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!