DEV Community: Brian H. Hough

Thankful for the AWS Community Builders Program & Building

Brian H. Hough — Fri, 15 Dec 2023 20:27:01 +0000

As the saying goes, "If you want to go fast, go alone. If you want to go far, go together."

Over the last few years, I've benefited so much from being a part of the AWS Community Builders Program - a global community, network, and program. From meeting super talented, smart, and amazing mentors and peers, to receiving exclusive trainings and insights from the teams building the cutting edge technologies powering modern software, I have immense appreciation for this program and everyone who makes it so meaningful.

There are SO many benefits for Community Builders! Here are my top 5:
🌎 Global network
🏋️ Exclusive trainings
💡 Amazing mentors/peers
🗣️ Speaking opportunities
👕 Super cool swag

If you like building, sharing what you learn, and contributing to a great community, then you should definitely consider applying to the AWS Community Builders program! You can add your name to the waitlist here

Now, since we are in the holiday spirit, we thought it would be fun to create holiday-themed AWS Step Function state machines that model a tree as a thank you to all of the amazing AWS Leaders who make the AWS Community Builders Program so special 🎄🥳 So, let's analyze what goes into a Step Machine and build one together while we thank our incredible AWS Leaders for all that they do...

Step 1: Go to Amazon Step Functions in the console

You will want to search for "Step Functions" in the top search bar. Click on the first AWS service in the dropdown.

This will direct you to the Step Functions page, where you'll either see a list of your currently active Step Functions or nothing listed out in which you'll be able to click that Orange button in the top right to make your very first Step Function state machine on AWS:

Step 2: Pick a template or start from scratch

While we are going to start from scratch by selecting "Blank", there are so many options for very cool Step function flows if you want to architect something more complicated. We are making a tree design, so it is not going to involve that many services or features.

Here's a few of the cool ones:

Distributed Map to process a CSV file in S3: Use Distributed Map to iterate over the rows of a generated CSV file in S3. Each row has order and shipping information. The distributed map item processor iterates over a batch of these rows to detect delayed order using a Lambda function. It then send a message to SQS queue for every delayed order
Generate invoices using Stripe: Use the HTTP task to call Stripe APIs for an invoice-generation workflow. Retrieves a list of customers, summarizes their payment methods, and either generates invoices or reports missing/expired credit cards.
Perform AI prompt-chaining with Amazon Bedrock:
Use AI prompt-chaining with Amazon Bedrock to build high-quality chatbots. By chaining prompts, the LLM can use conversation history to provide more relevant responses.
Call a microservice with API Gateway: Make a call to an API Gateway endpoint that fronts an ECS container microservice. (Amazon API Gateway, Amazon ECS)
ETL job in Amazon Redshift: This sample project demonstrates how to use Step Functions and the Amazon Redshift Data API to run an ETL/ELT workflow that loads data into the Amazon Redshift data warehouse.
Tune a machine learning model: Tune hyperparameters of a machine learning model and batch transform a test dataset (Amazon SageMaker, AWS Lambda, Amazon S3)

... The list just truly goes on from there.

Step 3: Setup your Step Function workspace for success

When you create your first state machine, there will be 2 main views to develop within:

A drag-and-drop UI: this view is helpful to search for various services and simply add them as steps into your state machine.
A JSON editor: this is the view I prefer the most because I find that the code is easier to think about, especially with how steps chain together.

For this blog post, we are going to look at the JSON code editor view.

Step 4: Write your Step Function Logic

Thanks to the amazing @jennworks40 - we were able to start building a template for our state machine very rapidly with her initial Step Function template.

Here is my finished code if you want to check it out:

{
  "Comment": "Building a tree is fun!",
  "StartAt": "I'm grateful to learn and grow",
  "States": {
    "I'm grateful to learn and grow": {
      "Type": "Pass",
      "Next": "From webinars to IRL community events"
    },
    "From webinars to IRL community events": {
      "Type": "Task",
      "Resource": "arn:aws:lambda:us-east-1:xxxxxxxxxx:function:Thankful",
      "Catch": [
        {
          "ErrorEquals": [
            "States.TaskFailed"
          ],
          "Next": "All run by amazing AWS leaders and visionaries..."
        }
      ],
      "Next": "All run by amazing AWS leaders and visionaries..."
    },
    "All run by amazing AWS leaders and visionaries...": {
      "Type": "Pass",
      "Next": "Who care about the AWS Community and make sure we are content."
    },
    "Who care about the AWS Community and make sure we are content.": {
      "Type": "Parallel",
      "Branches": [
        {
          "StartAt": "AWS leaders who help,",
          "States": {
            "AWS leaders who help,": {
              "Type": "Succeed"
            }
          }
        },
        {
          "StartAt": "AWS leaders who care,",
          "States": {
            "AWS leaders who care,": {
              "Type": "Task",
              "Resource": "arn:aws:lambda:us-east-1:xxxxxxxxxx:function:Thankful",
              "Catch": [
                {
                  "ErrorEquals": [
                    "States.TaskFailed"
                  ],
                  "Next": "We ❤️‍🔥 you all!"
                }
              ],
              "End": true
            },
            "We ❤️‍🔥 you all!": {
              "Type": "Pass",
              "Result": "Love em",
              "End": true
            }
          }
        },
        {
          "StartAt": "And AWS leaders who are always there.",
          "States": {
            "And AWS leaders who are always there.": {
              "Type": "Succeed"
            }
          }
        }
      ],
      "Next": "It's no small task, the immense work they do"
    },
    "It's no small task, the immense work they do": {
      "Type": "Parallel",
      "Next": "Thank you for all that you do. We all love you!",
      "Branches": [
        {
          "StartAt": "Helping us reach for the stars,",
          "States": {
            "Helping us reach for the stars,": {
              "Type": "Pass",
              "End": true
            }
          }
        },
        {
          "StartAt": "Climb to new heights,",
          "States": {
            "Climb to new heights,": {
              "Type": "Task",
              "Resource": "arn:aws:lambda:us-east-1:xxxxxxxxxx:function:Thankful",
              "Catch": [
                {
                  "ErrorEquals": [
                    "States.TaskFailed"
                  ],
                  "Next": "We ❤️‍🔥 the ☁️"
                }
              ],
              "End": true
            },
            "We ❤️‍🔥 the ☁️": {
              "Type": "Pass",
              "Result": "Beautiful",
              "End": true
            }
          }
        },
        {
          "StartAt": "Believe in ourselves,",
          "States": {
            "Believe in ourselves,": {
              "Type": "Pass",
              "End": true
            }
          }
        },
        {
          "StartAt": "Always work hard,",
          "States": {
            "Always work hard,": {
              "Type": "Task",
              "Resource": "arn:aws:lambda:us-east-1:xxxxxxxxxx:function:Thankful",
              "Catch": [
                {
                  "ErrorEquals": [
                    "States.TaskFailed"
                  ],
                  "Next": "We ❤️‍🔥 to build!"
                }
              ],
              "End": true
            },
            "We ❤️‍🔥 to build!": {
              "Type": "Pass",
              "Result": "Good company",
              "End": true
            }
          }
        },
        {
          "StartAt": "And share some cool swag, always something new.",
          "States": {
            "And share some cool swag, always something new.": {
              "Type": "Pass",
              "End": true
            }
          }
        }
      ]
    },
    "Thank you for all that you do. We all love you!": {
      "Type": "Pass",
      "End": true
    }
  }
}

In case you are wondering where the arn's come from, check out Step 5 below.

Step 5: Create a Lambda Function

Creating a Lambda function — a serverless script that can run in AWS and connect to various AWS resources, apps, and more — is very easy. First, search for "Lambda" in the search bar at the top and you should click on the first item that shows up in the dropdown:

Next, we'll decide to create a lambda function with the orange button. This will bring up the Lambda function setup screen to select all the options, including a name and runtime, which we will select Python 3.11:

After we select to create the Lambda function, we'll then be redirected to the Lambda console with our new function:

Notice the code that was auto-generated for us. It's not much, but we love to see it:

import json

def lambda_handler(event, context):
    # TODO implement
    return {
        'statusCode': 200,
        'body': json.dumps('Hello from Lambda!')
    }

Pay particularly close notice to the arn that is generated for the function. This arn is like it's identification tag in AWS - we will use this in our step function flow in the above.

ARNs follow a specific format like this (yours will look a bit different with the variables): arn:aws:lambda:REGION:ACCOUNT_ID:function:FUNCTION_NAME

We will drop our arn's into the step function to correspond to the Lambda function we want to run. I just made one Lambda function, but you may have more and want to configure those in each of the state machine's places

This is what it looks like:

Step 6: Light it up! 🎄

To create our state machine, we will need to create some IAM permissions to allow the state machine to interact with Lambd and also do some xray tracing. Approve these automatically suggested changes:

We will wait a second and then we should see the confirmation green banner notification saying that the IAM role was created successfully. We may need to wait up to 1-2 minutes for the role to be fully updated.

That was easy! Now our role is configured with all the right permissions for the step function flow.

Now for the fun part! Let's run our step function with a custom comment like this:

{
  "Comment": "Thank you so much amazing AWS Leaders!!❤️‍🔥"
}

Now, when the function runs, we'll see green, meaning it worked 🎄

The state machine will go from blueprint mode...

To lights on mode...

What Step Functions have to do with the AWS Community Builders Program

While you might be thinking that Step Functions is "just another AWS service", it embodies many of the attributes that makes the AWS Community Builders program so strong. Step Functions at their core link complex, powerful, or intricate processes together in a chain so that they all flow together and achieve synchronized movement. When working together, the parts create a well oiled machine that can deliver performance. Let's see how:

Orchestrated Processes and Orchestrated Learning: the ability to orchestrate complex systems and events is a powerful skill, and we are lucky to have amazing leaders and mentors who can orchestrate transformative career growth for us all.
State Management and Growth: growth and transformation should not be stagnant, and the AWS Leaders make sure to keep us dynamic, engaged, and on top of the latest trends and opportunities. State machines are always triaging new events down the flow of the pipeline to where they need to go, and the AWS Leaders make sure that we are moving forward in our careers and lives just like step functions.
Error Handling and Support Systems: like a good QA engineer, we need to have a safe space to test, debug, and work out the code before we ship it live. The Community Builders Program is such a space, where we can all feel comfortable supporting one another, testing out pitches and talks, and being there for each other through job interviews, major projects, and more.
Infinite Scalability: with a global community, you have an ever replenishing support community and circle from all around the globe. It is an incredible feeling to have friends from almost all parts of the world, and especially getting the chance to meet up with the AWS Community at various events like re:Invent, Summits, and meetups are truly so special.
Networking and Collaboration: just like we had to provision that IAM role to connect all of the various services and components of the step function flow together, the AWS Leaders who support the AWS Community Builders program serve this very important role too. By being able to bring leaders, product managers, and mentors together for us to build, learn, and co-create together, the AWS Leadership becomes this very glue, like IAM, that unites all of us together.

I am so thankful to have been a part of the AWS Community Builders program for the past few years, and while I am now an AWS DevTools Hero, I still champion the AWS Community Builders program whenever I can. It is truly what got me into myh development career and helped accelerate where my career has taken me so far. I am so thankful and grateful to everyone I have met through the AWS Community Builders program and the banner of this blog post is just a small sample of the many photos I have with folks I am honored to call friends, colleagues, mentors, and role models. Thank you, AWS Community Builders, for serving and continuing to serve such an important support community to me and everyone in the Community Builders program.

We ❤️‍🔥 and appreciate you all.

Brian

Stacking Serverless Data Structures for a Pomodoro App on AWS

Brian H. Hough — Thu, 20 Apr 2023 03:19:18 +0000

BuiltWithAmplify #BuiltWithAppSync

Hello friends! Welcome back to another blog post on the Tech Stack Playbook post, your guide to apps, software, and tech (but in a fun way I promise)!

In this post and video linked below, I'm going to discuss the Pomodoro app I built for AWS' AppSync x Amplify Hackathon, as well as some of the key learnings I found along the way building this full-stack application. One of the coolest elements of this project for me, was the data structure manipulations needed to create a pomodoro stream of events chain together, and then the lift of making my local stack example work in the cloud across many users. I certainly learned a lot from this project, so I hope you get a lot out of this blog post and video too! Without further ado, let's dive in 🚀

YouTube Video + Demo:

Application page:

Link: https://prod.d1hzn1hof27la1.amplifyapp.com/

Step 1: Quick Design Mockup (aka map it out)

Something I try to get into the habit of is designing at the most basic level what it is I want to build. It's easy to let code dictate the design, but I think pausing to envision the outcome you want first helps you (1.) arrive at the destination more quickly, and (2.) ensure you are working towards the outcome clearly and efficiently.

This is certainly not a masterpiece, but it helped me start to think about the data structures that would be involved and what I would need:

Step 2: Architect the Tech Stack

This is another important preliminary step that is needed to ensure a smooth outcome for your project or software. When determining the tools you will use, there are about 3 important criteria to consider:
(1.) bandwidth - how much time, how many people, how quickly?
(2.) expertise - how much do I know, how much needed to learn?
(3.) flow - how can this be done easily, efficiently, correctly?

The below are the technologies I used to build this application. You don't necessarily need to use all of them, but I have a strong preference for using Next.js/TypeScript for it's excellent server side rendering (SSR) functionalities, lightning fast build/render time, and it's integration with Styled Components for building customized front-ends. For AWS, the AppSync, DynamoDB, Lambda, S3, Amplify stack is one I am particularly partial for. By using the Amplify CLI, we can coordinate all of our AWS resources for our CloudFormation stack and make sure everything is packaged up cleanly before we send to the cloud and eventually our users.

Here is a list of the technologies I used to build this app:

📲 Front-End:

Next.js: modern app development with Server Side Rendering, dynamic routing, and more
TypeScript: to enforce type safety throughout functions and API requests
Styled Components: for fast component development and scaling UIs
Material UI: React component library

⚙️ Back-End:

🚦 API: GraphQL <> AWS AppSync: managed API service and GraphQL transformer based on written schema
🗃️ DATABASE: Amazon DynamoDB: lightning fast NoSQL database optimized for web apps and fast READS/WRITES
💻 HOSTING: Amplify Hosting: managed service optimized for Next.js v13's features and deployment requirements
💾 STORAGE: Amazon S3 highly inexpensive and highly scalable storage solution for images and app hosting
🔐 AUTH: Amazon Cognito: managed authentication service that neatly wraps into fine-grained-access-controls around the API

Step 3: Figuring out numeric sort querying using GraphQL of NoSQL DynamoDB data

This was probably the hardest step for me in this project because at the highest level, when you are running a data stream with chaining, you affect one item and it means you must alter the other elements in the chain accordingly.

TL;DR: you edit one item, so you must edit the others accordingly.

For example, consider the following where we will move an item from the 3rd position at index[2] in the stack to the 1st position at index[0] to re-order the stack and everything pushes down.

ORIGINAL     —>   FINAL
[ITEM#1]          [ITEM#3]
[ITEM#2]          [ITEM#1]
[ITEM#3]          [ITEM#2]
[ITEM#4]          [ITEM#4]

This made perfect sense on paper, but the implementation of this as stack manipulation got even more confusing when I tried to model an abridged NoSQL data structure to emulate how DynamoDB would be interpreting this.

I would be using AppSync to query the Pomodoro items so that I could do a LIST of those items for each user based on the order variable. I figured it would be wise to create a separate order integer value in my schema so that I could track a value that would be mutating regularly as the user drag-and-dropped their tasks in their READY stack.

When new items get created, their order would increment by +1 relative to the last item index's order. However, as items get moved around, their order will be updated while the ID of course stays the same. Something like the below was what I needed to solve for:

      ORIGINAL         —>             FINAL
[id: 1111; order: 1]          [id: 3333; order: 1] 
[id: 2222; order: 2]          [id: 1111; order: 2] 
[id: 3333; order: 3]          [id: 2222; order: 3]
[id: 4444; order: 4]          [id: 4444; order: 4]

In the above example, we have unique a id for each project, but the order is changing as id:3333 goes from order:3 to order:1 meanwhile the other 3 items in the stack all have updated order values as well.

This was the big data structures and algorithms conundrum I had to figure out, specifically how AppSync could process these batch updates at once to update many items in DynamoDB at once.

The solution:

I tested out a number of different implementations and ended up going with a Global Secondary Index (GSI) on a value orderList that takes in a String value and has as its sortKeyField order as a integer value.

...
id: ID!
title: String!
order: Int
  // ❌ This GSI didn't work
  @index(
    name: "ItemsByUserID"
    queryField: "listItemsByOrder"
    sortKeyFields: ["timestamp"]
  )
orderList: String @default(value: "CURRENT")
  // ✅ This GSI worked!
  @index(
      name: "OrderItemsByUserID"
      queryField: "listOrderItemsByUserID"
      sortKeyFields: ["order"]
  )
...

I found that if all of the DynamoDB objects maintain this structure of an order number value and an orderList string value, I could do a list query that I named listOrderItemsByUserID where I find all of the items that have orderList === "CURRENT" and then sort it in ascending order, this then allowed me to list the items in incrementing order numerically even though I was doing a query off of a string value.

This query looks like this:

query MyQuery {
  listOrderItemsByUserID(
    orderList: "CURRENT", 
    sortDirection: ASC
    ) {
    items {
      id
      order
      title
    }
  }
}

Step 4: Stacking/Re-Stacking the Pomodoro Data Structure

Once I figured out that we could use that type of query pattern to get the data listing correctly with the numeric sort, I needed to figure out how to serve order changes from the client to AWS.

I was using a JSON test data structure, which was considerably easier to test and troubleshoot with, but I was not familiar with how to do batch-writing to DynamoDB where mutating one item in the stack spikes mutations of all the other items in the stack and then this is automatically served to the cloud and saved in real time. I was a bit skeptical about this type of set-up given I had realized I've mainly worked on saving items individually or in a queue, rather than a for loop to to batch through client-side updates.

This is why this project turned into a very rich learning lesson because I was able to find out a way that you can use AppSync to serve updates to DynamoDB that almost feels like a websocket but significantly less bandwith since we are just doing update mutations rather than instantiating a whole websocket to serve the updates.

I learned about this TypeScript method for batch iterating with these components:

(1.) A for...of loop: to iterate through the items in the array. We want to run a function across many different items for AppSync to communicate to DynamoDB.
(2.) The .entries() method: ** for spotlighting the various items in the stack. We call this method over the reorderedItems array so that we can use this method to get back an IterableIterator of [index, element] for all of the items in the stack, which in our data model is [number, ItemDDB].
(3.) Tuple Desctructuring: We need to assign new values to the [index, element] base structure of the IterableIterator into variables, so this is a method that will let us make and track those changes.

async function updateItemsOrder(reorderedItems: ItemDDB[]) {
        for (const [index, item] of reorderedItems.entries()) {
          try {
            const input = {
              id: item.id,
              order: index + 1,
            };
            await API.graphql(graphqlOperation(updatePomodoroItem, { input }));
          } catch (error) {
            console.error('Error updating item order:', error);
          }
        }
      }

⚠️ Important note with TypeScript: This IterableIterator is an advanced iteration feature specific to ES6 (ECMAScript 2015), and not usable or callable in previous ES versions. TS will default to using ES5, which then means that it won't support the iteration we want to use, so we need to do one of two things:

1.) Switch to ES6 in our tsconfig.json file to change "target": "es2015", under the compilerOptions object, or
2.) Add the --downlevelIteration compiler flag by adding "downlevelIteration": true, to the compilerOptions object.

Step 5: Hard-Typing with GraphQL and TypeScript

There are numerous reasons for using TypeScript in an enterprise applications, from ensuring error-free and bug-free build code when it goes to production, as well as a consistent and reliable framework for how your data structures should be used or get called in your application.

For this hackathon project, I wanted to practice typing my functions, data structures, and API calls. It was either going to be a great learning experience, or a horrible decision that I would regret forever. Even though this was a hackathon project, we must either go big or go home, as they say.

Type Guards

When we are working with AppSync, we will be making requests to get either one item (GET), or many items (LIST), so we will need to ensure we have an interface that can cross-check the data object and make sure what you expect to get is really what you get in your call.

An example of this is my getItemsFromDDB async function which queries my global secondary index for my schema, passing in the orderList string variable, a request to get the data in ascending (ASC) order, and a filter around the status, as I only want the items that are non-COMPLETED, aka "RUNNING" in my case.

Then I want to make sure that I check against an interface, which I named isGraphQLResultForGetItemsFromDDB which accepts the fetchedItems I receive and make sure that it matches up with this structure:

interface ItemDDB {
  id: string;
  title: string;
  status: string;
  timeBlock: string;
  minutesLeft: string;
  color: string;
  colorDefault: string;
  itemStatus: string;
  order: number;
}

function isGraphQLResultForGetItemsFromDDB(fetchedItems: any
  ): fetchedItems is GraphQLResult<{ listOrderItemsByUserID: { items: ItemDDB[] } }> {
    return fetchedItems.data && fetchedItems.data.listOrderItemsByUserID && fetchedItems.data.listOrderItemsByUserID.items;
}

The whole function, useEffect hook, and type guards looks like this:

  const getItemsFromDDB = async () => {
    try {
      const fetchedItems = await API.graphql({
        variables: {
          orderList: "CURRENT", 
          sortDirection: "ASC",
          filter: {
            status: {
              eq: "RUNNING"
          }}
        },
        query: listOrderItemsByUserID,
        authMode: "AMAZON_COGNITO_USER_POOLS"
      })

      if (!isGraphQLResultForGetItemsFromDDB(fetchedItems)) {
        throw new Error('Unexpected response from API');
      }

      if (!fetchedItems.data) {
        throw new Error('No data found');
      }

      const returnedItems = fetchedItems.data.listOrderItemsByUserID.items;
      console.log(returnedItems);
      setItems(returnedItems);

    } catch (error) {
        console.log('Error running getItemsFromDDB:', error)
    }
  }

  useEffect(() => {
    getItemsFromDDB();
  }, [])

Step 6: Shipping Your Project Live

Unsurprisingly enough, Amplify's managed hosting prevents you from pushing error-ridden code into production (I guess this is for better and not worse). What is good about a thorough review like this is that AWS will not push or update just-pushed changes if there are type errors or anything that causes breaks in the code deployment pipeline.

I thinks this is a great benefit to make sure that you do not push buggy or error-prone code to your users at any given time. This is a great benefit for a clean CI/CD pipeline.

Also, Amplify's way that it seamlessly integrates Server Side Rendering out of the box for deploys is phenomenal.

Further, as you work on your AppSync schema, you can configure and push your code for the back-end outside of the front-end. This decoupling allows you to start branching out beyond a monorepo and start turning Lambdas (this project has a couple lambda functions updating the public data table based on lambda triggers), Authentication, Databases, and storage into microservices that can be worked on and streamed to the front-end via APIs, Amplify's routing service, and AWS service identifiers in AWS Amplify's aws-exports.js file with an authorized IAM role.

Did you learn something new about AWS and the cloud? 💭

Let me know in the comments below! ⬇️

Subscribe to the Tech Stack Playbook on YouTube:

Let me know if you found this post helpful! And if you haven't yet, make sure to check out these free resources below:

Sign up for my newsletter: Email List
Follow my Instagram for more: @BrianHHough
Watch my latest YouTube video for more
Listen to my Podcast on Apple Podcasts and Spotify

Wrangling GraphQL Data Schemas with AWS AppSync

Brian H. Hough — Thu, 06 Apr 2023 21:34:50 +0000

What to Do When Your GraphQL Queries & Mutations Won't Auto-Build with AWS AppSync

How's it going everyone? 👋 This is Brian and welcome back to the Tech Stack Playbook, your guide to apps, software and tech (but in a fun way I promise).

In today's blog post, we are going to look at AWS AppSync, GraphQL, and debug an interesting issue I came across last night trying to build my API endpoint for a blog app.

While it's important to know how things work, I continue to be reminded that it is even more important to know why things don't work, and even more so, knowing how to fix issues when they arise.

Here’s a glance at what you’ll learn in this blog post:
👉 How AWS Amplify, AppSync, and GraphQL Transformer work
👉 What to do if you GraphQL queries/mutations won't auto-build
👉 How to test and push your data schema and API to the cloud

What is the AWS Amplify Framework?

One of my absolute favorite frameworks for building full-stack cloud applications is the AWS Amplify Framework. Not only does it support core AWS services across:

Authentication: AWS Cognito
Database: DynamoDB
Storage: AWS S3
API: AWS AppSync

...But it also supports a powerful way to work with GraphQL - the GraphQL Transformer

AppSync will help you auto-build your queries and mutations based on the schema you define in your schema.graphql file. Not only does this reduce the possibility of errors in production, but it also increases your ability to turn code around faster with code generation (codegen) and auto-build sequences to configure the database, storage, and authentication privileges in the cloud based on your API endpoint in a matter of minutes.

So what happens if you come across an issue where you don't see the /graphql folder in your application?

For reference, I am using the NEXTjs framework, which is why the graphql folder is in the /src folder.

This is the solve for this issue if you aren't getting the queries and mutations in your /src folder...

⚠️ Issue: The GraphQL Mutations and Queries aren't building in your app's root folder.

So after some debugging, I found out that in the /amplify/backend/api/blogapp/cli-inputs.json file, this is where your .json file will point to the schema path.

❌ Initially, I had it pointing to the Trash folder...most likely because I was working on a previous project, put it in the trash, but the amplify pointer was still set to follow where the root project went:

{
  "version": 1,
  "serviceConfiguration": {
    "apiName": "blogapp",
    "serviceName": "AppSync",
    "gqlSchemaPath": "/Users/USERNAME/.Trash/blogapp/amplify/backend/api/blogapp/schema.graphql",
    "defaultAuthType": {
      "mode": "API_KEY",
      "expirationTime": 7
    }
  }
}

✅ To fix this, I re-directed the gqlSchemaPath to the location of the schema.graphql file below (the correct link).

This works so long as it's pointing to the right directory of the project:

{
  "version": 1,
  "serviceConfiguration": {
    "apiName": "blogapp",
    "serviceName": "AppSync",
    "gqlSchemaPath": "/Users/USERNAME/Documents/GitHub/AWSAmplify_GraphQL_Blog/blogapp/amplify/backend/api/blogapp/schema.graphql",
    "defaultAuthType": {
      "mode": "API_KEY",
      "expirationTime": 7
    }
  }
}

⚠️ There was no `graphqlconfig.yml` file in the root folder of the project

By configuring your project to generate code with codegen, you need a place to store the configuration. The graphqlconfig.yml file is auto-built in the root folder and when generating the types defined in your schema.graphql file, codegen takes in GraphQL statements (inputs) and generates types that can be used based on the schema (outputs).

I initially had a placeholder file:

projects:
  blogapp:
    schemaPath: src/graphql/schema.json
    includes:
      - src/graphql/**/*.js
    excludes:
      - ./amplify/**
    extensions:
      amplify:
        codeGenTarget: javascript
        generatedFileName: ''
        docsFilePath: src/graphql

When I run amplify push later, this auto-generates the file below:

projects:
  blogapp:
    schemaPath: src/graphql/schema.json
    includes:
      - src/graphql/**/*.js
    excludes:
      - ./amplify/**
    extensions:
      amplify:
        codeGenTarget: javascript
        generatedFileName: ''
        docsFilePath: src/graphql
extensions:
  amplify:
    version: 3

Once you have updated your schema and want to update your schema.graphql file, you can run:

amplify api-gql-compile

🛠 Testing

Of course, where would we be without implementing test-driven-development in our development lifecycle?

A recommended flow would be:

Create/edit the GraphQL schema
Test the data schema via mocking
Ensure all specifications and requirements are met
Push to the cloud and auto-build

With the AWS Amplify framework, testing a GraphQL API endpoint is as easy as running a single command in the terminal:

amplify mock api

Did you learn something new about AWS and the cloud? 💭

Let me know in the comments below! ⬇️

Subscribe to the Tech Stack Playbook on YouTube:

Let me know if you found this post helpful! And if you haven't yet, make sure to check out these free resources below:

Sign up for my newsletter: Email List
Follow my Instagram for more: @BrianHHough
Watch my latest YouTube video for more
Listen to my Podcast on Apple Podcasts and Spotify

Why you should be learning cloud in 2023 | AWS Community Builders Program

Brian H. Hough — Mon, 23 Jan 2023 04:08:30 +0000

Why should you learn cloud in 2023? 👨‍💻💭

In this episode of the Tech Stack Playbook, I'm diving into how I built my career in tech and explain how the AWS Community Builders program allowed me to really dive deep into the tech ecosystem. Today's episode focuses on AWS, the community, the core benefits of the program, and how it has helped me level up as a software engineer and developer a few years ago.

For anyone who is looking to get a job, searching for a new role, looking to upskill and level up, switching careers, or pivoting career directions, this episode will be a deep dive into what I did to get into tech and how the steps I took might be able to help you on your journey as well.

📝 Applications for the AWS Community Builders Program close on Jan 23, 2023, so please reach out if you have any questions about the program and be sure to apply by the deadline here: https://amazonmr.au1.qualtrics.com/jfe/form/SV_bJwBQXrT2LhBawS

Here’s a glance at what you’ll learn in this blog post:
👉 3 Ways to increase your chances of getting hired
👉 How social media led me to the AWS Community Builders Program
👉 Why learning cloud will future-proof your skills/career
👉 The 3 core benefits of the AWS Community Builders Program
👉 How you can future-proof yourself and your skills
👉 What to learn in 2023

Looking to skip right to a specific chapter? Check them out:
00:00:00 Why should you learn cloud in 2023?
00:01:09 3 Ways to increase your chances of getting hired
00:03:19 How social media led me to the AWS Community Builders Program
00:05:23 Why learning cloud will future-proof your skills/career
00:09:53 The 3 core benefits of the AWS Community Builders Program
00:19:07 How you can future-proof yourself and your skills
00:21:50 What to learn in 2023

Are you thinking of applying this year? 💭

Let me know in the comments below! ⬇️

Check out the full recording below:

Let me know if you found this post helpful! And if you haven't yet, make sure to check out these free resources below:

Follow my Instagram for more: @BrianHHough
Watch my latest YouTube video for more
Listen to my Podcast on Apple Podcasts and Spotify
Join my FREE Tech Stack Playbook Discord Server

Let's digitize the world together! 🚀

-- Brian

AWS Amplify CLI Installation Guide (M1/M2 2022 Mac Edition)

Brian H. Hough — Sun, 16 Oct 2022 06:40:06 +0000

💭 What is the AWS Amplify Framework?

One of my absolute favorite frameworks for building cloud-based, serverless applications is the AWS Amplify framework. I have been spending the better part of this past year learning the ins-and-outs of the framework, as well as extending each of the tools in the tech stack to incorporate new integrations, data models, front-end experiences, and event-driven architectures.

This framework, to me, really conceptualizes what makes serverless applications so powerful. Within the framework, you leverage the @aws-amplify CLI (command line interface) to provision resources in the cloud right from the command line. Most importantly, these resources are deployed with the right IAM (Identity and Access Management) authorization rules and abide by the AWS principle of "Least Privileged Access".

Some examples of these great CLI commands include:

amplify add auth: configure an AWS Cognito User Pool and methods for signing-in, including email/password and/or social federation (i.e. Facebook, Apple, OpenID, SAML, etc.)
amplify add api: configure an AppSync API via REST or GraphQL that configures directly to a NoSQL DynamoDB database to read/write from the front-end to your back-end.
amplify add storage: configure AWS S3 file upload/download capabilities for files, such as images, videos, PDFs, music files, etc.
amplify add hosting: configure a manual deployment or CI/CD (continuous integration/continuous deployment) pipeline to deploy your app's code to an amplify URL or your own custom domain.
amplify status: review your locally deployed AWS resources before you deploy them.
amplify push: run a cloudformation script to deploy your locally created AWS resources to your cloud environment.

Case in point, the AWS Amplify framework is a great wrapper around core AWS services and their functionalities to help you build faster, without compromising security or scalability.

⚠️ 2022 Update on Installing the AWS Amplify CLI

Migrating to new technology, like a new laptop or OS, can be a very daunting process. Setting up my new M1 Max laptop this year was a process that took a couple weeks, myself. You will find out how many CLIs, SDKs, softwares, systems, and tools that installed once and forgotten 😊

What can be especially frustrating when moving from one OS to another, such as the 2019 MacBook Pro to the 2022 M1 Max, is when the tools you use on the previous device don't work the same on the new one. This happened with installing the @aws-amplify CLI.

I ran into a core issue where I needed to use sudo in front of all of the AWS Amplify CLI commands, which meant I would have to put in my password EVERY SINGLE TIME I ran amplify something 🙃

I hope that this guide helps you get up and running with AWS Amplify, especially if you run into the Error: EACCES: permission denied errors that I ran into.

Installation Guide

For reference, the AWS Amplify steps referenced below are also viewable on the Amplify Docs here should there be any differences or modifications since the writing of this blog.

🧑‍💻 Step 1: Installing Node.js and npm

Node.js, also referred to NodeJS or just Node, is an open-sourced and widely adopted JavaScript runtime environment. When you are running a JavaScript server, NodeJS is often what is being referenced.

On the homepage, NodeJS will attempt to read the type of device you have and then present two download options for you:

I've found that the LTS version is the one that works most of the time, so I installed that one.

When you install NodeJS, you will also have the option to install npm (Node Package Manager) as well. Make sure that option is selected if there is an option, as you will need npm when installing dependencies in your projects or running node scripts.

⚠️ IMPORTANT: if you have any issues installing NodeJS or npm on your Mac, Homebrew.sh may be helpful to you. When you install Homebrew, it helps you package your installations into their own directory and them symlinks them to usr/local on your Mac.

🧑‍💻 Step 2: Set up an AWS Account

On the AWS homepage you will see a bright orange button in the top right that says "Create an AWS Account."

To set up an account, you will need an email and a credit card, but don't worry, you will only be charged a temporary ~$1 (or less) hold to verify your card. It will be refunded to you within 1-3 business days.

🧑‍💻 Step 3: Installing the Amplify CLI

The AWS Amplify CLI (command line interface) is a set of programmable terminal scripts to create/deploy AWS services for any application, website, or system.

There are 3 core ways to install the @aws-amplify CLI:

npm (for NodeJS users):

npm install -g @aws-amplify/cli

cURL (for Mac/Linux):

curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL

cURL (Windows-only):

curl -sL https://aws-amplify.github.io/amplify-cli/install-win -o install.cmd && install.cmd

The immediate go-to since we just installed NodeJS/npm would be to install via the npm install... command.

So let's do that!

🧑‍💻 Step 3.5: If you receive `Error: EACCES: permission denied` errors after running the above.

In the latest models of the Apple M1/M2 Macbook Pro/Max's, there is well documented issues around installing system-wide software and tools where the Mac will reject installing it, claiming access permission issues.

This is what that might look like if you receive this error after running: npm install -g @aws-amplify/cli

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code EACCES
npm ERR! syscall rename
npm ERR! path /usr/local/lib/node_modules/@aws-amplify/cli
npm ERR! dest /usr/local/lib/node_modules/@aws-amplify/.cli-XXXXXXXX
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/@aws-amplify/cli' -> '/usr/local/lib/node_modules/@aws-amplify/.cli-XXXXXXXX'
npm ERR!  [Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/@aws-amplify/cli' -> '/usr/local/lib/node_modules/@aws-amplify/.cli-XXXXXXXX'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'rename',
npm ERR!   path: '/usr/local/lib/node_modules/@aws-amplify/cli',
npm ERR!   dest: '/usr/local/lib/node_modules/@aws-amplify/.cli-XXXXXXXX'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/MYUSER/.npm/_logs/2022-10-15T17_42_00_235Z-debug-0.log

✅ PART 1: A temporary workaround is install the amplify CLI with sudo if you can't install with just npm. Sudo is an admin-only command to install something globally

sudo npm install -g @aws-amplify/cli

In the long-term if left like this, it will present a nightmare of permission issues where you will have to enter your admin password every single time you want to run an amplify command (after a month of this madness, I needed to figure out how to stop the madness). So continue to the following step on how to switch the amplify CLI to be accessible by your device user.

✅ PART 2: Now that the amplify CLI is installed via sudo, we now must configure the CLI to be accessible to our specific user. What we did in the above was make the amplify cli accessible only to our root user, not our device user.

We will use a bit of linux to change the owner for our amplify CLI toolchain. In a new terminal window, run the following commands one by one, and make sure to replace MYUSER with the user of your device. You can find out what the name is by opening a separate terminal window and running whoami and what is printed out is your device name.

# invoke a root shell by logging in as the root user
sudo -i

# change directory into your specific user you want to adjust
cd ~MYUSER

# change ownership of the `.amplify` file to MYUSER
chown -R MYUSER .amplify

What we just did was change the ownership of the hidden directory .amplify installed under our user. If you want to find where this is, run ls -al and you should see a list of directories, including .amplify

✅ PART 3: Test
In a separate terminal window, check if you can run amplify help. If you get a response back and the CLI is running the help command, then you are all installed correctly!

🧑‍💻 Subscribe to the Tech Stack Playbook for more:

Let me know if you found this post helpful! And if you haven't yet, make sure to check out these free resources below:

Follow my Instagram for more: @BrianHHough
I'm also on Tik Tok too: @BrianHHough
Watch my latest YouTube video for more
Listen to my Podcast on Apple Podcasts and Spotify
Join my FREE Tech Stack Playbook Facebook Group

Let's digitize the world together! 🚀

-- Brian

Learn how to Dynamically Add App Features with AWS AppConfig Feature Flags (+ Linux 101)

Brian H. Hough — Mon, 13 Jun 2022 03:58:00 +0000

How's it going everyone? 👋 Welcome back to the Tech Stack Playbook, your guide to apps, software, and tech (but in a fun way I promise).

This past week, I attended a really eye-opening AWS workshop put on for AWS Community Builders on a very interesting service I had not used before, called AppConfig. As described in the documentation, AWS AppConfig is a service that lets developers create, manage, and quickly deploy application changes, modifications, features, or patches which are running on Amazon EC2 (Elastic Cloud Compute), AWS Lambda, containers, mobile apps, or IoT devices.

In this blog post, I'll go through the workshop, the code I used to run everything, screenshots of the deployment process, and I will also go through how to use Linux and an Amazon EC2 instance to deploy all of the code in a VM (virtual machine).

What we will build is a simple Airbnb-for-Cribs home rental application and switch in an image viewer carousel for each listed home via AWS AppConfig. Here's what it will look like (unfortunately, IRL mansions are not included):

I have the starter repo that AWS created linked on my GitHub here under the branch initial. I also have the final branch code for reference as well.

BrianHHough / AWSAppConfigWorkshop

Exploration of the AWS AppConfig service for dynamic feature changes to a web application. The workshop uses AWS AppSync, AWS Amplify, AWS EC2, DynamoDB. The app's tech stack is: HTML, CSS, JavaScript.

AWS AppConfig Workshop Repo

Exploration of the AWS AppConfig service for dynamic feature changes to a web application. The workshop uses AWS AppSync, AWS Amplify, AWS EC2, DynamoDB. The app's tech stack is: HTML, CSS, JavaScript.

There are 2 branches:

final = includes the script calling the AWS Lambda function connected to AWS AppConfig
initial = is the starter repo (if you are following along, start on this branch)

Follow along to the following blog post for steps on how to proceed:

DEV.to: Learn how to Dynamically Add App Features with AWS AppConfig Feature Flags (+ Linux 101)

View on GitHub

If you're excited, read on!

☁️ Building for Scale (in the Cloud)

Let's take a step back, to talk about scale. "Building for scale" is something a lot of people talk about, but very seldom do we ever plan for scale to happen in the ways we want. Becoming an "overnight success" could take months, years, or even decades in some cases. We rarely ever know when "hitting scale" will take place, so we have to future-proof tech so that it will scale with our needs, when we need them.

Imagine releasing a feature to a million plus member base. What if the feature includes a breaking change with a bug that decreases use by 60% per week per user. That could be disastrous. We want to get ahead of these issues, which is why AWS AppConfig can help us analyze a feature pushed to a select (but growing) number of users over time so that we can adapt to the change, see what it does to our user base, and adjust accordingly.

When you think about "building for scale," of course one of the top companies that comes to my mind is Facebook (...I mean, Meta...still not used to saying that). In Meta's 2022 Q1 2022 Earnings Report, the company reported a whopping 2.94 billion Monthly Active Users as of March 31, 2022 (Meta Q1 2022 Earnings Report).

One of the interviews that stands out in my mind in particular is Reid Hoffman's Masters of Scale interview with Meta CEO Mark Zuckerberg. Back in 2017, Mark Zuckerberg shared a bit more of the context behind his "move fast and break things" mantra that has allowed him to build the largest social media platform on the planet.

Mark shared that:

"At any given point in time, there isn't just one version of Facebook running, there are probably 10,000. Any engineer at the company can basically decide that they want to test something. There are some rules on sensitive things, but in general, an engineer can test something, and they can launch a version of Facebook not to the whole community, but maybe to 10,000 people or 50,000 people—whatever is necessary to get a good test of an experience. (Entrepreneur)"

Check out the interview here:

Imperfect is perfect, w/Facebook's Mark Zuckerberg

If you’re Steve Jobs, you can wait for your product to be perfect. For the rest of us, If you’re not embarrassed by your first product release, you’ve released it too late. Imperfect is perfect. Why? Because your assumptions about what people want are never exactly right. Most entrepreneurs create great products through a tight feedback loop with real customers using a real product. So don’t fear imperfections; they won’t make or break your company. What will make or break you is speed. And no one knows this better than Facebook’s Mark Zuckerberg. He shares the origin story of his mantra “move fast and break things” and how this ethos applied as Facebook evolved from student project to tech giant. Read a transcript of this episode: https://mastersofscale.com Subscribe to the Masters of Scale weekly newsletter: https://mastersofscale.com/subscribe

art19.com

You might think, why would you want something like this? All the users have different user experiences? Isn't that counter-intuitive to UI/UX testing, agile development, and scaling?

Not necessarily... because, let's say you are testing the incorporation of a feature or experience. Sure you can test it in controlled environments, but those are still, controlled. What is more optimal is to test real people, using your app in a real way, without the impression of being under a microscope, so you can really understand if the feature "hits" or resonates with the expected user base at the expected time.

To this day, I have always wondered how dynamic feature adds or dynamic user testing actually works in production. Thanks to the AWS Community Builders Program, I was able to see something like this in action, which is what I will be sharing with you today.

☁️ Intro to AWS AppConfig

With AWS AppConfig, we are going to add in a feature called "Photo Slider" which will allow users to switch between photos in the app for each crib. However, it will not be visible to everyone all at once as soon as the feature is pushed.

AWS AppConfig allows us to set the launch deployment details, where we can release to 1% of users, then 5%, then 10%, and so on. It can be risky to release a new feature to users all at once, so we need to account for that. AWS AppConfig has a feature called "Feature Flags" that can allow us to pull the switch on a feature if something unexpected or disastrous happens in the app and allow us to revert back near-instantly.

☁️ Where does AWS AppConfig fit?

In this architecture diagram provided by the AWS team, it outlines where everything "lives."

Deployment; via AWS Amplify
Database: via DynamoDB
Front-end: via HTML, CS, and JS
AppConfig: connected via a AWS Lambda function to the front-end

Source: AWS

☁️ Set up a Feature Flag

In the AWS Console, you will navigate over to the AWS AppConfig service.

Click Get Started
In "Create Application" page, name your app: AWSomeCribRentals
Add a description: This is for feature flags related to the AWSomeCribRentals app
Click Create application

This will be our container for all flags related to our application. Think of it like a wrapper.

We then must create a configuration profile within the AppConfig application. This lets us define the Feature Flag type and set-up. You can think of it as an element within the wrapper (i.e. you could have multiple Configuration Profiles, perhaps even multiple feature flags within the same profile, which all sits within the AppConfig Application).

Let's name the config profile of our feature addition of a card: CardFeatureFlag
Add a description: related to card

We will then add a new flag by clicking Add new flag which will be a short-term flag, as we will deprecate it in the future granted everything is a success:

Name: showcarousel
Description: this will let users swipe through images than only showing them one per Crib
Select: short-term-flag
Click Create flag to create our first Feature Flag with AWS AppConfig
Click Save new version to proceed.

☁️ Update the Photo Pagination for the Feature Flag

Navigate to the CardFeatureFlag that we just created and click Add new flag

Name: pagination
Description: change how many homes returned on the page
Attributes: number
Type: number
Value: 8
Required Value: [✅]
Constraint: 5 minumum and 12 maximum
Click Create flag

Turn the pagination flag on with the switch and then press save new version

☁️ Deploy the Feature Flag

You should see something like this, which tells us we have two Feature Flags (pagination which is switched on, and showcarousel which is turned off) added to the Configuration Profile CardFeatureFlag

We want to deploy this, so here is what we will do:

Click Start deployment
Click Create Environment
Name the environment: Beta

Next we will want to create a Deployment Strategy. It's important to consider factors like the Bake time: the amount of time AppConfig monitors for CloudWatch alarms before advancing to the next deployment or step, such as rolling back a feature.

There are 3 pre-defined options available: AppConfig.AllAtOnce — instant deployment to all, AppConfig.Linear50PercentEvery30Seconds — deploys to half of target every 30 seconds and deploy time is 1 minute (i.e. useful for testing or demos), and AppConfig.Canary10Percent20Minutes (AWS Recommended) — deploys slowly over time (i.e. useful for production workload).

We will, however, Create deployment strategy:

Name: FFWorkshop_Deployment
Type: Linear
Step percentage: 10
Deployment time: 1 minute
Bake time: 1 minuteg

Select Create deployment strategy and then Start deployment which will take about a couple of minutes to fully release. It will ultimately look like this when it's been deployed fully:

☁️ Configure AWS Lambda

AWS Lambda functions are private functions that run in the cloud and allow you to run code without the need to run a server. You simply need to call a script to connect with them and then you can run compute without needing to provision a back-end for it.

For some background context on AWS Lambda, check out Parts 1 and 2 of my "Serverless Workflows with Step Functions and Lambda" here:

To set up Lambda for our project, we will:

Navigate to AWS Lambda
Click Create Function
Name: FF_Lambda
Runtime: Node.js 14.x
Click Create function

In the code editor, add this code (generously provided to us by AWS) which allows us to toggle the Feature Flag on and off:

const http = require('http');
const AWS = require('aws-sdk');
const docClient = new AWS.DynamoDB.DocumentClient();

exports.handler = async (event) => {

    const res = await new Promise((resolve, reject) => {
        http.get(
            "http://localhost:2772/applications/AWSomeCribRentals/environments/Beta/configurations/CardFeatureFlag",
            resolve
        );
    });

    let configData = await new Promise((resolve, reject) => {
        let data = '';
        res.on('data', chunk => data += chunk);
        res.on('error', err => reject(err));
        res.on('end', () => resolve(data));
    });

    const parsedConfigData = JSON.parse(configData);

    const DynamoParams = {
        TableName: 'AWSCribsRentalMansions'
    };

//Fetching the listings from DynamoDB

    async function listItems() {
        try {
            const data = await docClient.scan(DynamoParams).promise();
            return data;
        } catch (err) {
            return err;
        }
    }

//Checking for the Caraousel Feature Flag
    if (parsedConfigData.showcarousel.enabled == true) {
        let returnhtml = ``;

        try {

            const data = await listItems();

            for (let i = 0; i < parsedConfigData.pagination.number; i++) {
                returnhtml += `<div class="col-md-4 mt-4">
                <div class="card profile-card-5">
                    <div class="card-img-block">

                        <div class="slideshow-container">`;

                for (let j = 0; j < data.Items[i].Image.length; j++) {
                    returnhtml += `<div class="mySlides` + (i + 1) + `">
                    <img class="card-img-top" style="height: 300px;" src="` + data.Items[i].Image[j].name + `" style="width:100%">
                  </div>`;
                }

                returnhtml += `</div>`;

                if(data.Items[i].Image.length > 1) {
                    returnhtml += `<a class="prev" onclick="plusSlides(-1, ` + i + `)">&#10094;</a>
                            <a class="next" onclick="plusSlides(1, ` + i + `)">&#10095;</a>`;
                }

                    returnhtml += `</div>
                    <div class="card-body pt-0">
                    <h5 class="card-title">` + data.Items[i].Name + ` <span style="font-size: 0.7em;color:rgb(255, 64, 64)">(` + data.Items[i].Location + `)</span></h5>
                    <p class="card-text">` + data.Items[i].Description + `</p>
                    <a class="btn btn-primary"style="display: inline" href="#">Check Availability</a>
                    <span style="float: right;cursor: pointer;" onclick="favoriteStar(this)"><span class="fa fa-star"></span></span>
                  </div>
                </div>
            </div>`;
            }

            return {
                statusCode: 200,
                body: returnhtml,
            };

        } catch (err) {
            return {
                error: err
            }
        }

    } else {

        let returnhtml = ``;

        try {

            const data = await listItems();
            console.log("dynamo db data: ", data)

//Checking for Pagination Numbers
            for (let i = 0; i < parsedConfigData.pagination.number; i++) {
                returnhtml += `<div class="col-md-4 mt-4">
                <div class="card profile-card-5">
                    <div class="card-img-block">
                    <img class="card-img-top" style="height: 300px;" src="` + data.Items[i].Image[0].name + `" style="width:100%"
                        alt="Card image cap" style="height: 300px;">
                    </div>
                    <div class="card-body pt-0">
                    <h5 class="card-title">` + data.Items[i].Name + ` <span style="font-size: 0.7em;color:rgb(255, 64, 64)">(` + data.Items[i].Location + `)</span></h5>
                    <p class="card-text">` + data.Items[i].Description + `</p>
                    <a class="btn btn-primary"style="display: inline" href="#">Check Availability</a>
                    <span style="float: right;cursor: pointer;" onclick="favoriteStar(this)"><span class="fa fa-star"></span></span>
                  </div>
                </div>
            </div>`;
            }

            return {
                statusCode: 200,
                body: returnhtml,
            };

        } catch (err) {
            return {
                error: err
            };
        }
    }
};

Now we will want to add a layer to our Lambda Function (scroll to the bottom of the page and find Add a layer)

Select AWS-AppConfig-Extension
Click Add

If all goes well, it should look like this:

⚠️ Warning

If you do not see AWS-AppConfig-Extension in the drop-down of AWS-provided layers...make sure you are actually in Node.js 14.x version of runtime (not 16.x like below). At the time of making this blog post, Node.js 16.x has not been configured to allow for the AppConfig extension yet.

☁️ Set up the AWS Lambda Function URL

One of the amazing benefits of AWS Lambda is the ability to add HTTPS endpoints to any serverless function we launch in Lambda, as well as configure CORS headers if we wish.

Under the function overview:

Click Configuration
Click Function URL and then Create Function URL
Auth Type: NONE
Configure cross-origin resource sharing (CORS) [✅]
We will include the wildcat * for this demo for Allow origin, Expose headers, Allow headers, and Allow methods...but you would want to configure more secure methods of connection for origin/headers in production.
Click Save and save the Function URL for later.

Next, we need to update the Execution Role to ensure our Lambda function has the right IAM permissions to access AppConfig using the AWS best practice and principle of "least privilege." Basically, don't allow more permissions than are required for the need/resource.

Go to IAM (Identity and Access Management)
Select Policies
Go to Create Policy, then Choose a service and select AppConfig.
For Actions, select All AppConfig actions
For Resources, select All Resources
Click Next to proceed through the steps and then at the end under name, write AppConfigAllAccess to name this IAM role.

Next, we will attach these policies to our Lambda Function:

AmplifyFullAccess
AppConfigFullAccess
AppConfigAllAccess - this is the one we just made
AmazonDynamoDBFullAccess

The screen will look like this when you update the function and attached the policies successfully:

☁️ Create and Populate a DynamoDB Table using an EC2 Instance (VM)

This was a very eye-opening part for me because the workshop had a lot of elements where a single user would be completing the upload/scripts from their computer. But what if you wanted to do it from a Virtual Machine because you have a different AWS Profile on your computer you don't want to overwrite/mess with? Or what if you wanted multiple people to have access to the same server files/items?

You can configure an EC2 server and run all the commands as you would on your normal computer, but instead on a rented server/computer, in the cloud!

This is where the real fun starts...

First, we'll set up an EC2 instance so that we can get a real-time server running and that we can SSH into.

Navigate to the EC2 service in the AWS list of tools
Launch an instance
Choose: t2.medium (this will give us a little bit more power than the t2.micro BUT be cognizant that the t2.medium server will incur costs. If you do not want to incur costs, choose a t2.micro server instead).
Turn on all public access to the server (this is just for demo/testing purposes, so if you are going into production, you would want to lock down the server).
Once you confirm all the settings, save your keypair to your Computer/drive (this is important that you do not lose this), and click Launch

The server will look like this once it is running:

☁️ Create the DynamoDB Table from within an EC2 Server Using Linux

EC2 forces you to chmod 400 of the keypair so only your user can read/edit the file — anyone else would need to sudo. Make sure that the path does link to your terminal (Mac) or PowerShell (Windows). TIP: You can easily drag and drop a file from the Finder or Windows Explorer into your command line to automatically generate the file path.

chmod 400 /User/FF_Workshop_Keypair.cer

Now we will SSH into the server with the keypair and Public DNS.

We will use ec2-user in the first part because this is an EC2 Instance
We will then pull the Public IPv4 DNS of the EC2 instance which you will see in the above screenshot on the right for the Instance Summary: ec2-3-82-148-71.compute-1.amazonaws.com

ssh -i /User/FF_Workshop_Keypair.cer ec2-user@ec2-3-82-148-71.compute-1.amazonaws.com

It will look like this if you are successfully signed into the server:

Now we need to configure aws inside of the server.

The elements we will need to configure attributes for are: Default Region, Access Key ID, Secret Access Key, and AWS Session Token. These were generated for us via the AWS Event Bridge, but without it being set up for us, we would need to configure the aws profile (link to more about this in the AWS docs)

We will write aws configure and enter, and then copy and paste all of these values into the command line and press enter when prompted for each one. And then under output format, put json.

AWS_DEFAULT_REGION=us-east-1
AWS_ACCESS_KEY_ID=MSIA...MQ5U
AWS_SECRET_ACCESS_KEY=YI2d...JuZU
AWS_SESSION_TOKEN=IQoJ...wef4

It will look like this:

☁️ Next, you have to make sure the right AWS account is active for the session in the command line

Right now, you have configured AWS above but it’s not set up to connect to anything…we know this because if we then try to do: aws sts get-caller-identity we will get the following error: Or code snippet:

An error occurred (InvalidClientTokenId) when calling the GetCallerIdentity operation: The security token included in the request is invalid.

To fix this, we need to add in the credentials into the command line as environmental variables and export (print) them into the profile for AWS in the Linux instance (same values as before):

export AWS_DEFAULT_REGION=us-east-1
export AWS_ACCESS_KEY_ID=MSIA...MQ5U
export AWS_SECRET_ACCESS_KEY=YI2d...JuZU
export AWS_SESSION_TOKEN=IQoJ...wef4

We can verify that the environmental variables are saved to our Linux session with printenv AWS_DEFAULT_REGION or printenv AWS_ACCESS_KEY_ID

If the output prints what we entered in previously, then it worked!

To validate that our AWS account is authenticated/synced, type aws sts get-caller-identity. If this worked correctly, you should see a print out of something like the below:

{
    "Account": "354789352487", 
    "UserId": "AROAVFGYX4QT3O2UKAPLI:MasterKey", 
    "Arn": "arn:aws:sts::354789352487:assumed-role/TeamRole/MasterKey"
}

In our AWS account, in the top right, you'll see the right Account # (the same as in "Account" in the terminal).

Alright we did it!

To further validate this, if we use aws ec2 describe-instances then we should get a print out of the instances we are running or have terminated:

☁️ Now we populate the DynamoDB Table to hold image links and home information

While we have our SSH link open to our server and running, let's open up another terminal window. This is because we cannot upload a local file from within the server (remember, we are in a virtual machine there...so we are in a completely different computer that doesn't recognize our local directories on our computer).

We need to upload a file to the server and then call it that way to communicate with DynamoDB. We will use the scp (Secure Copy Protocol) command in Linux, which is used to copy/send/retrieve files securely between servers.

For us, the script we will run is this below: we reference a IAM key-pair certificate file FF_Workshop_Keypair.cer file on our computer and then the AWSCribsRentalMansions.json file on our computer and then our EC2 AMI’s Public IPv4 DNS ec2-3-82-148-71.compute-1.amazonaws.com and declare that we will put it as a loose-hanging file in the server at position: / .

The linux command is:

1st part is the path to the secret key file
2nd part is the path to the file we want to upload
3rd part is ec2-user because it's an AMI EC2 "at" the Public IPv4 DNS URL ec2-3-82-148-71.compute-1.amazonaws.com
4th part is a ~ since we want to upload it as a loose-hanging file in the server.

scp -i /Users/FF_Workshop_Keypair.cer /Users/AWSCribsRentalMansions.json  ec2-user@ec2-3-82-148-71.compute-1.amazonaws.com:~

If all goes well, you should see a 100% printed below the script you entered.

Now, let's test if the file was uploaded in our server. Switch back to the terminal window where we SSH'ed into the server. If we do an ls from the root directory, we should now see the json file!

Now we will populate the DynamoDB table with our file uploaded to the EC2 instance:

aws dynamodb batch-write-item --request-items file://AWSCribsRentalMansions.json

It will look like this (don't worry that it says "Unprocessed Items" - this is normal ☺️):

Let's check if DynamoDB really did receive all of the files like our command line told us. If it worked successfully, it will look like this:

Nice!! The files are all there!

☁️ Set up website on AWS with AWS Amplify and AWS CodeCommit

We will need 2 specific tools to hold our code and then to push our code to the internet with a link users can access.

AWS Amplify: for delivering the front-end
AWS CodeCommit: hold the code to deploy to Amplify

In our index.html file in the repo (check out my starter repo here from the code provided by AWS), we will need add the Lambda function calling AppConfig into the <script> tag of the index.html file.

We will turn this:

<!-- api call to populate cribs --> -->
<script>
     fetch('lamba-url-here')
     .then(response => response.text())
     .then((data) => {
            document.getElementById("populateCribsHere").innerHTML=data;
            setUI();
  });
</script>

Into this:

<!-- api call to populate cribs --> -->
<script>
        fetch('https://2v35t2ppjx4vh7ygjzip7nauji0yzmxl.lambda-url.us-east-1.on.aws/')
     .then(response => response.text())
     .then((data) => {
            document.getElementById("populateCribsHere").innerHTML=data;
            setUI();
  });
</script>

Remember that Lambda Function URL we got from before? We will put that into the lamba-url-here. We can get that here:

☁️ Use AWS CodeCommit to Host Private Git Repo

AWS CodeCommit is a secure, highly scalable, managed source control service that hosts private Git repositories.

Go to CodeCommit
Click Create a Repository
Name: AWSomeCribRepo
Description: This holds the code of my AWSomeCribRepo project
Click Create

After the repo is created, we need to add our code to this CodeCommit repo. We will see a couple different methods for how to Connect. We will choose the HTTPS (GRC) method.

HTTPS (GRC) is the protocol to use with git-remote-codecommit (GRC). This utility provides a simple method for pushing and pulling code from CodeCommit repositories by extending Git. It is the recommended method for supporting connections made with federated access, identity providers, and temporary credentials.

What we really want to do is pip install git-remote-codecommit to install the git-remote-code-commit framework, BUT, we don't have pip installed yet. We need Python to run pip so let's check if it's installed:

Run python --version — for me, the output is Python 2.7.18 and it should be added since this is an EC2 instance.
To install pip, run sudo yum install python-pip

It should look like this if it's successfully installed:

Now that pip is installed, let’s run the command we wanted to initially: pip install git-remote-codecommit.

It should look like this if all goes well:

Now we want to clone the repository to our EC2 instance with this command: git clone codecommit::us-east-1://AWSomeCribRepo. However, we don’t have git yet in our server, so we’ll install git this way:

Run this command: sudo yum install git

If all goes well, it will look like this:

We will verify the installation went through with: git --version — if it worked, you will see a print out like git version 2.32.0
Now we will finally run: codecommit::us-east-1://AWSomeCribRepo — this will clone the empty repo into our server. When we do ls we see the blue folder in there:

✨ Amazing job! We now have a link to our AWS CodeCommit Repo (in our AWS Environment) and our EC2 server. Especially cool because this is now OUR computer, but a virtual machine.

☁️ How do we upload a folder’s contents locally (our code repo) into a code repo in our EC2 instance using Linux?

Linux can be a bit confusing here but what we essentially will be doing is using a 2nd terminal window to connect to our SSH'ed terminal window, and then use that to connect to AWS. Don't worry... we will get there 😊

We will use scp to upload the file contents WITHIN our local folder and serve that content INTO the folder that is our AWS CodeCommit-connected folder.

We will use scp (secure copy protocol)
We use the -r flag (to recursively go through all the files)
We will input the path of our Keypair
We will then input the path of our folder and because it's the contents WITHIN it, we add the wildcard /* after the folder name
We will then input the EC2 instance with ec2-user and @ and then our EC2's Public IPv4 DNS value.

scp -r -i  /Users/FF_Workshop_Keypair.cer /Users/AWSAppConfigWorkshop/*  ec2-user@ec2-3-82-148-71.compute-1.amazonaws.com:~/AWSomeCribRepo

You can see how the commands work between the 1st and 2nd terminal windows. On the right (connected to our local computer), we serve the files to the server. Then on the left (connected to the EC2 instance), we check to see if the files were in fact uploaded.

⚠️ NOTE: in the screenshot, it says `...amazonaws.com:~/test` but this was taken while I was testing Linux 😊. You will want that part to read `amazonaws.com:~/AWSomeCribRepo` like what is referenced in the above code snippet:

☁️ Now we will push the code to AWS Code Commit

Back in our SSH'ed terminal window, we will want to make sure we are in our AWSomeCribRepo and run the commands to send the repo into AWS CodeCommit:

Run: cd AWSomeCribRepo
Add all the files in the directory to git with git add -A
Create a commit message: git commit -m "commit from EC2"
Push the code to AWS CodeCommit: git push

When you do the git push, you will see output like this:

Enumerating objects: 1847, done.
Counting objects: 100% (1847/1847), done.
Delta compression using up to 2 threads
Compressing objects: 100% (1845/1845), done.
Writing objects: 100% (1847/1847), 3.99 MiB | 4.68 MiB/s, done.
Total 1847 (delta 213), reused 0 (delta 0), pack-reused 0
To codecommit::us-east-1://AWSomeCribRepo
 * [new branch]      master -> master

⚠️ IMPORTANT: If you run into this type of error after `git push`:

fatal: unable to access 'https://git-codecommit.us-east-1.amazonaws.com/v1/repos/AWSomeCribRepo/': The requested URL returned error: 403
Or looks like this in the command line:

It’s probably because your configuration environmental variables aren’t set correctly in the EC2 server.

These are provided to us thanks the AWS EventBridge for the workshop, but you can retrieve these as part of your AWS Account. You need to make sure you are "logged in" or authenticated in the EC2 instance for the push command to know which AWS Account's CodeCommit to push to. Imagine you push your code to a stranger's CodeCommit... (that would be so bad...). This is to make sure we are truly authenticated in the right place to then send our code to the right destination.
AWS_DEFAULT_REGION=us-east-1
AWS_ACCESS_KEY_ID=MSIA...MQ5U
AWS_SECRET_ACCESS_KEY=YI2d...JuZU
AWS_SESSION_TOKEN=IQoJ...wef4
Confirm that aws sts get-caller-identity returns a value like this:
{
    "Account": "354789352487", 
    "UserId": "AROAVFGYX4QT3O2UKAPLI:MasterKey", 
    "Arn": "arn:aws:sts::354789352487:assumed-role/TeamRole/MasterKey"
}
Now when you do the git push, you will see output like this:
Enumerating objects: 1847, done.
Counting objects: 100% (1847/1847), done.
Delta compression using up to 2 threads
Compressing objects: 100% (1845/1845), done.
Writing objects: 100% (1847/1847), 3.99 MiB | 4.68 MiB/s, done.
Total 1847 (delta 213), reused 0 (delta 0), pack-reused 0
To codecommit::us-east-1://AWSomeCribRepo
 * [new branch]      master -> master

Back in the AWS Console, CodeCommit will now go from this:

To this:

✨ You have now created a repository for your website with files uploaded from your computer, to your EC2 instance, and now to AWS. Next, you will connect this repository to AWS Amplify to host your website with a real URL.

🚀 Host your Website on AWS Amplify

One of the best benefits of AWS Amplify when running deployments is the ability to see the various stages of the build process. This becomes very helpful when there are errors or you need to check the validation of a build, the logs include a great amount of detail, and of course you can roll in a vast amount of tools and AWS features thanks to Amplify and it's framework to abstract complexity from deployments.

To accomplish this we will:

Go to the AWS Amplify service in the AWS Console
Go to All apps
Select New App and in the drop-down, select Host web app >
Select AWS CodeCommit and then Continue to advance >
Select AWSomeCribRepoin the CodeCommit dropdown and then Next >
In the Configure build settings make sure to click ✅ Allow AWS Amplify to automatically deploy all files hosted in your project root directory and then press Next.
Now click Save and deploy >

AWS Amplify will then go through it’s 4 stages of deployment automatically for us

Provision
Build
Deploy
Verify

It will go from this:

✨ To this:

When our site is building, it will go from this:

✨ To this:

☁️ Using Feature Flags

If you notice in the deployed version, it doesn't show that carousel feature we created AppConfig for in the first place... where did it go? Wasn't it supposed to appear there?

We haven't turned it on yet 😊

So what we are going to now do is turn on and deploy the carousel Feature Flag to launch this feature. We will then put on an operational toggle to ensure that during spikes in usage, it will limit the number of homes displayed on the homepage. This will help to optimize our performance with fewer queries on our DynamoDB table at peak times.

Go to AppConfig
Select our app AWSomeCribRentals
Click on the Feature Flag we created: CardFeatureFlag (notice that the CardFeature Flag is OFF for the showcarousel Flag as shown below)

Toggle the showcarousel flag ON and then Save new version
Click Start Deployment and configure the elements
Environment: Beta - we set this up earlier
Hosted configuration version: 2
Deployment strategy: FFWorkshop_Deployment
Description: Switching showcarousel feature on gradually for users
Click Start deployment

The deployment (this is technically Deployment #2 because we already deployed earlier on this Feature Flag) will look like this as it builds and gives you data about the deployment like so until its state reaches 100%:

✨ Viola! Check out the updated changes to our app:

Notice the carousel? This is now a feature that users will begin to see in our application:

Here is a video of the deployed AppConfig Feature Flag in action live on the URL:

☁️ Operational Feature Flags

This above is an example of a feature add that we will definitely add to our site and keep. However, let's say we wanted to throttle the number of requests coming back to users when they search for something or want a certain type of data.

Remember our pagination Feature Flag in CardFeatureFlag that we configured earlier? Well, if we want to adjust how many results are returned in the pagination results (i.e. to improve performance when there is a lot of traffic), we can do this by:

Navigate to AppConfig
Click on the CardFeatureFlag that we set up
Select the pagination flag
Click Edit
Change the number in the value to: 6
Click Confirm
Ensure this flag's toggle is turned ON
Click Save new version
Click Start deployment
Keep the same settings as you did in Deployment #2 above, and especially make sure the Deployment Strategy says: FFWorkshop_Deployment
Click Start deployment

✨ When you navigate to your URL, you should now see 6 crib results! This means we can adjust this feature manually from AWS AppConfig without needing to delete or comment out the code and push a new version.

🧹 Clean up Release Flags

If you need to clean up a release flag — for example, let's say the feature add was a big success and there's no reason for you to revert or roll-back the changes — it's important to know what to do.

If you do not need to have a Feature Flag for one of your released features, you can simply delete that short-term flag since it's no longer needed. We already marked the showcarousel as a short-term flag

To delete a flag, we will:

Go to AppConfig
Select our app: AWSomeCribRentals
Click on the Feature Flag: CardFeatureFlag
On the showcarousel Feature Flag, click Delete and re-confirm Delete on the pop-up.
Click Save new version to reflect this change

In a real life situation, we would want to clean up the code to reflect this feature add, but since this was a workshop setting, we did not do that here. For example, in line 39 of the Lambda Function, you would need to make sure that the Crib carousel feature is not conditionally turned on via AppConfig.

🧹 Clean Up Our AWS Resources:

Congrats on making it through! Since you are probably running these services on your own AWS account, it is important to make sure you delete instances of the services so that you do not incur costs:

EC2: terminate/delete the running instance
AWS Lambda: delete the function
DynamoDB: delete the AWSCribsRentalMansions table
Amplify: delete the app we created
CodeCommit: delete the repository we created
AppConfig: delete each Feature Flag, the configuration profile, and in environments, delete Beta, as well as the AWSomeCribRentals application

WOW! That was a lot! Hopefully you enjoyed going through this AWS workshop with me and the steps I took. Let me know what you think below and if you have any questions on any of the AWS tools I used, feel free to let me know what you thought 😊

🧑‍💻 Subscribe to the Tech Stack Playbook for more:

Let me know if you found this post helpful! And if you haven't yet, make sure to check out these free resources below:

Follow my Instagram for more: @BrianHHough
I'm also on Tik Tok too: @BrianHHough
Watch my latest YouTube video for more
Listen to my Podcast on Apple Podcasts and Spotify
Join my FREE Tech Stack Playbook Facebook Group
Join entrepreneurs and developers in the HelpMeDev Discord Server

Let's digitize the world together! 🚀

-- Brian

How to Connect Your Local Project’s Codebase to a GitHub Repository Fast!

Brian H. Hough — Fri, 21 Jan 2022 17:47:09 +0000

GitHub is one of the most powerful tools for developers, whether you are working on your project solo or working amongst members of a team. Git and GitHub adds a version control layer to your code so anyone can see the change history, the edits, and also see various branches of the codebase.

In this episode of the Tech Stack Playbook, we are going to review the process of uploading a local codebase repository from a computer to GitHub from the command line.

This episode is packed with content, so here's a glance at what you'll learn about below, and a series of sections further down in this blog post highlighting the important topics we discussed:

Time stamps:
00:00 GitHub 101
02:15 Set up your code project locally
03:20 Create an empty repository in GitHub
04:47 Initialize your GitHub connection locally
10:28 Review the pushed changes in GitHub
10:53 Set up GitHub Desktop to manage our repository
11:33 Push new changes via GitHub Desktop to GitHub
12:57 Wrap-up and reflection on what we set up with GitHub

👨‍💻 GitHub 101

I like to think of GitHub as the code-version of Google Docs. You can switch back to a previous version of your document, make edits and push those in real time, and also collaborate with others on the same version of the document.

Another major benefit to GitHub is branching, allowing you to have different states of your codebase for different reasons. A common practice for codebases involves 3 core branches: dev, stage, and prod. The dev branches is what you will use to build from and test, debug, and add in new features. The stage branch is for new additions that are ready for review ahead of going to prod - the reason being, you need to thoroughly test the addition to make sure it is ready for users and so you don’t mess with the client-facing build. The prod, or production, version of your codebase is what is running live for your clients or customers or users. This (hopefully) is free of bugs and errors because of the previous two steps to push code to this stage.

However, if you are working on your project solo, you might only need 2 core branches: main, a version for you to build/test your app, and prod, a version in production that is always live.

In today’s tutorial, we are going to review the process of uploading a local codebase repository from a computer to GitHub from the command line. In each of these below steps, I denote which ones are things you do (local) - on your computer, or (web) - on the GitHub website.

👨‍💻 Step 1: Set up your code project folder (local)

For this example, I have created a ReactJS Soundcloud Clone application with the create-react-app framework and implemented the AWS Amplify framework with Cognito identity and access management, DynamoDB NoSQL database storage, S3 object oriented storage for media items, and AppSync to help us manage a GraphQL API. The app allows users to create an account that then allows them to upload songs to the cloud through the app and then play those media files through the built-in player. Stay tuned for a full-tutorial on this build coming soon ☺️

If you do have a local codebase on your computer that you want to push to GitHub, feel free to jump right into Step 2 below.

If you do not have a local codebase on your computer to push to GitHub, you can spin up a practice repo with either a React.js or NEXT.js template below to get started:

For React, run:

npx create-react-app techstackplaybookpracticerepo

For Next, run:

npx create-next-app --example with-tailwindcss techstackplaybookpracticerepo

Once you have a folder for your app created with one of these frameworks, move onto Step 2 below.

👨‍💻 Step 2: Create an empty repository in GitHub (web)

When you go to https://github.com, at the top right, when you click on your profile avatar, there is a drop-down of menu items.

Click on the drop-down item that says “Your Repositories” which will bring you to a page that lists out all of the repositories in your GitHub account. There will be a green button that says “New” - make sure to click that to pull up the create repository flow.

There will be a number of options to select, but here’s a quick guide:

Repository template: (keep default option)
Repository name: TechStackPlaybookPracticeRepo
Description: (optional)
Public/Private: Public
Initialize this repository with: (keep these options unchecked)

When you are ready, click “Create repository” to finalize the setup of an empty repository in GitHub.

When the empty repository page loads, the link will look something like this: https://github.com/YourGitHubHandle/TechStackPlaybookPracticeRepo

You will notice on this page, there is a URL that will be to the right of the HTTPS button. It will look like this: https://github.com/YourGitHubHandle/TechStackPlaybookPracticeRepo.git. You will want to copy this URL down as we will need it in Step 3 later on.

👨‍💻 Step 3: Initialize your GitHub connection (local)

From the root of your project folder (the outermost folder that wraps everything, for me this is called soundcloud which contains my /amplify folder, /public folder, /src folder, etc.), make sure that your terminal window is set at this level.

You will initialize an empty git repository with a branch called main with the following:

git init -b main

This will create a hidden folder called .git which will actually save and store all of our version control changes. It’s almost like a cookie that connects our local repository to the GitHub version.

Next, we add our locally created files to this .git file with the following:

git add .

We then want to commit these files we’ve added onto main to our specific repository that we are initializing for GitHub with:

git commit -m “First Commit to GitHub”

This will probably add a lot of files listed out. Make sure that .gitignore is included in this list of added files and includes node_modules so that you don’t upload a gazillion node_modules files to GitHub ☺️

In the github.com page with the URL that we copied down in Step 2, we will now use this to send our github files to this URL endpoint:

make sure to change YourGitHubHandle to your actual account:
make sure to change TechStackPlaybookPracticeRepo to the name of your actual repo you created on GitHub

git remote add origin https://github.com/YourGitHubHandle/TechStackPlaybookPracticeRepo.git

What this is effectively doing is telling git that, from the remote local version of our repository, we are going to add all of those files to the origin of this empty GitHub repository link online on the web.

We will now set the new remote with this:

git remote -v

You will then see that there are 2 lines printed in the terminal, one that ends with (fetch) and one that ends with (push). We are calling this GitHub repository and pushing our code locally from the remote to GitHub in the cloud.

Now that we’ve initialized the connection, we will push our code locally to the origin main which we’ve set as the destination in GitHub:

git push -u origin main

This will enumerate all the objects we want to push, it will then get compressed into threads to push them and will push to this GitHub link which is the one we want for this repository and the branch is set as one called main and sets it to track it from origin.

👨‍💻 Step 4: Review the pushed changes in GitHub (web)

On our GitHub repository page (https://github.com/YourGitHubHandle/TechStackPlaybookPracticeRepo), what was once empty, upon refreshing the page, should now show our codebase that we had locally on our computer now on this web page.

What we have done is create a synced pair between our local repository (remote) and our GitHub repository (origin). However, this is just for our most recent changes on our local repository. What if we want to create ongoing pushes to our GitHub repository and do regular pushes as a backup to GitHub? We will review this with a tool called GitHub Desktop in the next step below.

👨‍💻 Step 5: Set up GitHub Desktop to manage our repository (local)

GitHub Desktop, a Microsoft-created GitHub manager, is a GUI (graphical user interface) client/platform that creates an easy and efficient way to manage our GitHub repository right from our computer without needing to worry about typing the right command line scripts and sequences in the terminal.

While it is very important to understand what is happening behind the scenes at the terminal level, for us to move fast, we need tools and ways to expedite and automate our work flow processes. When you are typing in the terminal, spelling errors and human error can cause us to make mistakes, errors, or lose precious time. GitHub Desktop helps developers move faster with their repositories and has been an amazing tool in my workflow.

As a side note, there are other GUIs for Git and SCM (source control management) tooling, such as Kraken which is optimized for Azure DevOps, as well as GitLab.

We will need to create a new repository in our GitHub Desktop client because while the repository is synced with github.com, our GitHub Desktop client wouldn’t have been updated to track this repository yet until we allow it.

In the “Add” drop-down on the button to the right of the text field in the GitHub Desktop client, you will select the drop-down option: Add Local Repository

When we have the option to “Choose” a folder, we will want to select the outermost folder container for our project. For you, this might look like: /user/Documents/GitHub/TechStackPlaybookPracticeRepo

Once the outermost folder is selected, we will click Add Repository

This will now connect to our hidden .git file and anytime we make changes and save them in our code editor, GitHub Desktop will show those changes reflected in the GUI.

👨‍💻 Step 6: Push new changes via GitHub Desktop to GitHub (local)

In GitHub Desktop, we should see 1 or more file changes reflected in the list of “changed files” on the left half of the app. In this video, I updated the README.md file, so that is why it has a check-mark next to README.md and the app says 1 changed file at the top.

In the bottom right, we will give our commit a name, which can be anything you wish. I said: Updated Readme for YouTube!. You can also write a description if you want, but it is optional.

At the top, you will see I have the current branch set to main, as I only have 1 branch created for this video.

When everything looks good, you will click the blue bottom at the bottom left that says “Commit to main`

The bottom right button should now say Push origin, and once you select this, it will send those updated changes committed to our local remote branch to the main GitHub branch on the web.

👨‍💻 Step 7: Review the pushed changes in GitHub (web)

On our GitHub repository page (https://github.com/YourGitHubHandle/TechStackPlaybookPracticeRepo), upon refreshing the page, you should see your changes reflected in the online version of the codebase, matching your changes locally as well.

In this example, the README.md file reflects the change and in the file/folder list, you will see that all the folders/files have the commit message First Commit to GitHub from Local except for one, which is that README.md file. It has a message that reads the same message we put into GitHub desktop: Update Readme for YouTube!

...

Check out the full recording below:

Let me know if you found this post helpful! And if you haven't yet, make sure to check out these free resources below:

Follow my Instagram for more: @BrianHHough
I'm also on Tik Tok too: @BrianHHough
Watch my latest YouTube video for more
Listen to my Podcast on Apple Podcasts and Spotify
Join my FREE Tech Stack Playbook Facebook Group
Join entrepreneurs and developers in the HelpMeDev Discord Server

Let's digitize the world together! 🚀

-- Brian

AWS Just Announced that the Future is Serverless at re:Invent — Day 3

Brian H. Hough — Wed, 01 Dec 2021 19:10:27 +0000

We just wrapped up Day 3 of Amazon Web Services (AWS) re:Invent and there were a ton of announcements! AWS CEO Adam Selipsky delivered the opening keynote and announced a number of exciting updates and announcements, including Amazon Private 5G (imagine building your own 5G network - how cool is that?!)...Amazon SageMaker Canvas for low-code machine learning in the cloud...and a great analysis of what a modern data strategy looks like.

Additionally, I share insights from AWS' David Yanacek about how he builds operational excellence for his teams in an agile way for developers and DevOps engineers at Amazon. Finally, I go through a theme park app I built at one of the workshops 😊

In this blog post and the blog posts to come this week, my hope is to vlog through the entire week and share all that I'm learning and building with you all so whether you are attending virtually or in person, this AWS re:Invent series on the Tech Stack Playbook will help you gain skills, level up in tech, and boost your software engineering abilities from the sessions I'm attending throughout the conference.

Here’s a glance at what you’ll learn in this blog post:
👉 What AWS re:Invent is all about
👉 Traveling to Las Vegas for the year's largest tech conference
👉 What I'll be learning about and building this week

It's going to be a major week for cloud and tech in general, so I am so excited to bring you along for the ride.

What do you want to know about AWS, serverless, and DevOps? 💭

Let me know in the comments below! ⬇️

Check out the full recording below:

Let me know if you found this post helpful! And if you haven't yet, make sure to check out these free resources below:

Follow my Instagram for more: @BrianHHough
Watch my latest YouTube video for more
Listen to my Podcast on Apple Podcasts and Spotify
Join my FREE Tech Stack Playbook Facebook Group

Let's digitize the world together! 🚀

-- Brian

I built an AI-Powered Image Processor at AWS re:Invent 😱 - Day 2

Brian H. Hough — Tue, 30 Nov 2021 20:16:53 +0000

Just wrapped up Day 2 of Amazon Web Services (AWS) re:Invent and from the Midnight Madness concert, to building an AI-Powered Image Processor during Talia Nassi's workshop, to catching up with the amazing Adrienne Tacke from MongoDB....there is a TON going on Vegas!

Also, I built an AI-Powered image processing application that can take images and analyze certain features about the uploaded images…so that was pretty cool 😱

It's going to be a major week for cloud and tech in general, so I am so excited to bring you along for the ride.

What do you want to know about AWS, serverless, and DevOps? 💭

Let me know in the comments below! ⬇️

Check out the full recording below:

Let me know if you found this post helpful! And if you haven't yet, make sure to check out these free resources below:

Follow my Instagram for more: @BrianHHough
Watch my latest YouTube video for more
Listen to my Podcast on Apple Podcasts and Spotify
Join my FREE Tech Stack Playbook Facebook Group

Let's digitize the world together! 🚀

-- Brian

Join me at AWS re:Invent - Level Up as a Developer and Software Engineer with me - DAY 1

Brian H. Hough — Mon, 29 Nov 2021 17:43:12 +0000

I have an exciting announcement friends!! I just touched down in Las Vegas for day 1 of AWS' re:Invent 2021 conference 🌄 and I cannot wait to share this week's exciting updates, announcements, learnings, and opportunities to level up in cloud computing, serverless, and DevOps with you all.

In this episode of the Tech Stack Playbook, I'll be sharing more about AWS re:Invent - the year's largest global tech conference that brings together leaders, builders, innovators, and creators from cloud, DevOps, serverless, app development, and software engineering from all around the world. I was so fortunate to win an All Builders Grant to attend this year's event, so thank you SO much AWS for this incredible opportunity. 🎉

It's going to be a major week for cloud and tech in general, so I am so excited to bring you along for the ride.

What do you want to know about AWS, serverless, and DevOps? 💭

Let me know in the comments below! ⬇️

Check out the full recording below:

Let me know if you found this post helpful! And if you haven't yet, make sure to check out these free resources below:

Follow my Instagram for more: @BrianHHough
Watch my latest YouTube video for more
Listen to my Podcast on Apple Podcasts and Spotify
Join my FREE Tech Stack Playbook Facebook Group

Let's digitize the world together! 🚀

-- Brian

Learn How to Code, Get Started in Tech, and Enter the Matrix — Welcome to the Tech Stack Playbook

Brian H. Hough — Wed, 22 Sep 2021 05:02:52 +0000

Welcome to the Tech Stack Playbook — your guide to apps, software, and tech (but in a fun way I promise!)

I’m especially excited to kick off this first episode because this channel is inspired by so many of the other innovative content creators, programmers, and entrepreneurs I have watched over the past couple of years. Other creators, experts, educators, professors, entrepreneurs, and builders are the reasons why I got started in tech, and my goal is to use this channel to inspire, to motivate, to educate, and to share the vast world of technology, while providing a window into this exciting space.

GAIN ACCESS to the full show notes for this episode and access to more biz tech, branding, full stack development, and digital transformation insights from Brian H. Hough here: https://brianhhough.com/techstackplaybook

Here’s a glance at what you’ll learn in this episode:
00:00 Welcome to the Tech Stack Playbook — your guide to apps, software, and tech
00:23 My motivation for starting this channel
00:58 How I got started in tech
02:20 When I started learning how to code
03:56 Why there isn’t a better time to get started in tech
06:41 Future ideas on the growth of the channel
08:11 How you can get involved in The Tech Stack Playbook
10:48 The opportunity for content creation in a digital age
11:36 Let’s digitize the world with the Tech Stack Playbook 🚀

If you are interested in being a part of The Tech Stack Playbook, collaborating, or contributing to the growth of this channel, let’s connect:

📲 Let’s connect on the ‘Gram: https://instagram.com/brianhhough
🤝 Let’s connect on LinkedIn: https://linkedin.com/in/brianhhough
💻 Join my FREE Tech/Coding Facebook Group: https://www.facebook.com/groups/techstackplaybook
🌟 Check out my other episodes: https://www.brianhhough.com/techstackplaybook

👇👇👇 MY AFFILIATE DISCOUNT CODES TO LEARN HOW TO CODE:

🌴 Team Treehouse — get a FREE MONTH with my referral code: http://referrals.trhou.se/brianhough2
👨‍💻 Codecademy — get a FREE MONTH of a Pro membership with my referral code: http://ssqt.co/mQgVi7z

Check out the full recording below:

Let me know if you found this post helpful! And if you haven't yet, make sure to check out these free resources below:

Follow my Instagram for more: @BrianHHough
Watch my latest YouTube video for more
Listen to my Podcast on Apple Podcasts and Spotify
Join my free Facebook Group
Join my new Discord Server

How to Level Up as a Software Engineer | AWS Community Builders Program

Brian H. Hough — Tue, 31 Aug 2021 18:14:28 +0000

Wondering what you can do to level up as a software engineer, developer or programmer this year? 👨‍💻💭

In this episode of the Tech Stack Playbook, I'm diving into the program that has single-handedly helped me the most in my tech career thus far: the AWS Community Builders Program. Today's episode focuses on AWS, the community, the core benefits of the program, and how it has helped me level up as a software engineer and developer this year.

📝 Quick plug: Applications close on August 30, 2021, so please reach out if you have any questions about the program and be sure to apply by the deadline here: https://amazonmr.au1.qualtrics.com/jfe/form/SV_dajuY7uPsH3NSTk

Here’s a glance at what you’ll learn in this episode:

Time stamps:
00:00 How the AWS Community Builders Program has helped me level up
00:43 Benefit #1: Being a Part of a Vibrant Community
03:35 Benefit #2: Being Surrounded by Constant Education and Learning
05:06 Benefit #3: An Immense Amount of Resources and Tools
06:23 Benefit #4: Get Connected to Conferences, Events, and Workshops
07:00 Why constant learning is key & how community/mentors can help
09:35 Reflecting on the past year of growth and development in software engineering

👨‍💻 What are the Benefits of the AWS Community Builder's Program for Developers?

The benefits of the AWS Community Builders program knows no bounds because it’s a truly priceless program. In the beginning, you will get a welcome kit which has some amazing AWS swag like hats, water bottles, desktop accessories, $500 of AWS credits, and way more goodies and benefits. But, there are several core aspects of the program that can be so instrumental to fellow programmers, developers, and people in tech. From exclusive webinars and events, to a global Slack channel of developers, programmers, software engineers, developer advocates, CTOs, executives, and everyone in between, there is so much value packed into this program for all involved.

So what are the key highlights from this program? I'll walk through for key benefits of the program and explain why this program has been so valuable to me.

👨‍💻 BENEFIT #1: Being a Part of a Vibrant Community

When you are starting out in your developer journey, whether at the executive or technical levels, whether you are a freelancer or employed by a software company, you always need to think about your community.

Who are the people you surround yourself? Who do you turn to and talk to when you have questions or comments about tech, your job, your career etc.?

During the COVID-19 pandemic and even beforehand, I was constantly thinking about how I can build my network of friends, colleagues, mentors, and guides in technology. As a self-taught programmer, I have done bootcamps and courses and programs, but I don’t have a degree in computer science, so I needed to surround myself with people who went down similar paths and different paths to learn what set them up for success.

And joining a highly-engaged and inspiring community of software engineers and developers from around the world building on the same tools and frameworks is one of the best ways to accomplish this. It all goes back to joining a community. The AWS Community Builders program is full of some of the most selfless, smart, caring, and supportive people I have ever met. People who go out of their way to answer questions, help people when they have questions, and work on helping the rest of the community level up as well. AWS leaders, AWS Heroes, experts in tech, and senior leaders of the industry are all a part of this program along with early career and young software engineers like me. The community is so rich with so many different types of technology people, all sharing a passion for serverless frameworks, cloud-based software, and of course, AWS!

If you are looking for a highly engaged and active family of developers and programmers who constantly will push you to be better, smarter, faster, and stronger than you were the day before, look no further than the AWS Community Builders Program, especially to be around people who inspire you to constantly level up.

👨‍💻 BENEFIT #2: Being Surrounded by Constant Education and Learning

How are you constantly thinking about how you will level up as a developer or programmer? Are you learning new things or just doing the same-old-same-old.

The AWS staff puts on incredible exclusive events, workshops, talks, and meetings on cutting-edge serverless tools like SageMaker and Hugging Face for artificial intelligence and machine learning (AI & ML), database best practices like DynamoDB or Neptune, messaging services like SNS and SES and PinPoint, as well as networking and compute services like EC2, VPC, etc.

There is so much high level content that exists on the Internet, and it can leave you wondering…so how does this tech actually work? If I wanted to actually use these tools, what do I need to do? Well thanks to the these exclusive events and workshops, you get to have leading technology experts, AWS staff, and tech visionaries walk you through implementation, code, walkthroughs, and more. You get architecture diagrams, roadmaps, how-to-guides, and a plethora of resources.

👨‍💻 BENEFIT #3: An Immense Amount of Resources and Tools

The third biggest benefit that I think makes the AWS Community Builders Program so valuable is the resources and tools Community Builders have at their disposal. I’ve benefited a lot from having a subscription to Cloud Academy and having access to classes and guides and lessons.

By going through classes and education online, on-demand, and on the topics you are most curious on, this makes it so easy to get the skills you need for your job, for your passion project, and for your company. Online education is only going to increase in importance and value in the months and years to come, and especially during these remote months, being able to attend virtual classes and webinars right from your computer makes it that much easier to upskill and level up.

👨‍💻 BENEFIT #4: Get Connected to Conferences, Events, and Workshops

The fourth largest benefit has to be the connection to conferences, events, and workshops. Being able to jump into a conference session or be invited to a Brown Bag lunch workshop on a certain AWS or serverless tool….and also be invited to speak at events like this…has such an immense amount of value for anyone looking to get more presentation and conference experience under their belt.

As a young professional, opportunities like this can be difficult to come by, so having people that can put you in touch with event organizers and leaders can make all the difference for sharing the insights you’re learning on the job, in your side projects, or generally sharing insights based on what you are working on.

One of the opportunities I was able to earn was giving a 2 hour master class on the 9 AWS Serverless Databases all Programmers and Software Engineers Should Know. Additionally, this upcoming Saturday, my talk on AWS Serverless Databases was accepted for Data Saturday Oslo, which I am super excited about.

Not only do you get amazing experience by presenting technology to global audiences, but you also get to inspire and empower other developers to learn new tools, solutions, strategies, and methodologies. By bringing people into the fold of cutting-edge technology, you never know who you might empower in the “virtual stands.” Or in the audience, there might be someone who goes on to implement what you talked about or builds a solution that has a large impact on the world. The possibilities are truly limitless and you never know what your talk might do to impact people and get people started in their serverless, full-stack, and AWS journeys.

👨‍💻 How to Become an AWS Community Builder?

If this interests you and you want join this incredible program and community, I highly recommend that you apply! The deadline is August 30th, so make sure to apply via the application link here: https://amazonmr.au1.qualtrics.com/jfe/form/SV_dajuY7uPsH3NSTk

If you have any questions about the application process, please reach out over social media or drop a comment below and I will respond!

Check out the full recording below:

Let me know if you found this post helpful! And if you haven't yet, make sure to check out these free resources below:

Follow my Instagram for more: @BrianHHough
Watch my latest YouTube video for more
Listen to my Podcast on Apple Podcasts and Spotify
Join my FREE Tech Stack Playbook Facebook Group

Let's digitize the world together! 🚀

-- Brian

DEV Community: Brian H. Hough

Thankful for the AWS Community Builders Program & Building

Step 1: Go to Amazon Step Functions in the console

Step 2: Pick a template or start from scratch

Step 3: Setup your Step Function workspace for success

Step 4: Write your Step Function Logic

Step 5: Create a Lambda Function

Step 6: Light it up! 🎄

What Step Functions have to do with the AWS Community Builders Program

Stacking Serverless Data Structures for a Pomodoro App on AWS

BuiltWithAmplify #BuiltWithAppSync

YouTube Video + Demo:

Application page:

Step 1: Quick Design Mockup (aka map it out)

Step 2: Architect the Tech Stack

📲 Front-End:

⚙️ Back-End:

Step 3: Figuring out numeric sort querying using GraphQL of NoSQL DynamoDB data

The solution:

Step 4: Stacking/Re-Stacking the Pomodoro Data Structure

Step 5: Hard-Typing with GraphQL and TypeScript

Type Guards

Step 6: Shipping Your Project Live

Subscribe to the Tech Stack Playbook on YouTube:

Wrangling GraphQL Data Schemas with AWS AppSync

What to Do When Your GraphQL Queries & Mutations Won't Auto-Build with AWS AppSync

What is the AWS Amplify Framework?

⚠️ Issue: The GraphQL Mutations and Queries aren't building in your app's root folder.

⚠️ There was no graphqlconfig.yml file in the root folder of the project

🛠 Testing

Subscribe to the Tech Stack Playbook on YouTube:

Why you should be learning cloud in 2023 | AWS Community Builders Program

Check out the full recording below:

AWS Amplify CLI Installation Guide (M1/M2 2022 Mac Edition)

💭 What is the AWS Amplify Framework?

⚠️ 2022 Update on Installing the AWS Amplify CLI

Installation Guide

🧑‍💻 Step 1: Installing Node.js and npm

🧑‍💻 Step 2: Set up an AWS Account

🧑‍💻 Step 3: Installing the Amplify CLI

🧑‍💻 Step 3.5: If you receive Error: EACCES: permission denied errors after running the above.

🧑‍💻 Subscribe to the Tech Stack Playbook for more:

Learn how to Dynamically Add App Features with AWS AppConfig Feature Flags (+ Linux 101)

BrianHHough / AWSAppConfigWorkshop

Exploration of the AWS AppConfig service for dynamic feature changes to a web application. The workshop uses AWS AppSync, AWS Amplify, AWS EC2, DynamoDB. The app's tech stack is: HTML, CSS, JavaScript.

AWS AppConfig Workshop Repo

There are 2 branches:

Follow along to the following blog post for steps on how to proceed:

☁️ Building for Scale (in the Cloud)

Check out the interview here:

Imperfect is perfect, w/Facebook's Mark Zuckerberg

☁️ Intro to AWS AppConfig

☁️ Where does AWS AppConfig fit?

☁️ Set up a Feature Flag

☁️ Update the Photo Pagination for the Feature Flag

☁️ Deploy the Feature Flag

☁️ Configure AWS Lambda

⚠️ Warning

☁️ Set up the AWS Lambda Function URL

☁️ Create and Populate a DynamoDB Table using an EC2 Instance (VM)

☁️ Create the DynamoDB Table from within an EC2 Server Using Linux

☁️ Next, you have to make sure the right AWS account is active for the session in the command line

☁️ Now we populate the DynamoDB Table to hold image links and home information

☁️ Set up website on AWS with AWS Amplify and AWS CodeCommit

☁️ Use AWS CodeCommit to Host Private Git Repo

☁️ How do we upload a folder’s contents locally (our code repo) into a code repo in our EC2 instance using Linux?

⚠️ NOTE: in the screenshot, it says ...amazonaws.com:~/test but this was taken while I was testing Linux 😊. You will want that part to read amazonaws.com:~/AWSomeCribRepo like what is referenced in the above code snippet:

☁️ Now we will push the code to AWS Code Commit

⚠️ IMPORTANT: If you run into this type of error after git push:

🚀 Host your Website on AWS Amplify

☁️ Using Feature Flags

✨ Viola! Check out the updated changes to our app:

☁️ Operational Feature Flags

🧹 Clean up Release Flags

🧹 Clean Up Our AWS Resources:

🧑‍💻 Subscribe to the Tech Stack Playbook for more:

How to Connect Your Local Project’s Codebase to a GitHub Repository Fast!

👨‍💻 GitHub 101

👨‍💻 Step 1: Set up your code project folder (local)

👨‍💻 Step 2: Create an empty repository in GitHub (web)

⚠️ There was no `graphqlconfig.yml` file in the root folder of the project

🧑‍💻 Step 3.5: If you receive `Error: EACCES: permission denied` errors after running the above.

⚠️ NOTE: in the screenshot, it says `...amazonaws.com:~/test` but this was taken while I was testing Linux 😊. You will want that part to read `amazonaws.com:~/AWSomeCribRepo` like what is referenced in the above code snippet:

⚠️ IMPORTANT: If you run into this type of error after `git push`: