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 localhost or 127.0.0.1.

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 you have an AWS Cloud9 SSH development environment, see your server's documentation. For an EC2 environment, do the following:

Step 1: Set Up Your Environment with Your AWS Access Credentials

In the next step, you use the AWS Command Line Interface (AWS CLI) in your AWS Cloud9 development environment to open a port for the running application. To do this, the AWS CLI in your environment needs access to your AWS access credentials. If you have already set up your environment with your credentials, skip ahead to Step 2: Open the Port for the Running Application.

You can set up your environment with your AWS access credentials by using approaches such as the following:

  • If you are using an EC2 environment, AWS managed temporary credentials are set up in your environment by default. AWS managed temporary credentials handles AWS access credentials on your behalf for the AWS CLI to use.

  • If you are using an EC2 environment, and for some reason you cannot use AWS managed temporary credentials, attach an IAM instance profile to the Amazon EC2 instance that connects to your environment. This instance profile manages temporary credentials on your behalf for the AWS CLI to use.

  • Store your permanent AWS access credentials within the environment. For example, you can do this by running the aws configure command or by setting custom environment variables.

For more information, see Call AWS Services from an Environment.

Step 2: Open the Port for the Running Application

To open the port for your running application, in a terminal session in your environment, use the AWS CLI to run the following two commands: describe-instance and authorize-security-group-ingress.

First, run the Amazon EC2 describe-instance command to get the ID of the Amazon EC2 security group that is attached to your Amazon EC2 instance. Replace MY_ENVIRONMENT_NAME with the name of your environment. This command outputs the security group ID.

Copy
aws ec2 describe-instances --filters "Name=tag:Name,Values=*MY_ENVIRONMENT_NAME*" --query 'Reservations[*].Instances[*].SecurityGroups[*].GroupId' --output text

Note that in the preceding command, if you have more than one environment with the same name, multiple security group IDs may be output. In this case, you may want to use the Amazon EC2 console to try to get the correct security group ID. For more information, see Describing Your Security Groups in the Amazon EC2 User Guide for Linux Instances.

Second, run the Amazon EC2 authorize-security-group-ingress command as follows to open port 8080 to everyone, replacing MY_SECURITY_GROUP_ID with the security group ID output by the previous command.

Copy
aws ec2 authorize-security-group-ingress --protocol tcp --port 8080 --cidr 0.0.0.0/0 --group-id MY_SECURITY_GROUP_ID

Note

Setting --cidr to 0.0.0.0/0 provides broad access to this Amazon EC2 instance. Use this setting only for experimentation purposes.

If successful, no errors and no confirmation message will be output.

Step 3: 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, run the application again, if it was not already running.

Step 4: Distribute the Running Application URL

  1. With the application running, in the menu bar in the AWS Cloud9 IDE, do one of the following:

    • Choose Window, Share.

    • Choose Share (located next to the Preferences gear icon).

  2. In the Share this environment dialog box, in the Links to share area, give the URL in the Application box to those whom you want to view your running application.

    Note

    You may need to change the URL to start with http:// instead of https://. Also, you may need to add :8080 to the base URL. Otherwise, going to the preceding URL might show an error.