29 Aug, 2018 · 9 minutes read
Cloud9is 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:-
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 Aceeditor.
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.
sudo yum install -y libunwind libicu
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
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
sudo mkdir -p /opt/dotnet && sudo tar zxf dotnet.tar.gz -C /opt/dotnet
sudo ln -s /opt/dotnet/dotnet /usr/local/bin/dotnet
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
dotnet build
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 + Cand Create a new apache configuration file for the proxy.
sudo vi /etc/httpd/conf.d/AspNetCoreTest.conf
Paste the following text into the file:-
RequestHeader set "X-Forwarded-Proto" expr=%{REQUEST_SCHEME}
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
sudo service httpd configtest
sudo service httpd start
Run the application again
dotnet run
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.
Let’s do a few more steps and complete the development life cycle. At this point we have a working project using the default razortemplate of dotnet. Let’s checkin the code to our Version Control repository.
Open up another terminal by pressing the shortcut Alt + Tor 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 keyon 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 Enterto start pushing your repository.
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