Tutorial: Microclimate Developer Tools for VS Code

Follow this example workflow to use the tools for VS Code to develop a Microclimate Node.js project. All the features demonstrated in this tutorial are also available for Microprofile and Spring projects.
For more detail on any of the commands, see the commands overview.

Prerequisites

  • Run a local Microclimate instance, Version 18.12 or later.
  1. First, connect to your Microclimate instance. For more information, see the getting started page. Proceed after your projects appear with the Microclimate connection.
  2. Create a Node.js project in Microclimate. Skip this step if a Node.js project already exists. This tutorial assumes that your project is called nodeproject.
    • Right-click the connection in the Microclimate tree and select Create new project. The Microclimate New project page opens in the browser.
    • Create a Node.js project. The default project works for this tutorial, but for more information, see creating a project. After the project is created, it appears in the Microclimate tree in VS Code.
  3. Make the new project your workspace folder because it’s the only project that you need to work on for this tutorial.
    • Right-click the project and select Open Folder as Workspace. VS Code restarts with the selected project folder as the workspace folder. The tools reconnect to Microclimate automatically.
  4. Open the Project Overview page to view project information.
  5. To view the project’s standard output and error as you develop it, open the application logs.
    • Right-click the project and select Show Application Log. The log appears in the Output view.
    • Node.js projects do not have build logs, but if you work on another type of project, you can also view the build log.
  6. Open a file to edit. For example, modify the health endpoint of the default Node.js project.
    • Open a Javascript file, such as nodeproject/server/routers/health.js.
    • Make a code change.
    • For example, you can add the following endpoint to health.js after the existing GET / middleware function:
        router.get('/test', function (req, res, next) {
            return res.send("Yep, it worked!!");
        });
      
    • If you want to make a more complex change, see adding a new endpoint.
    • Microclimate detects the file changes and restarts your application.
      • In the Microclimate tree, the application stops and starts again as the application server restarts.
      • You can also see nodemon restart the project in the application logs.
    • At this point, your VS Code should look similar to the following example: Editing nodeproject
  7. To make sure your code change was picked up, test your new endpoint.
    • Right-click the project and select Open in Browser. The project root endpoint opens in the browser, and the IBM Cloud Starter page appears.
    • Navigate to the new endpoint. If you copied the previous snippet, add /health/test/ to the URL.
    • See the new response:
      New endpoint response
  8. You can debug your application within the Docker container. To debug a Microclimate project, restart it in Debug mode.
    • Right-click the project and select Restart in Debug Mode.
    • The project restarts into the Debugging state.
    • A debug launch configuration is created in nodeproject/.vscode/launch.json.
    • The debugger attaches, and VS Code opens the Debug view.
    • You can detach and reattach the debugger at any time, as long as the project is still in Debug mode.
  9. All of the VS Code debug functionality is now available.
    • If your code matches the screenshot, set a breakpoint at line 11 in health.js.
    • Refresh the new endpoint page that you opened in step 7 so a new request is made, and the breakpoint gets hit.
    • VS Code suspends your application at the breakpoint. Here you can step through the code, inspect variables, see the call stack, and evaluate expressions in the Debug Console. Debugging