Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

1.2 Web Resources for Developers: Cloud9

In this lesson, you’ll learn how to set up a development project in Cloud9. You’ll see the various ways that you can install frameworks and libraries, as well as the features that Cloud9 provides to make it easier to test and run your code.

Related Links

1.Web Resources for Developers: Cloud9
2 lessons, 10:49

Free Lesson

Web Resources for Developers: Cloud9

1.2 Web Resources for Developers: Cloud9

[SOUND] Hello, everyone. This is Reggie Dawson. Welcome to the Use Cloud9 for Development course for Tuts+. As a developer, it is often difficult to find a development environment. Do we need a full IDE or just a light text editor? Development also involves installing and configuring the platform you are working with. This can often involve setting up web servers, databases, and other types of services to support what your ability. Setting this up may be outside the scope of your experience, and as a result certain platforms may be unavailable to you. Cloud9 is a service that offers a cloud-based development environment that you can build a complete application with. Cloud9 supports many popular software packages with minimal configuration to allow you to get up and running quickly. In order to sign up for Cloud9, go to c9.io. Cloud9 offers both a free and a paid plan. With their free plan we get unlimited public workspaces, one private workspace with 512MB of RAM and 1GB of disk for each workspace. The paid plan offers unlimited workspaces, SSH access, premium support, and the ability to resize workspaces with up to 2.5GB of RAM and 10GB of disk space. Now I can honestly say as a heavy user of Cloud9, I have not yet found the need for a private workspace. If you are doing work for clients or for a commercial release, I can understand a paid account, and there are companies that are using Cloud9 for all of their development. Now when signing up for Cloud9, we also have the option of using our GitHub or Bitbucket account. No matter which way you sign up, after signing up, go ahead and log into Cloud9. After signing in you'll be taken to your dashboard. We can also create new workspaces here by clicking the new workspace button. We will talk more about workspaces in a moment. If we look at the menu to the left we have a Shared with Me menu. This will display any workspaces that have been shared with you. Then after that we have Repositories. If we click on this link, it will display any repositories we have listed in our linked GitHub and Bitbucket accounts. In addition to allowing us to log in with our Bitbucket or GitHub accounts, we also have access to all of our projects. If we click on Clone to edit, we can create a workspace from that project. Now in order to link your account, you need to go to Account Settings and then Connected Services. Here we can connect and disconnect our GitHub, Bitbucket, and Google Cloud accounts. Now if we go back to our workspace page, let's create a workspace. In this workspace we have our owner name followed by our workspace name. Then we have a short description that you can add if you like. After that comes a tab with the choice of a hosted or remote workspace. The remote workspace is a SSH connection that allows you to host Cloud9 locally. This is a feature only available in paid accounts. The hosted workspace gives you the option of a private or public workspace. Remember, with the free account, we only have one private workspace with unlimited public workspaces. Then we have the option to clone from a Git or Mercurial project from here as well. This allows us to clone a project that may not be part of our link repositories. Then finally we have our different project templates we can use. The templates are mostly self-explanatory and will really assist your workflow depending on the template you choose. These templates also have project runners configured so you can easily test your projects as you build them. For this project we will choose Custom. Now Custom template is just that, a workspace that you can configure as you like and install the software that you choose. Now when we create our workspace, we are greeted by the Cloud9 interface. The great thing about Cloud9 is that it has many of the features of popular development environments without the resource overhead. If we look to the left of the window, we have a workspace that displays our project structure. We also have a Navigate tab that displays all of the files in our workspace on the list, as well as the Commands tab that displays shortcuts for keyboard commands. To the right we have the file window which displays the contents of the currently selected file. The README file that it is displaying is the default markdown file that is created with each workspace. If we double-click on the README file, it will open up in the window. If we look at the bottom right of the window, we can see that the file is recognized as a markdown file. If we click here we can see all of the file types that are recognized in Cloud9. With these file types, Cloud9 offers varying levels of code autocompletion and syntax checking. Now let's go ahead and create a new file. Go to File > New from Template. Choose HTML. This will generate an HTML template in our project. But when we added the file is not reflected in our workspace. Before this file is added to our project we first must go to File > Save As. Then after that the file will show up in our workspace. We also have the ability to upload files from our local machine to Cloud9. Let's say we wanted to add some images to our project. First we will create a new folder by right-clicking and choosing New Folder. Go ahead and name this folder img. Then click on the folder to make sure it's selected, then after that go to the File menu and choose Upload Local Files. Now if we look the image folder is the selected folder, which is what we wanted. From here we can launch a file picker to select files or folders, or we can also use drag and drop. Now once we have finished our project we can also download it by going to the File menu and then choosing Download Project. This will download a compressed copy of your project. Then if we look at the View menu, we are capable of changing the layout of our screen. This allows us to display multiple files on the screen at the same time. After looking at the menus, it's obvious that Cloud9 has all the features that you will look for in a development environment. The real utility comes when we use the terminal to install software. If you look at the bottom of the screen you will see the terminal. I will resize the terminal so that we can view it better. Even though we chose the custom template, we still have Node.js available. Since we have Node, we can use NPM to install software. Cloud9 also makes Bower available as well. Between these two package managers, we should be able to install any packages we need for our project, although not all software will work with Cloud9. First let's install some software with NPM. The important thing we need to think about here is portability. Since Cloud9 is hosted online, it's a good idea to make sure your entire development environment will be the same on another machine. It's also a good practice to save your projects to GitHub, and when doing so your installed software is not included. So first we will run npm init. This will initialize NPM and create a package.json file that will track your project's dependencies. We can just accept the defaults when npm init runs. Now after that, we can install some software. Let's say, for example, we wanted to develop a project with Cordova. This will install the Cordova package and save it as a dependency in the package.json file. We could have also save Cordova as a dev dependency by using save dev as opposed to save. Now if we open up our package.json file, we should see the installed dependency. Cloud9 also has Bower installed as well. Similar to NPM, Bower is another way we can add packages and their dependencies to our project. First we will initialize Bower. Again we will be asked a few questions like npm init, and then it will create a bower.json file to hold our dependencies. Now that we have our bower.json file, let's add Bootstrap. And if we take a look at the bower.json file, we should see bootstrap as a dependency. Now it's advisable to use Bower or NPM in your projects especially if you intend on sharing them with other developers. When using something like Git, we typically don't save the package used to build the project. When using Bower or NPM, including all of your dependencies for a project takes one command. You now know the basics of how Cloud9 works. It's such a good platform that 80% of my projects are built there. Even though I have a decent machine, Cloud9 just works and makes starting a project easy. Also with all the different frameworks I have used while working with Tuts, Cloud9 has been able to run all of them. It's also useful for when you're traveling and may not have your personal machine with you. As long as you have the Internet, you have Cloud9. I truly only scratched the surface of all the things that Cloud9 can do. Now that you have the basics down, what kind of projects can you build with Cloud9?

Back to the top