Check out #aws #CodeStar with #Cloud9 using #ec2 t2.micro

I came to know about Cloud9: A cloud IDE for writing, running, and debugging code when I started using CodeStar: a tool that streamlines the usage of multiple aws services such as
i) AWS CodeCommit - a fully-managed source control service that makes it easy for companies to host secure and highly scalable private Git repositories.
ii) AWS CodeBuild - a fully managed build service that compiles source code, runs tests, and produces software packages that are ready to deploy
iii) AWS CloudFormation - Model and provision all your cloud infrastructure resources
iv) Amazon CloudWatch - a monitoring and management service built for developers, system operators, site reliability engineers (SRE), and IT managers.
v) AWS Cloud9 - a cloud-based integrated development environment (IDE) that lets you write, run, and debug your code with just a browser.
The descriptions above were taken from respective AWS webpages.

You can check out some screenshots below on how to create a project using CodeStar. This is based of my experience of using Python for a web service to create lambdas and API Gateway endpoints.

How to create a project using CodeStar:

1) Select a project template

AWS CodeStar Project templates

2) Select a Git repo

AWS CodeStar Git Repo

3) Select an IDE

AWS CodeStar IDE

4) Set up AWS Cloud9 environment. I have been using t2.micro and it is sufficient for me. Note that free tier is only available for the first 12 months.

AWS CodeStar Cloud9 EC2 instance types

5) Now that the configuration is done, it will start preparing the resources.

AWS Codestar console

6) If you scroll down a little bit, you will see an application activity and a continuous deployment section.
Application activity indicates the activity of an API Gateway endpoint using Amazon CloudWatch, for example.
Continuous deployment section shows the process and status of building and deployment.

AWS CodeStar Application Activity and Continuous Deployment

7) To open up your Cloud9 IDE, go to IDE tab on the left. And, you will see a similar screen.

AWS CodeStar Cloud9 IDE

8) To let other team members access and configure for this project, you can grant them access on Team tab.

AWS CodeStar Project Team

9) This is how Cloud9 IDE looks like:

AWS Cloud9

10) Cloud9 supports key bindings / enables shortcut keys! This is an important feature to speed up development.

AWS Cloud9 Keybindings

11) You can open up a terminal by clicking + button on the top of a page

AWS Cloud9 New Terminal

12) You can run your test on Cloud9 IDE by following the follow steps:

click AWS Resources on the right panel > expand local functions > expand your project name > right click or select a lambda function > run

AWS Cloud9 Resources - run function locally

13) In my Cloud9 IDE, you can see these 2 important files buildspec.yml and template.yml
buildspec.yml contains the commands to build the project

What is yml? YAML is a human friendly data serialization standard for all programming languages.

14) When you run your lambda function locally, lambda-payloads.json file will be created. This file is where you have all your query parameters set.
You can get a template of the type of payloads that you expect on Lambda test section.

Comments

Post a Comment

Popular Posts

If you are using aws Amplify library (I use 0.4.8 at the moment) in an Angular project and trying to use PubSub module via aws IoT, you may want to check out this article on how to configure for PubSub module.

If you follow steps on Amplify PubSub document, according to the above issues, there are some additional steps and a typescript type checking issue (that I encountered):

To check if your front-end does subscribe to an IoT topic, you can
right click > inspect > on browser DevTool, go to Network tab > filter for WS (websockets)
then, you should see a websocket connection like the following:

Learn how to upload a zip file to AWS S3 using boto3 python library.
Boto3
According to boto3 document, these are the methods that are available for uploading.

The managed upload methods are exposed in both the client and resource interfaces of boto3: * S3.Client method to upload a file by name: S3.Client.upload_file() * S3.Client method to upload a readable file-like object: S3.Client.upload_fileobj() * S3.Bucket method to upload a file by name: S3.Bucket.upload_file() * S3.Bucket method to upload a readable file-like object: S3.Bucket.upload_fileobj() * S3.Object method to upload a file by name: S3.Object.upload_file() * S3.Object method to upload a readable file-like object: S3.Object.upload_fileobj()
(The above methods and note are taken from boto3 doc, and there is note saying that they are the same methods for different S3 classes.)
What I used was s3.client.upload_file
The method definition is

What is the list of events that you can attach to your HTML elements? They are basically DOM events. I got the following list of DOM events from MDN.

DOM events on MDN
Check out the following list of events on MDN:
abort
beforeinput
blur
click
compositionstart
compositionupdate
compositionend
dblclick
error
focus
focusin
focusout
input
keydown
keypress
keyup
load
mousedown
mouseenter
mouseleave
mousemove
mouseout
mouseover
mouseup
resize
scroll
select
unload
wheel
How to listen for these events?
1) You can then listen for them like so if you use Angular.

If you are using aws Amplify library (I use 0.4.3 at the moment) in an Angular project and trying to use Simple Queue Service(SQS) from aws-sdk library, you may run into some problem trying to import SQS service.

If you do it the way they do it in the following example, you may get some errors importing SQS: import Route53 from 'aws-sdk/clients/route53'; Auth.currentCredentials() .then(credentials => { const route53 = new Route53({ apiVersion: '2013-04-01', credentials: Auth.essentialCredentials(credentials) }); // more code working with route53 object // route53.changeResourceRecordSets(); })
source: Amplify doc

Errors that I got in the process of making it work are these:import fails with 'no default export' Cannot use 'new' with an expression whose type lacks a call or construct signature.
Attempts:
1)
I have tried suggestions by adding the following compilerOptions according to suggestions in this Typescript-React-Starter Gi…

When you sign up, login or reset password on web browsers such as Google Chrome, Mozilla Firefox, Safari etc may prompt you to save your username and password. Sometimes, on some websites, they can't detect the right username.

How to make browsers know which username and password to save?
Use cases:
case 1: Username and Password input on the same page
Put username right above your password input to hint browsers about your username and password.

If you initiate your React app using create-react-app tool, you can follow the steps below to deploy your app on GitHub.
Steps
1) Make sure to test your app and it is runnable on local host.
2) Include this line in your package.json file. Replace github_user_name and repo_name accordingly."homepage": "http://github_user_name.github.io/repo_name"

3) Open up your terminal and navigate to your project folder
4) Run `npm run build`
5) If there is any error building the project, you have to fix the error before proceeding.
6) When it is done building, you will see something like the following screenshot: