Editing code in Bluemix DevOps Services
Last updated: 23 June 2016
Best of all, the Web IDE is powered by the web. You have nothing to install, nothing to maintain, and nothing to scale. You can develop, anywhere that you have an internet connection.
- Setting up the editor
- Editing code
- Source control
- Deploying an app from your workspace
- The command line shell
- Editing outside of the Web IDE
Setting up the editor
The configuration of a code editor can be personal. The Web IDE is customizable so that you can choose the color schemes, technical tools, and settings that meet your development needs.
You can view and modify the Web IDE's settings by clicking the Settings icon from the navigation bar.
|Cloud Foundry||Define a Cloud Foundry API and Manage URL|
|CSS||Define the severities for CSS linting rules that you use to check your code|
|Editor Settings||Configure editor-specific settings for key bindings, editor behavior, layout, and more|
|Editor Styles||Configure color schemes for the languages that you use, or import a theme from another editors|
|Git||Configure general settings for Git|
|Plug-ins||Install, disable, or remove plug-ins from the editor|
|Tern||View a list of all of the Tern code analysis plug-ins that are in the editor|
If you often need to change certain settings while you edit, you can access those settings quickly from the Local Editor Settings icon in the upper-right corner of the editor.
By default, the settings for the editor style and font size are always shown. To include other editor settings in the menu, follow these steps:
- Click the Local Editor Settings icon .
- Click Editor Settings.
- Click the circle that is next to the setting name to include or exclude it from the Local Editor Settings menu.
The Web IDE has two main sections. The first section is the file navigator on the left, which shows your project files in a tree structure. From the file navigator, you can create, rename, delete, and otherwise manage your files and folders.
Tip: You can upload files to the file navigator by dragging them from your computer to the file navigator.
The second section is the editor pane on the right. The editor provides several features to make coding easier, such as content assist and syntax validation.
Working with multiple files
- To work with two files at the same time, click the split editor mode icon at the top of the editor.
From the menu that opens, select a view.
After you select a view, if a file was already open in the editor, it is shown in both editor views.
To open or change a file that is shown in one of the editor views:
- Move the cursor to the editor view that you want to change.
- In the file navigator, click a file.
Most of the commands in the Web IDE are accessible only through keyboard shortcuts.
To see a list of the keyboard shortcuts in the editor:
Alt+Shift+?or, on Mac OS, press
- In the upper-right corner, click HELP > IDE KEYBOARD SHORTCUTS.
Outside of the editor, you can get help on any page by pressing
You can access integrated source code management tools from the Web IDE.
- If your project is sourced in Git, click the Git Repository icon . For more information, see Source control with Git.
- If your project is sourced in Jazz, click the Jazz icon . For more information, see Set up local Eclipse clients to work with Jazz SCM.
Deploying an app from your workspace
- To deploy your app, either select a launch configuration from the run bar or create a launch configuration.
- Click the deploy icon . An instance of your app is deployed by using the current contents of your workspace and the environment that is defined in your launch configuration.
After your app is deployed, you can click the icons on the run bar to complete more actions:
- Stop the app:
- Open the deployed app:
- View the logs of the deployed app:
- Open the app's Dashboard:
- If you are developing a Node.js app, enable Live Edit mode:
- With Live Edit mode enabled, restart the app quickly, without redeployment:
- With Live Edit mode enabled, access the debugger:
The command-line shell
If you like working from a command-line shell, click the Shell icon . You can work in these ways:
- Interact with Cloud Foundry compatible targets
- Edit files in your project's directory
- Manage the editor plug-ins
- View the plug-in contributions for a service
Editing outside of the Web IDE
If you have a favorite code editor and don't want to use the Web IDE, you can use Bluemix Live Sync. Bluemix Live Sync is a command-line application that synchronizes the changes in your local file system with your cloud workspace in IBM Bluemix DevOps Services. Bluemix Live Sync makes it possible for you to work directly with your project files by using any tool.
Before you begin
Synchronizing your local environment with Bluemix
- Open a command-line window.
Sign in to Bluemix by entering this command:
Enter your user ID and password when you are prompted.
Note: Your user ID for DevOps Services can be either an IBM id or a federated ID (corporate ID). If you use federated authentication, to log in to your command-line client, you must use a personal access token instead of a password. If you don't use federated authentication, your IBM id and password work with all clients. For more information about creating a personal access token, see What's federated authentication and how does it affect me?
View a list of your Bluemix projects:
Synchronize your local environment with your project on Bluemix:
bl sync projectName
projectNameis your Bluemix app's name.
When you are finished making changes, enter
qto end synchronization.
Enabling the Desktop Sync feature to edit code locally
The Desktop Sync feature is like Live Edit mode for the command line. You also need the Desktop Sync feature to debug on the command line.
- In another command-line window, Enter these commands to enable the Desktop Sync feature:
cd localDirectory bl start
Use the launch configuration that you created in the Web IDE. After you select the launch configuration, the Desktop Sync feature is enabled in your local environment. In the command-line window that you just opened, you can view the app's URL, the debug URL, the manage URL, and view the Bluemix Live Sync state.
Refresh the browser and verify that you can see the changes that you saved to static files in the local workspace.
Disabling the Desktop Sync feature
- In the second command-line window, enter
- In the first command-line window, enter
© Copyright IBM Corporation 2013, 2016.