Run an Application

Before you can preview your application from within the IDE, it must be running in
the AWS Cloud9 development environment using
HTTP over port 8080, 8081, or 8082 with the IP of 127.0.0.1 or localhost.

Note

You don't have to run using HTTP over port 8080, 8081, or 8082 with the IP of 127.0.0.1 or localhost. However, you won't be able to preview your running application from within the IDE.

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

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.

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 using HTTP over port 8080, 8081, or 8082 with the IP of 127.0.0.1 or localhost in the environment,
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.

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.

We don't recommend sharing the URL in the application preview tab with others. (The
URL displays using the format
https://ENVIRONMENT_ID.vfs.cloud9.REGION_ID.amazonaws.com/.) This URL works only when the IDE for the environment is open and the application
is running in the same web browser.

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:

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.

Get the Amazon EC2 instance's ID. To get this, do one of the following:

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

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.

In the IDE for the environment, on the menu bar, choose your user icon, and then choose
Manage EC2 Instance.

In the Amazon EC2 console that displays, make a note of the instance ID that displays
in the Instance ID column. The instance ID will look similar to this: i-02ccbdf54d66e34EX.

Get the Amazon EC2 instance's public IP address. To get this, do one of the following:

In the IDE for the environment, on the menu bar, choose Share. In the Share this environment dialog box, make a note of the public IP address in the Application box.
The public IP address will look similar to this: 192.0.2.0.

In a terminal session in the IDE for the environment, run the following command to
get the Amazon EC2 instance's public IP address.

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.

In the IDE for the environment, on the menu bar, choose your user icon, and then choose
Manage EC2 Instance. In the Amazon EC2 console that displays, on the Description tab, make a note of the
public IP address for the IPv4 Public IP field. The public IP address will look similar to this: 192.0.2.0.

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, 8081, or 8082.

Note

You don't have to run using HTTP over port 8080, 8081, or 8082. If you are running on a different protocol or port, substitute it throughout this
step.
You won't be able to preview your running application from within the IDE until you
switch back to running using HTTP over port 8080, 8081, or 8082
using IP 127.0.0.1 or localhost.

In the IDE for the environment, on the menu bar, choose your user icon, and then choose
Manage EC2 Instance. Then skip ahead to step 3 in this procedure.

If choosing Manage EC2 Instance or other steps in this procedure display errors, we recommend you sign in to the
Amazon EC2 console using credentials for an IAM administrator user in your AWS account,
and then
complete the following instructions. If you cannot do this, check with your AWS account
administrator.

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

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

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.

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

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

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, 8081, or 8082, choose Cancel, and skip ahread to Step 3: Set Up the Subnet for the Instance. Otherwise, choose Edit.

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

For Type, choose Custom TCP Rule.

For Port Range, type 8080, 8081, or 8082.

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.

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, 8081, or 8082.

Note

You don't have to run using HTTP over port 8080, 8081, or 8082. If you are running on a different protocol or port, substitute it throughout this
step.
You won't be able to preview your running application from within the IDE until you
switch back to running using HTTP over port 8080, 8081, or 8082
using IP 127.0.0.1 or localhost.

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.

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

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

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

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

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

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

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

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

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

Choose Add another rule.

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

For Type, choose Custom TCP Rule.

For Port Range, type 8080, 8081, or 8082.

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.

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.

Note

You won't be able to preview your running application from within the IDE until you
switch back to using IP 127.0.0.1 or localhost
running HTTP over port 8080, 8081, or 8082.

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 the correct protocol, and add the port number if it
is
not the default for that protocol (for example, http://192.0.2.0:8080/index.html using HTTP over port 8080).

You don't have to run using HTTP over port 8080, 8081, or 8082. However, you won't be able to preview your running application from within the IDE
until you switch back to running using HTTP over port 8080, 8081, or 8082
using IP 127.0.0.1 or localhost.

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

We don't recommend sharing the URL in the application preview tab in the IDE with
others. (The URL displays using the format
https://ENVIRONMENT_ID.vfs.cloud9.REGION_ID.amazonaws.com/.) This URL works only when the IDE for the environment is open and the application
is running in the same web browser.