IDE Tutorial for AWS Cloud9

In this tutorial, you set up an AWS Cloud9 development environment and then tour the AWS Cloud9 integrated development environment (IDE). Along the way, you use the IDE to code, run, and debug your first app.

Note

Completing this tutorial might result in charges to your AWS account. These include possible charges for Amazon EC2. For more information, see Amazon EC2 Pricing.

Prerequisites

To successfully complete this tutorial, you must first complete the steps in Express Setup or Team Setup.

Step 1: Create an Environment

In this step, you use AWS Cloud9 console to create and then open an AWS Cloud9 development environment.

If you already have an environment, open it, and then skip ahead to Step 2: Tour the IDE.

In AWS Cloud9, a development environment (or just environment) is a place where you store your development project's files and where you run the tools to develop your apps. In this tutorial, you create a special kind of environment called an EC2 environment. For this kind of environment, AWS Cloud9 creates and manages a new Amazon EC2 instance running Amazon Linux, creates the environment, and then connects the environment to the newly-created instance. When you open the environment, AWS Cloud9 displays the AWS Cloud9 IDE that enables you to work with the files and tools in that environment.

You can create a blank EC2 environment with the AWS Management Console or the AWS Command Line Interface (AWS CLI).

Note

When you create an EC2 environment, the environment doesn't contain any sample code by default. To create an environment along with sample code, see one of the following topics instead.

After you create the environment, skip ahead to Step 2: Tour the IDE.

Create an EC2 Environment with the Console

Sign in to the AWS Cloud9 console, at https://console.aws.amazon.com/cloud9/.
After you sign in to the AWS Cloud9 console, in the top navigation bar, choose an AWS Region to create the environment in. For a list of available AWS Regions, see AWS Cloud9 in the Amazon Web Services General Reference.
If a welcome page is displayed, for New AWS Cloud9 environment, choose Create environment. Otherwise, choose Create environment.

Or:
On the Name environment page, for Name, type a name for your environment.

In this tutorial, we use the name my-demo-environment. If you use a different environment name, substitute it throughout this tutorial.
For Description, type something about your environment. For example, This environment is for the AWS Cloud9 tutorial.
Choose Next step.
On the Configure settings page, for Environment type, leave the default choice of Create a new instance for environment (EC2).

Choosing Create a new instance for enviroment (EC2) means you want AWS Cloud9 to create a new Amazon EC2 instance and then connect the environment to the newly-created instance. To use an existing cloud compute instance or your own server instead (which we call an SSH environment), see Creating an Environment.

Note

Choosing Create a new instance for environment (EC2) might result in possible charges to your AWS account for Amazon EC2.
For Instance type, leave the default choice. This choice has relatively low RAM and vCPUs, which is sufficient for this tutorial.

Note

Choosing instance types with more RAM and vCPUs might result in additional charges to your AWS account for Amazon EC2.
Expand Network settings (advanced).

AWS Cloud9 uses Amazon Virtual Private Cloud (Amazon VPC) in your AWS account to communicate with the newly-created Amazon EC2 instance. Depending on how Amazon VPC is set up in your AWS account, do one of the following.

If you're not sure what to choose, we recommend that you skip ahead to step 11 in this procedure.

When you skip past Network settings (advanced) and leave the preselected default settings, AWS Cloud9 attempts to automatically use the default VPC in your account with its single subnet.

Does the account have a VPC with at least one subnet in that VPC?	Is the VPC you want AWS Cloud9 to use the default VPC in the account?	Does the VPC have a single subnet?	Do this
No	—	—	If no VPC exists, create one. To do this, choose Create new VPC, and then follow the on-screen directions. For more information, see Create an Amazon VPC for AWS Cloud9. If a VPC exists but has no subnet, create one. To do this, choose Create new subnet, and then follow the on-screen directions. For more information, see Create a Subnet for AWS Cloud9.
Yes	Yes	Yes	Skip ahead to the step 11 in this procedure. When you skip past Network settings (advanced) and leave the preselected default settings, AWS Cloud9 attempts to automatically use the default VPC in your account with its single subnet.
Yes	Yes	No	Expand Network settings (advanced). For Subnet, choose the subnet you want AWS Cloud9 to use in the preselected default VPC.
Yes	No	—	Expand Network settings. For Network (VPC), choose the VPC that you want AWS Cloud9 to use. For Subnet, choose the subnet you want AWS Cloud9 to use in that VPC.

For more information, see Amazon VPC Settings.

For Cost-saving setting, choose the amount of time until AWS Cloud9 shuts down the Amazon EC2 instance for the environment after all web browser instances that are connect to the IDE for the environment have been closed. Or leave the default choice.

Note

Choosing a shorter time period might result in fewer charges to your AWS account. Likewise, choosing a longer time might result in more charges.
Choose Next step.
On the Review choices page, choose Create environment. Wait while AWS Cloud9 creates your environment. This can take several minutes. Please be patient.

After your environment is created, the AWS Cloud9 IDE is displayed. You'll learn about the AWS Cloud9 IDE in the next step.

If AWS Cloud9 doesn't display the IDE after at least five minutes, there might be a problem with your web browser, your AWS access permissions, the instance, or the associated virtual private cloud (VPC). For possible fixes, see Cannot Open an Environment in Troubleshooting.

To learn more about what you can do with an environment after you finish this tutorial, see Working with Environments.

Skip ahead to Step 2: Tour the IDE.

Create an EC2 Environment with the AWS CLI

Install and configure the AWS CLI, if you have not done so already. To do this, see the following in the AWS CLI User Guide.
- Installing the AWS Command Line Interface
- Quick Configuration
We recommend you configure the AWS CLI using credentials for one of the following.
- The IAM user you created in Team Setup.
- An IAM administrator user in your AWS account, if you will be working regularly with AWS Cloud9 resources for multiple users across the account. If you cannot configure the AWS CLI as an IAM administrator user, check with your AWS account administrator. For more information, see Creating Your First IAM Admin User and Group in the IAM User Guide.
- An AWS account root user, but only if you will always be the only one using your own AWS account, and you don't need to share your environments with anyone else. For more information, see Creating, Disabling, and Deleting Access Keys for Your AWS Account in the Amazon Web Services General Reference.
Run the AWS Cloud9 create-environment-ec2 command.
```
aws cloud9 create-environment-ec2 --name my-demo-environment --description "This environment is for the AWS Cloud9 tutorial." --instance-type t2.micro --region us-east-1 --subnet-id subnet-12a3456b
```
In the preceding command:
- --name represents the name of the environment. In this tutorial, we use the name my-demo-environment. If you use a different environment name, substitute it throughout this tutorial.
- --description represents an optional description for the environment.
- --instance-type represents the type of Amazon EC2 instance AWS Cloud9 will launch and connect to the new environment. This example specifies t2.micro, which has relatively low RAM and vCPUs and is sufficient for this tutorial. Specifying instance types with more RAM and vCPUs might result in additional charges to your AWS account for Amazon EC2. For a list of available instance types, see the create environment wizard in the AWS Cloud9 console.
- --region represents the ID of the AWS Region for AWS Cloud9 to create the environment in. For a list of available AWS Regions, see AWS Cloud9 in the Amazon Web Services General Reference.
- --subnet-id represents the subnet you want AWS Cloud9 to use. Replace subnet-12a3456b with the ID of the subnet, which must be compatible with AWS Cloud9. For more information, see Amazon VPC Settings.
- By default, AWS Cloud9 shuts down the Amazon EC2 instance for the environment 30 minutes after all web browser instances that are connect to the IDE for the environment have been closed. To change this, add --automatic-stop-time-minutes along with the number of minutes. A shorter time period might result in fewer charges to your AWS account. Likewise, a longer time might result in more charges.
- By default, the entity that calls this command owns the environment. To change this, add --owner-id along with the Amazon Resource Name (ARN) of the owning entity.

After you successfully run this command, open the AWS Cloud9 IDE for the newly-created environment. To do this, see Opening an Environment. Then return to this topic and continue on with Step 2: Tour the IDE to learn how to use the AWS Cloud9 IDE to work with your new environment.

If you try to open the environment, but AWS Cloud9 doesn't display the IDE after at least five minutes, there might be a problem with your web browser, your AWS access permissions, the instance, or the associated virtual private cloud (VPC). For possible fixes, see Cannot Open an Environment in Troubleshooting.

To learn more about what you can do with an environment after you finish this tutorial, see Working with Environments.

Step 2: Tour the IDE

In the previous step, you created an environment, and the AWS Cloud9 IDE is now displayed. In this step, you'll learn how to use the IDE.

The AWS Cloud9 IDE is a collection of tools you use to code, build, run, test, debug, and release software in the cloud. In this step, you experiment with the most common of these tools. Toward the end of this tour, you use these tools to code, run, and debug your first app.

The menu bar, at the top edge of the IDE, contains common commands for working with files and code and changing IDE settings. You can also preview and run code from the menu bar.

You can hide the menu bar by choosing the arrow at its edge, as follows.

Hiding the menu bar in the AWS Cloud9 IDE

You can show the menu bar again by choosing the arrow in the middle of where the menu bar was earlier, as follows.

Showing the menu bar again in the AWS Cloud9 IDE

Compare your results to the following.

Hiding and showing the menu bar in the AWS Cloud9 IDE

You can use the IDE to work with a set of files in the next several sections in this tutorial. To set up these files, choose File, New File.

Next, copy the following text into the Untitled1 editor tab.


fish.txt
--------
A fish is any member of a group of organisms that consist of
all gill-bearing aquatic craniate animals that lack limbs with
digits. They form a sister group to the tunicates, together
forming the olfactores. Included in this definition are
lampreys and cartilaginous and bony fish as well as various
extinct related groups.

To save the file, choose File, Save. Name the file fish.txt, and then choose Save.

Repeat these instructions, saving the second file as cat.txt, with the following contents.


cat.txt
-------
The domestic cat is a small, typically furry, carnivorous mammal.
They are often called house cats when kept as indoor pets or
simply cats when there is no need to distinguish them from
other felids and felines. Cats are often valued by humans for
companionship and for their ability to hunt.

There are often several ways to do things in the IDE. For example, to hide the menu bar, instead of choosing the arrow at its edge, you can choose View, Menu Bar. To create a new file, instead of choosing File, New File you can press Alt-N (for Windows/Linux) or Control-N (for MacOS). To reduce this tutorial's length, we only describe one way to do things. As you get more comfortable with the IDE, feel free to experiment and figure out the way that works best for you.

Step 2.2: Dashboard

The dashboard gives you quick access to each of your environments. From the dashboard, you can create, open, and change the setting for an environment.

To open the dashboard, on the menu bar, choose AWS Cloud9, Go To Your Dashboard, as follows.

To view the settings for your environment, choose the title inside of the my-demo-environment card.

To return to the IDE for your environment, do one of the following.

Choose your web browser's back button, and then choose Open IDE inside of the my-demo-environment card.
In the navigation breadcrumb, choose Your environments, and then choose Open IDE inside of the my-demo-environment card.

Note

It can take a few moments for the IDE to display again. Please be patient.

Step 2.3: Environment Window

The Environment window shows a list of your folders and files in the environment. You can also show different types of files, such as hidden files.

To hide the Environment window and the Environment button, choose Window, Environment on the menu bar.

To show the Environment button again, choose Window, Environment again.

To show the Environment window, choose the Environment button.

The Environment window in the AWS Cloud9 IDE

To show hidden files, in the Environment window, choose the gear icon, and then choose Show Hidden Files, as follows.

Showing hidden files using the Environment window

To hide hidden files, choose the gear icon again, and then choose Show Hidden Files again.

Step 2.4: Editor, Tabs, and Panes

The editor is where you can do things such as write code, run a terminal session, and change IDE settings. Each instance of an open file, terminal session, and so on is represented by a tab. Tabs can be grouped into panes. Tabs are shown at the edge of their pane, as follows.

Tabs at the edge of a pane in the AWS Cloud9 IDE

To hide tabs, choose View, Tab Buttons on the menu bar.

To show tabs again, choose View, Tab Buttons again.

To open a new tab, choose the + icon at the edge of the row of tabs. Then choose one of the available commands, for example, New File, as follows.

New tab with commands to choose, such as New File

To display two panes, choose the icon that looks like a drop-down menu, which is at the edge of the row of tabs. Then choose Split Pane in Two Rows, as follows.

Showing two panes by splitting one pane into two rows

To return to a single pane, choose the drop-down menu icon again, and then choose the single square icon, as follows.

Step 2.5: Console

The console is an alternate place for creating and managing tabs, as follows.

You can also change the console's display so that it takes over the entire IDE.

To hide the console, choose View, Console on the menu bar.

To show the console again, choose View, Console again.

To expand the console, choose the resize icon, which is at the edge of the console, as follows.

Expanding the size of the console display

To shrink the console, choose the resize icon again.

Step 2.6: Open Files Section

The Open Files section shows a list of all files that are currently open in the editor. Open Files is part of the Environment window, as follows.

Open Files section in the Environment window

To open the Open Files section, choose View, Open Files on the menu bar.

To switch between open files, choose fish.txt and then cat.txt in the Open Files section.

To hide the Open Files section, choose View, Open Files again.

Step 2.7: Gutter

The gutter, at the edge of each file in the editor, shows things like line numbers and contextual symbols as you work with files, as follows.

To hide the gutter, choose View, Gutter on the menu bar.

To show the gutter again, choose View, Gutter again.

Step 2.8: Status Bar

The status bar, at the edge of each file in the editor, shows things like line and character numbers, file type preference, space and tab settings, and related editor settings, as follows.

To hide the status bar, choose View, Status Bar on the menu bar.

To show the status bar, choose View, Status Bar again.

To go to a specific line number, choose a tab such as cat.txt if it's not already selected. Then in the status bar, choose the line and character number (it should be something like 7:45). Type a line number (like 4), and then press Enter, as follows.

Going to specific line numbers using the AWS Cloud9 status bar

To change the file type preference, in the status bar, choose a different file type. For example, for cat.txt, choose Ruby to see the syntax colors change. To go back to plain text colors, choose Plain Text, as follows.

Changing file type preference in the AWS Cloud9 status bar

Step 2.9: Outline Window

You can use the Outline window to quickly go to a specific file location.

To hide the Outline window and Outline button, choose Window, Outline on the menu bar.

To show the Outline button again, choose Window, Outline again.

To show the Outline window, choose the Outline button.

To see how the Outline window works, create a file named hello.rb. Copy the following code into the file.


def say_hello(i)
  puts "Hello!"
  puts "i is #{i}"
end

def say_goodbye(i)
  puts "i is now #{i}"
  puts "Goodbye!"
end

i = 1
say_hello(i)
i += 1
say_goodbye(i)

Then, in the Outline window, choose say_hello(i), and then choose say_goodbye(i), as follows.

Step 2.10: Go Window

You can use the Go window to open a file in the editor, go to a symbol's definition, run a command, or go to a line in the active file in the editor.

To hide the Go window and Go button (the magnifying glass icon), choose Window, Go on the menu bar.

To show the Go button again, choose Window, Go again.

To show the Go window, choose the Go button (the magnifying glass).

With the Go window showing, you can:

Type a forward slash (/) followed by part or all of a file name. In the list of matching files that displays, choose a file to open it in the editor. For example, typing /fish lists fish.txt, while typing /.txt lists both fish.txt and cat.txt.

Note

File search is scoped only to non-hidden files and non-hidden folders in the Environment window.
Type an at symbol (@) followed by the name of a symbol. In the list of matching symbols that displays, choose a symbol to go to it in the editor. For example, with the hello.rb file open and active in the editor, type @hello to list say_hello(i), or type @say to list both say_hello(i) and say_goodbye(i).

Note

If the active file in the editor is part of a supported language project, symbol search is scoped to the current project. Otherwise, symbol search is scoped only to the active file in the editor. For more information, see Working with Language Projects.
Type a dot (.) followed by the name of a command. In the list of commands that displays, choose a command to run it. For example, typing .closetab and then pressing Enter closes the current tab in the editor. For a list of available commands, see the Commands Reference.
Type a colon (:) followed by a number to go to that line number in the active file in the editor. For example, with the hello.rb file open and active in the editor, type :11 to go to line 11 in that file.

To see the keybindings for each of these actions based on the current keyboard mode and operating system, see each of the available Go To commands on the Go menu in the menu bar.

Step 2.11: Immediate Tab

The Immediate tab enables you to test small snippets of JavaScript code. To see how the Immediate tab works, do the following.

Open an Immediate tab by choosing Window, New Immediate Window on the menu bar.
Run some code in the Immediate tab. To try this, type the following code into the window, pressing Shift-Enter after typing line 1 and again after line 2. Press Enter after line 3. (If you press Enter instead of Shift-Enter after you type line 1 or line 2, the code will run earlier than you want it to.)
```
for (i = 0; i <= 10; i++) { // Press Shift-Enter after typing this line.
  console.log(i)            // Press Shift-Enter after typing this line.
}                           // Press Enter after typing this line. The numbers 0 to 10 will be printed.
```

Step 2.12: Process List

The Process List shows all of the running processes. You can stop or even forcibly stop processes that you don't want to run anymore. To see how the Process List window works, do the following.

Show the Process List by choosing Tools, Process List on the menu bar.
Find a process. In the Process List, type the name of the process.
Stop or forcibly stop a process. In the list of processes, choose the process, and then choose Kill or Force Kill, as follows.

Step 2.13: Preferences

Preferences include the following settings.

Settings for the current environment only, such as whether to use soft tabs in the editor, the file types to ignore, and code completion behaviors for languages such as PHP and Python.
Your user settings across each of your environments, such as colors, fonts, and editor behaviors.
Your keybindings, such as which shortcut key combinations you prefer to use to work with files and the editor.
The IDE's overall theme.

To show preferences, choose AWS Cloud9, Preferences on the menu bar. The following is displayed.

Showing preferences in the AWS Cloud9 IDE

Step 2.14: Terminal

You can run one or more terminal sessions in the IDE. To start a terminal session, choose Window, New Terminal on the menu bar.

You can try running a command in the terminal. For example, in the terminal, type echo $PATH (to print the value of the PATH environment variable), and then press Enter.

You can also try running additional commands. For example, try commands such as the following.

pwd to print the path to the current directory.
aws --version to print version information about the AWS CLI.
ls -l to print information about the current directory.

Using the terminal in the AWS Cloud9 IDE

Step 2.15: Debugger Window

You can use the Debugger window to debug your code. For example, you can step through running code a portion at a time, watch the values of variables over time, and explore the call stack.

To hide the Debugger window and Debugger button, choose Window, Debugger on the menu bar.

To show the Debugger button again, choose Window, Debugger again.

To show the Debugger window, choose the Debugger button.

You can experiment with using the Debugger window and some JavaScript code. To try this, do the following.

Prepare to use the Debugger window to debug JavaScript code by installing Node.js into your environment, if it isn't already installed. To confirm whether your environment has Node.js installed, run the node --version command. If Node.js is installed, the Node.js version number is output, and you can skip ahead to step 3 in this procedure to write some JavaScript code.
To install Node.js, do the following.
1. Run the following two commands, one at a time, to be sure your environment has the latest updates, and then download Node Version Manager (nvm). (nvm is a simple Bash shell script that is useful for installing and managing Node.js versions. For more information, see Node Version Manager on GitHub.)
```
sudo yum -y update
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
```
2. Use a text editor to update your ~/.bashrc file to enable nvm to load. For example, in the Environment window of the IDE, choose the gear icon, and then choose Show Home in Favorites. Repeat this step and choose Show Hidden Files as well.
3. Open the ~/.bashrc file.
4. Type or paste the following code at the end of the file to enable nvm to load.
```
export NVM_DIR="/home/ec2-user/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm.
```
5. Save the file.
6. Start a new terminal session, and then run this command to install the latest version of Node.js.
```
nvm install node
```
Write some JavaScript code to debug. For example, create a file, add the following code to the file, and save it as hello.js.
```
var i;

i = 10;

console.log("Hello!");
console.log("i is " + i);

i += 1;

console.log("i is now " + i);
console.log("Goodbye!");
```
Add some breakpoints to the code. For example, in the gutter, choose the margin next to lines 6 and 10. A red circle is displayed next to each of these line numbers, as follows.
Now you're ready to debug the JavaScript code. To try this, do the following.
1. Show the Debugger window, if it's not already displayed.
2. Watch the value of the variable named i while the code is running. In the Debugger window, for Watch Expressions, choose Type an expression here. Type the letter i, and then press Enter, as follows.
3. Begin running the code. Choose Run, Run With, Node.js, as follows.
4. The code pauses running on line 6. The Debugger window shows the value of i in Watch Expressions, which is currently 10, as follows.
5. In the Debugger window, choose Resume, which is the blue arrow icon, as follows.
6. The code pauses running on line 10. The Debugger window now shows the new value of i, which is currently 11.
7. Choose Resume again. The code runs to the end. The output is printed to the console's hello.js tab, as follows.

Compare your results to the following.

Step 3: Clean Up

To prevent ongoing charges to your AWS account related to this tutorial, you should delete the environment.

Warning

Deleting an environment cannot be undone.

You can delete the environment with the AWS Cloud9 console or the AWS CLI.

Delete the Environment with the AWS Cloud9 Console

Open the dashboard. To do this, on the menu bar in the IDE, choose AWS Cloud9, Go To Your Dashboard.
Do one of the following.
- Choose the title inside of the my-demo-environment card, and then choose Delete.
- Select the my-demo-environment card, and then choose Delete.
In the Delete dialog box, type Delete, and then choose Delete.

Note

If the environment was an EC2 environment, AWS Cloud9 also terminates the Amazon EC2 instance that was connected to that environment.

However, if the environment was an SSH environment, and that environment was connected to an Amazon EC2 instance, AWS Cloud9 doesn't terminate that instance. If you don't terminate that instance later, your AWS account might continue to have ongoing charges for Amazon EC2 related to that instance.

Skip ahead to Next Steps.

Delete the Environment with the AWS CLI

Run the AWS Cloud9 delete-environment command, specifying the ID of the environment to delete.


aws cloud9 delete-environment --environment-id 12a34567b8cd9012345ef67abcd890e1

In the preceding command, replace 12a34567b8cd9012345ef67abcd890e1 with the ID of the environment to delete.

Next Steps

Explore any or all of the following topics to continue getting familiar with AWS Cloud9.

Learn more about the AWS Cloud9 IDE.	Working with the IDE
Invite others to use your new environment along with you, in real time and with text chat support.	Working with Shared Environments
Create SSH environments (environments that use cloud compute instances or servers that you create, instead of an Amazon EC2 instances that AWS Cloud9 creates for you).	Creating an Environment and SSH Environment Host Requirements
Use AWS Cloud9 with Lambda.	AWS Lambda Tutorial, Advanced AWS Lambda Tutorial, and Working with AWS Lambda Functions
Use AWS Cloud9 with Amazon Lightsail.	Working with Amazon Lightsail Instances
Use AWS Cloud9 with AWS CodeStar.	Working with AWS CodeStar Projects
Use AWS Cloud9 with AWS CodePipeline.	Working with AWS CodePipeline
Use AWS Cloud9 with the AWS CLI, the aws-shell, AWS CodeCommit, the AWS Cloud Development Kit (AWS CDK), GitHub, or Amazon DynamoDB, as well as Node.js, Python, or other programming languages.	Samples

To get help with AWS Cloud9 from the community, see the AWS Cloud9 Discussion Forum. (When you enter this forum, AWS might require you to sign in.)

To get help with AWS Cloud9 directly from AWS, see the support options on the AWS Support page.

Warning Javascript is disabled or is unavailable in your browser.

To use the AWS Documentation, Javascript must be enabled. Please refer to your browser's Help pages for instructions.

Document Conventions

« Previous Next »

IDE Tutorial for AWS Cloud9

Prerequisites

Step 1: Create an Environment

Create an EC2 Environment with the Console

Create an EC2 Environment with the AWS CLI

Step 2: Tour the IDE

Step 2.1: Menu Bar

Step 2.2: Dashboard

Step 2.3: Environment Window

Step 2.4: Editor, Tabs, and Panes

Step 2.5: Console

Step 2.6: Open Files Section

Step 2.7: Gutter

Step 2.8: Status Bar

Step 2.9: Outline Window

Step 2.10: Go Window

Step 2.11: Immediate Tab

Step 2.12: Process List

Step 2.13: Preferences

Step 2.14: Terminal

Step 2.15: Debugger Window

Step 3: Clean Up

Delete the Environment with the AWS Cloud9 Console

Delete the Environment with the AWS CLI

Next Steps