Edit the code using Eclipse Web IDE

In this lab, edit the code of the application deployed in the previous lab by using Eclipse Orion Web IDE. Learn about the test features available in the Web IDE to push the changes to the repository, and see that the deployment pipeline is triggered.

  1. Go back to your browser tab with the toolchain, and click the left arrow to return to the page for your toolchain.The Overview panel for the toolchain will be shown with the current tools displayed.

  2. Click the Eclipse Orion Web IDE icon to launch a web editor and code management environment hosted on Bluemix and running in the browser.

    Make note of the pencil icon in the upper left, next to the repository name. This is the edit mode for the IDE.

  3. Click the manifest.yml file in the left listing to open it in the editor.
  4. Update the memory value to 128M. The workspace contents are automatically saved, but you can click File > Save, if you prefer.

    Before committing this change to the repository, you can use a launch configuration to set up a test deployment of the application to ensure that it works as needed.

  5. Select the Create new launch configuration menu, then click the plus (+) icon to show a menu.

    Note that you can change almost every aspect of the application deployment, target region, organization, space, and also alter some settings from the manifest file.

  6. In the manifest file, change the Launch Config Name to sample-nodejs-cloudant-test.
  7. Change the Host name to nodejs-cloudant-test-<date>.
  8. Click Save.
  9. Click Deploy app. This creates a Bluemix deployment using the settings in the launch configuration selected, using the contents of the current workspace.

    There will be status updates in the launch configuration page while the application deploys. Deployment will take 2 – 3 minutes because it requires a full staging of the application. When the application is deployed for testing, the menu will update with StopOpen, and some other buttons become active.

  10. Click Open the Deployed App (square with arrow pointing up and to the right) to access the application in another tab. It uses the original database.Note that at this point, the original application deployed by the toolchain is unaffected. This is a new copy of the application running on the host that you set in the launch configuration.

  11. Click the Live Edit slider to activate the Live Edit mode, then confirm the update to Live Edit mode.Note: The Orion Web IDE includes a feature to allow dynamic updates to Node.js applications called Live Edit. The application is redeployed in live edit mode. This might take a minute or so. When it completes, the Restart and Debug tools menu items appear to the right of the Live Edit slider.

    In live edit mode, anything you change in the workspace is synchronized into the deployed test application. When live edit mode is active, the icon to restart the application without deploying is enabled on the menu bar. This saves time when making minor changes to Node.js applications. Restarting the application allows changes to be tested immediately without needing to wait for a redeployment.

  12. Open the views/index.html file, and update the banner on line 15.

    After you move the cursor off the line with the banner, the file change in the workspace is synchronized. You can check this by reloading the application in another tab. Your changes are there, even without needing to redeploy (or restart) the Cloud Foundry application.

  13. If it looks like all the changes are working as needed, stop the test app deployment by clicking Stop.
  14. Click the Git icon on the left side of the IDE below the Edit This will open the IDE’s interface to a Git-based source code repository.

    In the right pane, there is a list of the changed files compared to the origin repository. One file is new (for the launch configuration you added), but the other two can be opened to examine the changes to each file.

  15. Add a comment in the Commit message pane, and then click Commit.

  16. Click Push to synchronize these changes to the origin repository.

    If you move quickly by clicking the left arrow to go back to the toolchain Overview and then click the Delivery Pipeline, you might be able to catch the pipeline in action.

    You will see in the Build stage that there was an input update, based upon your push to the Git repository. The Build stage ran a simple builder, and then the Deploy stage will deploy the modified application. When it finishes, it will have a green status bar.

    Click the link shown in the execution result for the Deploy stage. All changes you made in the web editor are live.

  17. Return to the Bluemix App dashboard, and see that the memory footprint is changed.

You’ll see an additional stopped application for the deployment that you performed from the web IDE. It has 512MB memory (more than 128MB) because running in Live Edit mode requires additional memory to be allocated to the app to support real-time synchronization and debugging tools.