Skip to content

Coding

  • in Coding, AWS
  • 1 min read

Setting up AWS CLI

A guide to Setting up AWS CLI and configuring it for your AWS account.

Prerequisites

  • An AWS account. If you don't have one, you can create it here.

MAC Installation

  1. Open your terminal.
  2. Run the following command to install AWS CLI using Homebrew: 
    brew install awscli
  3. Verify the installation by checking the version: 
    aws --version

Get AWS Credentials

  1. Sign in to the AWS Management Console.
  2. Navigate to the IAM (Identity and Access Management) service.
  3. In the left sidebar, click on "Users."
  4. Click on your username.
  5. Go to the "Security credentials" tab.
  6. Click on "Create access key."
  7. Your Access Key ID and Secret Access Key will be displayed. Copy and save them securely.

Configure AWS CLI

  1. Open your terminal.
  2. Run the following command to configure AWS CLI: 
    aws configure
  3. You will be prompted to enter the following details:
  4. AWS Access Key ID: Enter the Access Key ID you obtained earlier.
    • AWS Secret Access Key: Enter the Secret Access Key you obtained earlier.
    • Default region name: Enter your preferred AWS region (e.g., us-east-1).
    • Default output format: You can choose json, text, or table. For beginners, json is recommended.
  5. To verify that AWS CLI is configured correctly, run the following command to list your S3 buckets: 
    aws s3 ls
    If everything is set up correctly, you should see a list of your S3 buckets (if any).

Deploying React Applications on AWS

A guide to deploying React applications on AWS using CloudFront and S3, using CDK Nodejs for infrastructure as code.

Prerequisites

Before starting, ensure you have the following prerequisites:

  • AWS Account: Sign up for an AWS account if you don't have one.
  • AWS CLI: Install and configure the AWS Command Line Interface (CLI) with your credentials. You can follow the guide here.
  • Node.js and yarn: Ensure you have Node.js and yarn installed on your machine.
  • React Application: Have a React application ready for deployment.

Step 1: Set Up IaC project

  1. Navigate to your react application directory in the terminal.
  2. Create a new directory for your IaC project and navigate into it: 
    mkdir iac
cd iac

  3. Initialize a new CDK project using Node.js: 

    npx aws-cdk init app --language=typescript

  4. Install the necessary AWS CDK packages: 

    yarn add @aws-cdk/aws-s3 @aws-cdk/aws-cloudfront @aws-cdk/aws-s3-deployment

Step 2: Update the IaC code to create an S3 bucket.

  1. Open the lib/iac-stack.ts file in your IaC project directory.
  2. Replace the contents with the following code to create an S3 bucket and a CloudFront distribution
import * as cdk from 'aws-cdk-lib';
import { Construct } from 'constructs';
import * as s3 from 'aws-cdk-lib/aws-s3';
import * as cloudfront from 'aws-cdk-lib/aws-cloudfront';
import * as s3deploy from 'aws-cdk-lib/aws-s3-deployment';

export class IacStack extends cdk.Stack {
   constructor(scope: Construct, id: string, props?: cdk.StackProps) {
      super(scope, id, props);

      // Create an S3 bucket
      const bucket = new s3.Bucket(this, 'MyReactAppBucket', {
         websiteIndexDocument: 'index.html',
         websiteErrorDocument: 'index.html',
         publicReadAccess: true,
      });

      // Create a CloudFront distribution
      const distribution = new cloudfront.CloudFrontWebDistribution(this, 'MyReactAppDistribution', {
         originConfigs: [
            {
               s3OriginSource: {
                  s3BucketSource: bucket,
               },
               behaviors: [{ isDefaultBehavior: true }],
            },
         ],
      });
   }
}

Step 3: Build and Deploy the React Application

  1. Navigate back to your React application directory.
  2. Build your React application: 
    yarn build
  3. Navigate back to your IaC project directory.
  4. Deploy the CDK stack to create the S3 bucket and CloudFront distribution: 
    npx cdk deploy
  5. After the stack is deployed, note the S3 bucket name and CloudFront distribution domain name from the output.
  6. Deploy the built React application to the S3 bucket: 
    aws s3 sync ../build s3://<Your-Bucket-Name> --delete
  7. Invalidate the CloudFront cache to ensure the latest version of your application is served: 
    aws cloudfront create-invalidation --distribution-id <Your-Distribution-ID> --paths "/*"
  8. Access your React application using the CloudFront distribution domain name.

Step 4: Clean Up

To avoid incurring unnecessary charges, remember to delete the resources created during this process when they are no longer needed. You can do this by destroying the CDK stack: 

npx cdk destroy

  • in Coding, AI
  • 1 min read

AI and Coding

Gemini CLI

The Gemini CLI is a powerful tool for AI assisted coding, it provides a generous daily usage quota for free.

Installation

To install the Gemini CLI, simply run the following command:

npm install -g @google/gemini-cli

API Key

Get the API Key from here

Set it as an environment variable:

Bash 

export GEMINI_API_KEY=your_api_key_here

Windows PowerShell 

$env:GEMINI_API_KEY = "AIs**********od"

Usage

Navigate to your project directory and run:

gemini

Monitor token usage

You can monitor your token usage by navigating to https://aistudio.google.com/usage

Usage Ideas

  • Documentation: Talk to the agent and build your documentation like this.

  • Boilerplate: Generate boilerplate code for your project using tools like for react use npx create-react-app my-app and then engage with the agent to customize it.