August 9, 2018 partho — No Comments

Introduction to Cloud9

Cloud9 is an online IDE offered by AWS. It supports several programming languages including: C, C++, PHP, Ruby, Perl, Python, JavaScript with Node.js, and Go.

What’s really cool about Cloud9 is that it is part of the AWS stack and the compute portion runs on a EC2 instance of your choice.

Central to Cloud9 is the concept of Environments. You can think of an environment as an EC2 Linux machine on which you do your development work. The Cloud9 IDE uses this EC2 instance to compile, debug & run your application. The IDE itself runs on the browser and as such requires nothing to be installed on your machine. All you need is the browser and an AWS account.

While creating the EC2 instance you have two options:-

Create a new instance for environment (EC2) – This is an EC2 instance running Amazon Linux that is created and managed by Cloud9 itself.
Connect and run in remote server (SSH) – Provide SSH credentials for an EC2 instance that you created and manage.

The first option has the optional cost-saving setting which can automatically stop the instance after a period of inactivity (ranging from 30 minutes to a week). The custom EC2 instance on the other hand allows you to choose any distro and version of a Linux instance. For example, you can go for a version of Ubuntu which the Cloud9 managed EC2 instance does not allow you to do.

If you selected option 1 above, it takes a while to create the environment as Cloud9 has to start and configure a new EC2 instance. Once that is done the Cloud9 IDE opens up with a folder structure on the left, a welcome page in the workspace and a terminal at the bottom. In the left pane a README.md file is created. You can double click on it to open the file in a code editor. The code editor used by Cloud9 is Ace editor.

Setting up ASP .NET Core

Now comes the interesting bit about getting ASP .NET to run on your C9 environment. First of all, we need to install .NET Core SDK on the machine. If you are using an EC2 instance that you yourself created and manage, you can just follow Microsoft’s instructions to install .NET Core SDK. In my case, I needed the Hibernate feature that Cloud9 only supports for the managed instance. I code from various locations (home & office) and often forget to shutdown the instances.

Setting up .NET Core SDK is a bit of a pain on this Amazon Linux. After a bit of trial and error I managed to get it done via the following steps. You can do so from the terminal window of Cloud9.

Install libunwind and libicu yum packages.
```
sudo yum install -y libunwind libicu
```

Download .NET Core SDK

For .NET Core 2.0:-

curl -sSL -o dotnet.tar.gz https://download.microsoft.com/download/1/B/4/1B4DE605-8378-47A5-B01B-2C79D6C55519/dotnet-sdk-2.0.0-linux-x64.tar.gz

For .NET Core 2.1:-

curl -sSL -o dotnet.tar.gz https://download.microsoft.com/download/E/8/A/E8AF2EE0-5DDA-4420-A395-D1A50EEFD83E/dotnet-sdk-2.1.401-linux-x64.tar.gz

Extract the SDK

sudo mkdir -p /opt/dotnet && sudo tar zxf dotnet.tar.gz -C /opt/dotnet

Create a Symlink for the dotnet executable

sudo ln -s /opt/dotnet/dotnet /usr/local/bin/dotnet

Test that installation went successful
```
dotnet --version
```
You should see an output like:-

2.0.0
The default EC2 instance created by Cloud9 has a disk of size 8 GB. We need to increase this for .NET Core to work. To do so, find the EC2 instance created by Cloud9. It’s named something like this aws-cloud9-Test-1f478c9ccc22429aba49d61a160d6596, where Test is the name of the Cloud9 environment you provided at the time of creation. Then, locate the EBS volume associated with it and increase the size to about 10 GB. Now restart the EC2 instance. You’ll notice that the Cloud9 IDE greys out as it waits to connect to the EC2 instance.
Initialize .NET Core by running the following command
```
sudo /opt/dotnet/dotnet run
```
It triggers a one time activity where .NET Core creates some cache (approximately 1 GB in size).
Let’s create a new ASP .NET Project and try to run it.

Create a new folder for our project:-
```
mkdir AspNetCoreTest
```
Change to the newly created project directory
```
cd AspNetCoreTest
```
Create a new ASP.NET Core Web App
```
dotnet new razor
```
Build the .NET Core application
```
dotnet build
```
Run the application
```
dotnet run
```
Your application is now running on http://localhost:5000. There’s one problem, though. How do you see your web application. You only have shell access to the development EC2 instance. There’s no browser installed on it (or a GUI). The Kestrel web server that is running only binds to localhost and as such is not accessible from your machine.

What you can do is configure an Apache proxy on the dev instance and route all traffic to/from your EC2 instance’s public IP to the Kestrel web server.

To do so follow these steps:-

Stop the application by pressing Ctrl + C and Create a new apache configuration file for the proxy.

sudo vi /etc/httpd/conf.d/AspNetCoreTest.conf

Paste the following text into the file:-

<VirtualHost *:*>                                                                                                                                                           
        RequestHeader set "X-Forwarded-Proto" expr=%{REQUEST_SCHEME}                                                                                                            
</VirtualHost>                                                                                                                                                              

<VirtualHost *:80>                                                                                                                                                          
        ProxyPreserveHost On                                                                                                                                                    
        ProxyPass / http://127.0.0.1:5000/                                                                                                                                      
        ProxyPassReverse / http://127.0.0.1:5000/                                                                                                                               
        ServerName www.example.com                                                                                                                                              
        ServerAlias *.example.com                                                                                                                                               
        ErrorLog ${APACHE_LOG_DIR}AspNetCoreTest-error.log                                                                                                                            
        CustomLog ${APACHE_LOG_DIR}AspNetCoreTest-access.log common                                                                                                                   
</VirtualHost>

Test your apache configuration file.
```
sudo service httpd configtest
```
Start Apache service
```
sudo service httpd start
```
Modify the Security Group of the EC2 instance to allow HTTP traffic on port 80.
Run the application again
```
dotnet run
```
Now note the public IP address of the server and open it up in your web browser:-
```
http://54.88.71.181/
```

Voila, you should see the ASP .NET Welcome page.

So, now you have your IDE in the browser using Cloud9. The backend for your ASP .NET Core project can be run from the command line and you can see your changes live across the internet using the public IP of your development EC2 instance.

Go out for lunch and your EC2 instance will be stopped after 30 mins. Come back to the Cloud9 IDE and it will automatically start up your instance and resume your session.

Version Control in Cloud9

Let’s do a few more steps and complete the development life cycle. At this point we have a working project using the default razor template of dotnet. Let’s checkin the code to our Version Control repository.

Open up another terminal by pressing the shortcut Alt + T or press the + button in the bottom pane. By default you are taken to the root environment directory. So, let’s change to our project directory.

cd AspNetCoreTest

Git comes pre-installed with the Amazon Linux instance. So, let’s initialize our Git repository.

git init

Let’s add a .gitignore file to ignore the build/intermediate binaries, bower packages & minified scripts.

vi .gitignore

Paste the following lines in it:-

bin/
obj/
**/wwwroot/lib
**/wwwroot/lib/*.*
*.min.css
*.min.js

Save the file and add all the project files to Git:-

git add *

By default, Git ignores the hidden files. Let’s add two such files which are technically part of our source code.

git add .bowerrc
git add .gitignore

Configure your global Git username and email:-

git config --global user.email "john.doe@acme.org"
git config --global user.name "John Doe"

Commit the files:-

git commit -m 'Initial Commit'

Now, you are ready to publish your repository to a central server. I am using GitHub in this case where I created a project named AspNetCoreTest.

We must create a new SSH key on the dev system:-

ssh-keygen -t rsa -b 4096 -C "john.doe@acme.org"

Choose the default path and provide a passphrase (if you want) in the subsequent steps.

Your public key is stored by default at the following location

/home/ec2-user/.ssh/id_rsa.pub

Open it up in vi and copy the line that denotes your public key. This needs to be added to GitHub. Give it a title such as Cloud9 denoting that this SSH key belongs to the Cloud9 environment and then hit Add SSH Key.

Add the GitHub repository as a remote of your local repository

git remote add origin git@github.com:maxotek/AspNetCoreTest.git

Where the last argument is the location of your GitHub repository.

Finally, push the repository by executing.

git push --set-upstream origin master

This also sets the upstream for your master branch to the GitHub repository we just created. All subsequent pushes can be done using just git push.

Since this is the first time we are connecting to GitHub, you will be presented with a warning like this.

The authenticity of host 'github.com (192.30.253.112)' can't be established.
RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
RSA key fingerprint is MD5:16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

Type yes and press Enter to start pushing your repository.

Modifying Code through Cloud9

Now that we have a startup project and a Git repository. Let’s modify some code and see the developer experience. In this case, I’ll just be changing the copyright year in the Footer.

Use the folder explorer of Cloud9 IDE and navigate to the _Layout.cshtml. Double click on it to open it in the code editor. Locate the <footer> tag and change the copyright year to 2018. You’ll notice that the tab title shows that the document is unsaved (dirty). So, hit Ctrl + S to save the file. Since this is a razor view (well, actually a layout), all we need to do is go back to the web page and hit Refresh and the Copyright year changes in the footer. If it were a class file you would have to stop the application, recompile it and run it again to see your changes.

There you have it folks. That’s how easy it is to get started with Cloud9 and use it to develop ASP .NET Core applications while on the move.

Rating: 5.0/5. From 1 vote.

Please wait...

Introduction to Cloud9

Setting up ASP .NET Core

Version Control in Cloud9

Modifying Code through Cloud9

Related Posts