This article will walk you through the steps on how to create a button in your guided project that will allow your learners to open a running application in an integrated cloud IDE.

About the feature

Every so often guided projects require learners to create and then run an application. The learners can create and run these applications inside the integrated cloud IDE.

As an author, you might want your learners to open a running application inside their instance of cloud IDE. Rather than specifying the instruction on how to open a running application in cloud IDE using plain text, you can now create a button that will achieve exactly that.

Instructions

1. Click on the rocket icon inside the toolbar
   
   The following dialog menu will pop up.
   

2. Fill in the following fields:
   

   1. Button label: The label that will show up on your button
   2. Port: The port that the application is running on(e.g. 3000, 8000).
   3. Display option: Internal or External display option.
      • Internal: The application will be opened in a new tab inside cloud IDE.
      • External: The application will be opened in a new tab of a browser.
   4. Route(Optional): This field is optional (if you leave it empty, the default route / will be selected). If the application expects traffic to several different routes, you can specify which one to redirect the user to (See example below for more details).

3. Click "Enter"
   

Congratulations! You have successfully created a button that will open a running application in cloud IDE whenever a learner clicks on it.

As you can see, a directive was autogenerated inside your editor. This directive is detected by the renderer and is converted to an actual button.

• Make sure to always maintain an empty line directly above and below the directive for the renderer to correctly identify the directive.

• If you choose so, you can manually modify the fields of the "startApplication" directive in the editor by changing the text inside port="", display="", name="", or route="".

Example (Learners' perspective)

Now that you know how to create a button to open a running application in the IDE, let's take a look at it from the learners' perspective.

As you can see, we are using the guided project from the previous steps. The instructions are on the left, and the cloud IDE is on the right.

For demonstration purposes, my-app folder was manually created inside the learner's /home/project directory beforehand.

• Inside the my-app folder, you can see an example of a simple web application that uses Express, a back-end web application framework for Node.js. This application expects traffic to two different routes / and /about and sends requests "Hello World!" and "About us page!" respectively. The application also uses port 3000 as a communication endpoint. We run the application by executing node app.js, and the message Example app listening at http://localhost:3000 is indicative that everything is up and running.

When the "My application" button is clicked, a new tab inside cloud IDE is opened displaying the response message "Hello World!" (this is because in the previous steps of creating a button, we left the Route field empty, which assumed / route).

On the other hand, if we had specified Route as /about

the directive would have been modified as follows:

and clicking the button would have displayed the response message "About us page!".

Also if we had specified Display option as Externally

the directive would have been modified as follows:

and clicking the button would have opened the application in a new tab of a browser.