Menu
AWS Cloud9
User Guide

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.

This tutorial assumes you have already signed in to AWS Cloud9. For more information, see one of the following:

Note

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

Step 1: Create an Environment

An environment is a place where you store your project's files and where you run the tools to develop your apps. In this section, you create an AWS Cloud9 EC2 development environment. An EC2 environment is an environment that an Amazon EC2 instance connects to.

Note

When you create an environment, the environment doesn't contain any sample code by default. You can use AWS CodeStar to create a project containing sample code, connect AWS Cloud9 to that project, and then immediately begin experimenting with the project's sample code. To do this, skip this step and see Working with AWS CodeStar Projects. After you open the AWS Cloud9 IDE, return to this topic and then skip ahead to Step 2: Tour the IDE.

For more information, see Project Templates in the AWS CodeStar User Guide and Language Support.

To create a blank EC2 environment, do the following:

  1. 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.

    
                  AWS Region selector in the AWS Cloud9 console
  2. If a welcome page is displayed, for New AWS Cloud9 environment, choose Create environment. Otherwise, choose Create environment.

    
                  Welcome page in the AWS Cloud9 console

    Or:

    
                  Create environment button in the AWS Cloud9 console
  3. 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.

  4. For Description, type something about your environment. For example, This environment is for the AWS Cloud9 tutorial.

  5. Choose Next step.

  6. 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 connect the environment to a newly-launched Amazon EC2 instance. To use an existing Amazon EC2 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) may result in possible charges to your AWS account for Amazon EC2.

  7. 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 may result in additional charges to your AWS account for Amazon EC2.

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

    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, expand Network settings. For Network (VPC), choose Create new VPC, and then follow the on-screen directions. For more information, see Create an Amazon VPC.

    If a VPC exists but has no subnet, create one. To do this, expand Network settings. For Network (VPC), choose Create new subnet, and then follow the on-screen directions. For more information, see Create a Subnet.

    Yes

    Yes

    Yes

    Skip ahead to the next step in this procedure. (AWS Cloud9 will automatically use the default VPC 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

    Yes or 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.

  9. For Cost-saving setting, choose the amount of time after which AWS Cloud9 will stop the environment after the IDE has not been used, or leave the default choice.

    Note

    Choosing a shorter time period may result in fewer charges to your AWS account. Likewise, choosing a longer time may result in more charges.

  10. Choose Next step.

  11. 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.

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.

Step 2.1: Menu Bar

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

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 Apple OSX). 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.


               Opening the AWS Cloud9 dashboard

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 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.

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.


               Showing a single pane

Step 2.5: Console

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


               AWS Cloud9 console

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.


               Gutter in the AWS Cloud9 IDE

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.


               Status bar in the AWS Cloud9 IDE

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: Navigate Window

The Navigate window enables you to go to a different file. To use this window, begin typing the file's name. When you see the file you want, choose it.

To hide the Navigate button, choose Window, Navigate on the menu bar.

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

To show the Navigate window, choose the Navigate button.

To go to a file, in the Navigate window, start typing the file name. For example, type fish. When fish.txt is highlighted, press Enter. You can repeat this to go to a different file. For example, try going to the cat.txt file.

Step 2.10: Commands Window

The Commands window enables you to find and run IDE commands. To use this window, begin typing something about the command. When you see the command you want, choose it.

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

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

To show the Commands window, choose the Commands button.

For example, you can use a command to show two vertical panes in the editor. To do this, in the Commands window, type split. In the list of commands, choose twovsplit, as follows.


               Showing two vertical panes in the editor

To go back to a single pane, in the Commands window, in the list of commands, choose nosplit.

Step 2.11: 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.


               Outline window in AWS Cloud9 IDE

Step 2.12: Immediate Tab

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

  1. Open an Immediate tab by choosing Window, New Immediate Window on the menu bar.

  2. 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.
    
                     Running code in the Immediate tab

Step 2.13: 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:

  1. Show the Process List by choosing Tools, Process List on the menu bar.

  2. Find a process. In the Process List, type the name of the process.

  3. Stop or forcibly stop a process. In the list of processes, choose the process, and then choose Kill or Force Kill, as follows:


               Process list in the AWS Cloud9 IDE

Step 2.14: Preferences

Preferences include the following settings:

  • Settings for the current environment only, such as 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.

  • Which IDE plugins to load.

  • The IDE's overall theme.

  • Which experimental IDE features are loaded, such as custom IDE components.

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


               Showing preferences in the AWS Cloud9 IDE

Step 2.15: 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.

Step 2.16: 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:

  1. 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.

  2. To install Node.js:

    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 Node.js, for example, version 6.9.5.

      nvm install 6.9.5
  3. 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!");
  4. 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.

    
                     Adding breakpoints to code in the Debugger window
  5. 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.

      
                           Debugger window
    3. Begin running the code. Choose Run, Run With, Node.js, as follows.

      
                           Debugger window
    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.

      
                           Debugger window
    5. In the Debugger window, choose Resume, which is the blue arrow icon, as follows.

      
                           Resuming debugging in the Debugger window
    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.

      
                           hello.js tab with debug output

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.

  1. Open the dashboard. To do this, on the menu bar in the IDE, choose AWS Cloud9, Go To Your Dashboard.

  2. Do one of the following:

    • Choose the title inside of the my-demo-environment card, and then choose Delete.

      
                        Deleting an environment in the environment details page
    • Select the my-demo-environment card, and then choose Delete.

      
                        Deleting an environment in the environments list
  3. In the Delete dialog box, type Delete, and then choose Delete.

Next Steps

As you continue to get familiar with the AWS Cloud9 IDE, you can continue by experimenting with some of our Samples. Or create a new environment and start working on your own projects!