Menu
AWS Cloud9
User Guide

Previewing Running Applications in the AWS Cloud9 Integrated Development Environment (IDE)

You can use the AWS Cloud9 IDE to preview a running application from within the IDE.

Run an Application

Before you can preview your application, it must be running on the correct port and IP in the AWS Cloud9 development environment.

Be sure to run on port 8080 and use the IP of 127.0.0.1 or localhost.

To write the code to run your application on this port and IP, see your application's documentation.

To run your application, see Run Your Code.

To test this behavior, for example you could add the following JavaScript code to a file with a name such as server.js in the root of your environment. This code runs a server using Node.js, as follows.

Copy
var http = require('http'); var fs = require('fs'); var url = require('url'); http.createServer( function (request, response) { var pathname = url.parse(request.url).pathname; console.log("Trying to find '" + pathname.substr(1) + "'..."); fs.readFile(pathname.substr(1), function (err, data) { if (err) { response.writeHead(404, {'Content-Type': 'text/html'}); response.write("ERROR: Cannot find '" + pathname.substr(1) + "'."); console.log("ERROR: Cannot find '" + pathname.substr(1) + "'."); } else { console.log("Found '" + pathname.substr(1) + "'."); response.writeHead(200, {'Content-Type': 'text/html'}); response.write(data.toString()); } response.end(); }); }).listen(8080, 'localhost'); // Or '127.0.0.1' instead of 'localhost'.

Or you could add the following Python code to a file with a name such as server.py in the root of your environment. This code runs a server using Python, as follows.

Copy
import os import SimpleHTTPServer import SocketServer ip = 'localhost' # Or '127.0.0.1' instead of 'localhost'. port = '8080' Handler = SimpleHTTPServer.SimpleHTTPRequestHandler httpd = SocketServer.TCPServer((ip, int(port)), Handler) httpd.serve_forever()

Next, add the following HTML code to a file with a name such as index.html in the root of your environment.

Copy
<html> <head> <title>Hello Home Page</title> </head> <body> <p style="font-family:Arial;color:blue">Hello, World!</p> </body> </html>

To see this file's HTML output on the application preview tab, run server.js with Node.js or server.py file with Python. Then follow the instructions in the next procedure to preview it. On the application preview tab, add /index.html to the end of the URL, and then press Enter.

Preview a Running Application

With your application already running on the correct port and IP address in the environment as described in the previous section, and with the corresponding application code file open and active in the AWS Cloud9 IDE, choose one of the following on the menu bar:

  • Preview, Preview Running Application

  • Tools, Preview, Preview Running Application

This opens an application preview tab within the environment, and then displays the application's output on the tab.

Note

If the application is not already running, you will see an error on the application preview tab. Run or restart the application, and then choose the menu bar command again.

The Preview Settings menu on the application preview tab is currently not functional, and choosing any of its menu commands will have no effect.

Reload an Application Preview

On the application preview tab, choose the Refresh button (the circular arrow).

Note

This command does not restart the server. It just refreshes the contents of the application preview tab.

Change the Application Preview Type

On the application preview tab, choose one of the following in the preview type list:

  • Browser: Previews the output in a web browser format.

  • Raw Content (UTF-8): Attempts to preview the output in Unicode Transformation Format 8-bit (UTF-8) format, if applicable.

  • Markdown: Attempts to preview the output in Markdown format, if applicable.

Open an Application Preview in a Separate Web Browser Tab

On the application preview tab, choose Pop Out Into New Window.

Note

The application preview will not be displayed in a separate web browser tab unless the AWS Cloud9 IDE is also running in at least one other tab in the same web browser.

Switch to a Different Preview URL

On the application preview tab, type the path to a different URL in the address bar. The address bar is located between the Refresh button and the preview type list.

Share a Running Application over the Internet

After you preview your running application, you can make it available to others over the internet.

To do this, if an Amazon EC2 instance is connected to your environment, follow these steps. Otherwise, see your server's documentation.

Step 1: Get the ID and the IP Address of the Instance

In this step, you note the instance ID and public IP address for the Amazon EC2 instance that is connected to the environment. You need the instance ID in a later step to allow incoming application requests. Then you give the public IP address to others so that they can access the running application.

  1. In a terminal session in the AWS Cloud9 IDE for the environment, run the following command to get the Amazon EC2 instance's ID.

    Copy
    curl http://169.254.169.254/latest/meta-data/instance-id

    The instance ID will look similar to this: i-02ccbdf54d66e34EX. Make a note of this instance ID.

  2. Run the following command to get the Amazon EC2 instance's public IP address.

    Copy
    curl http://169.254.169.254/latest/meta-data/public-ipv4

    The public IP address will look similar to this: 192.0.2.0. Make a note of this public IP address.

Step 2: Set Up the Security Group for the Instance

In this step, you use the Amazon EC2 console to set up the Amazon EC2 security group for the instance that is connected to the environment, to allow incoming HTTP requests over port 8080.

  1. Sign in to the AWS Management Console, if you are not already signed in, at https://console.aws.amazon.com.

    For this step, we recommend you sign in using credentials for an IAM administrator user in your AWS account. If you cannot do this, check with your AWS account administrator.

  2. Open the Amazon EC2 console. To do this, in the AWS navigation bar, choose Services. Then choose EC2.

  3. In the AWS navigation bar, choose the AWS Region where the environment is located.

  4. If the EC2 Dashboard is displayed, choose Running Instances. Otherwise, in the service navigation pane, expand Instances if it is not already expanded, and then choose Instances.

  5. In the list of instances, select the instance where the Instance ID matches the instance ID you noted earlier.

  6. In the Description tab for the instance, choose the security group link next to Security groups.

  7. With the security group displayed, look on the Inbound tab. If a rule already exists where Type is set to Custom TCP Rule and Port Range is set to 8080, choose Cancel, and skip ahread to Step 3: Set Up the Subnet for the Instance. Otherwise, choose Edit.

  8. In the Edit inbound rules dialog box, choose Add Rule.

  9. For Type, choose Custom TCP Rule.

  10. For Port Range, type 8080.

  11. For Source, choose Anywhere.

    Note

    Choosing Anywhere for Source allows incoming requests from any IP address. To restrict this to specific IP addresses, choose Custom and then type the IP address range, or choose My IP to restrict this to requests from your IP address only.

  12. Choose Save.

Step 3: Set Up the Subnet for the Instance

In this step, you use the consoles for Amazon EC2 and Amazon Virtual Private Cloud (Amazon VPC) to set up the subnet for the Amazon EC2 instance that is connected to the environment, to also allow incoming HTTP requests over port 8080.

  1. With the Amazon EC2 console already open from the previous step, in the service navigation pane, expand Instances if it is not already expanded, and then choose Instances.

  2. In the list of instances, select the instance where the Instance ID matches the instance ID you noted earlier.

  3. In the Description tab for the instance, note the value of Subnet ID. It should look similar to this: subnet-1fab8aEX.

  4. Open the Amazon VPC console. To do this, in the AWS navigation bar, choose Services. Then choose VPC.

  5. If the VPC Dashboard is displayed, choose Subnets. Otherwise, in the service navigation pane, choose Subnets.

  6. In the list of subnets, select the subnet where the Subnet ID value matches the one you noted earlier.

  7. On the Summary tab, choose the network ACL link next to Network ACL.

  8. In the list of network ACLs, select the network ACL. (There is only one network ACL.)

  9. Look on the Inbound Rules tab for the network ACL. If a rule already exists where Type is set to HTTP* (8080), skip ahread to Step 4: Change the Running Application IP. Otherwise, choose Edit.

  10. Choose Add another rule.

  11. For Rule #, type a number for the rule (for example, 200).

  12. For Type, choose Custom TCP Rule.

  13. For Port Range, type 8080.

  14. For Source, type the range of IP addresses to allow incoming requests from. For example, to allow incoming requests from any IP address, type 0.0.0.0/0.

  15. With Allow / Deny set to ALLOW, choose Save.

Step 4: Change the Running Application IP

In your code, switch from using IP 127.0.0.1 or localhost to using IP 0.0.0.0. To use this new IP, stop the application if is already running, and then run the application again.

Step 5: Share the Running Application URL

With the application running, give to others the public IP address you noted earlier. Be sure to start the URL with http:// and add :8080 (for example, http://192.0.2.0:8080/index.html).

Note

If users make requests to the preceding URL, and those requests originate from a virtual private network (VPN) that blocks traffic over port 8080, those requests may fail. Those users must use a different network that allows traffic over port 8080 instead. For more information, see your network administrator.