Using Angular with AWS Cloud9

Cloud9 is a great service from AWS that provides a full IDE that runs through your browser. Cloud9 was originally its own company that provided a web IDE but was recently purchased by Amazon and is now part of the suite of services that makeup AWS today. Checkout more on the wiki here https://en.wikipedia.org/wiki/Cloud9_IDE

As a developer, I often work on several machines, and having to switch between computers can be difficult. Having a cloud based setup is really beneficial as I can have the same environment literally on each machine I work on. It also provides more capabilities for cloud based devices like Chromebooks or tablets.

This post will walk you through setting up a Cloud9 environment, creating an Angular App, running it locally, and then deploying it. If you’d like more information, please go to the AWS Cloud9 official documentation here https://docs.aws.amazon.com/cloud9/latest/user-guide/welcome.html

So first lets get the development environment setup.

Go to your AWS account and go to the Cloud9 service through the console.

Once in the Cloud9 service, click “create environment” to walk through the dialog of setting up the environment you want to work in. The great part about Cloud9 is that you can have multiple environments catered to your needs.

Within the dialog, you can pick all kinds of options based on what is made available. You can pick the instance type, memory, network settings, etc. etc.

Checkout the AWS document here for more info https://docs.aws.amazon.com/cloud9/latest/user-guide/create-environment.html.

Once I had the environment I wanted to use the Angular CLI so I went ahead and did the following

npm install -g @angular/cli

Everything looked ok so I started trying to create my app

ng new my-app

Got an error saying that my node version was out of date. Cloud9 comes with nvm already preinstalled so you can easily upgrade to whatever node version your appneeds. In the terminal all I had to do was the following:

nvm install 8.9

Now that I got node updated, I reran the “ng new” command and was up and running.

Now I wanted to verify that my app was running locally. With Angular this is typically done with “ng serve” and then if you go to “http://localhost:4200” everything is good. The issue here is that you’re in Cloud9 so localhost actually has to get pushed onto port 8080 for you to see it in the browser. You also have to make sure to disable the host check with the following flag “–disable-host-check”. So from the terminal run the following

ng serve --host 0.0.0.0 --port 8080 --disable-host-check

Now if you go to the “preview” button at the top of your console and you can see a preview window open up in your console. This window also gives you a http address that you could copy and paste in a new tab if you want.

To make this local development easier go ahead and create a NPM script. Just go to your “package.json” file and under scripts add one. I created one called “build-cloud”

"build-cloud": "ng serve --host --port 8080 --disable-host-check"

Ok so now you’ve got your cloud 9 environment setup, and you’ve got the Angular CLI running. You can move forward from here and build out your app.

When you are ready to deploy I’d recommend using the S3 option where you push your code to an S3 bucket and let it dynamically serve the content from there. There are several good blog posts on this topic, check one out here https://medium.com/codefactory/angular2-s3-love-deploy-to-cloud-in-6-steps-3f312647a659

Some other things to note are that you can upgrade your instance using the console. This is important if you run out of memory or have an issue where you need more power. Checkout the page here that explains how to do that https://docs.aws.amazon.com/cloud9/latest/user-guide/move-environment.html

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s