DEV Community: starpebble

Google Search Dark Theme

starpebble — Sat, 03 Jul 2021 23:16:31 +0000

Here is a nice way to save energy - search in the dark theme. Google's search service has a fantastic setting - Dark theme. Turn it on. It's fun.

Steps:

Visit Google
Search for 'Dark Mode'
Click the settings icon on the right
Toggle 'Dark theme' to On

Climate change is no hoax. Maybe you are searching for ways to save energy. Saving energy is a simple way to stand up for cleaner computing. Dark mode is showing up all over the web. It's a popular one. Please leave a comment if you have other nice suggestions to reduce the amount of energy used by a computer. I thank you.

What Matters in a Conditional Cloud

starpebble — Wed, 03 Feb 2021 17:11:27 +0000

The cloud is becoming even more conditional. We know the cloud is programmable. This is exactly why it is very flexible. The conditional cloud is a hot topic because it is showing up in more than one way. Here are exactly two examples of the conditional cloud:

Conditional Access - Machine Learning

A single mobile user accesses three private applications over the Internet. The three applications are hosted in a private data center with an excellent source of carbon-free energy. Azure AD conditionally grants access each time the user accesses any of the mobile applications. For example, Azure's machine learning considers the user, location, device, and real-time risks. Conditionally, the user may just get the web page. Or, conditionally, the user may be asked to authenticate a second time, like a re-certification. The decision is up to the cloud. learn more here

Conditional Access - Rules Based

A single developer has a closed serverless application limited to an exact number of accounts. Each exact account number is listed in the S3 Bucket resource policy. It is a stated condition. The AWS Serverless Repository grants a user access to the application only when the user's deployment passes the condition where the SourceAccount number is in the list. learn more here

What matters is up to you

Don't forget time-based conditional access. Sometimes temporary access is a stated condition. Like for a hotfix that comes up in an emergency. One person may just need a few hours of access to a single exact machine in the cloud. To keep it safe, a person can write one Common Expression Language statement in a Google Policy restricting access by the request time. The condition is the time. learn more here

Identity Matters

Conditions look fine-grained. The conditions consider identity. Nobody wants to look over a user's shoulders. Please let me emphasize the conditional cloud is intended to make the cloud safer. How the cloud exactly does this for us, either machine learning or rules-based, is a hot topic. Any comments?

Authenticating APIs with Cognito

starpebble — Mon, 24 Aug 2020 15:46:20 +0000

The world is changing fast. It feels like the whole world is shifting towards standards like GraphQL. API Gateway isn't the only way to host an API. I have a feeling that AppSync is rising as a possible serverless API host. Is there a future proof way of authenticating today?

Authentication Methods

Let's quickly list the possible authentication types.

JSON Web Token (JWT)
OAuth 2.0
OpenID (OIDC)
API Gateway API Key
AWS Lambda Authorizer
Identity and Access Management (IAM)
Cognito User Pool

This list answers a question like "How does a particular API authenticate a user?"

Serverless API Types

Let's also list the types of serverless APIs. The popular pattern of API Gateway REST + Lambda isn't the only way anymore. There's a shift.

AppSync
API Gateway HTTP
API Gateway REST

This list answers a question like "What serverless API host serves a particular API on the Internet?"

Future Proof

There's uncertainty in what users may demand. So there is implied uncertainty in how to offer services to users. The serverless wagon hasn't fallen off the trail just yet. There is momentum in the resource sharing model that a serverless model offers. Is there a future proof approach?

I like any approach that is flexible. AWS Cognito is a point of leverage for flexibility. Here's why I believe Cognito can help future proof. Cognito can generate JWT tokens - API Gateway accepts them. Cognito can generate OpenID OIDC tokens - AppSync accepts them.

Nifty Approaches

Let's not forget to discuss some of the nifty new things. Consider the passwordless login. Now I'm not thinking about biometrics. I'm simply referring to logging in without a password. Here's the approach: the user asks for a temporary login to be sent to something the user has. Like an exact email address. Or a specific phone number. The user authenticates with the temporary login. This is really nifty! It's also an example of shift that wasn't predictable. Which is why a flexible approach to authentication has many benefits, one of which is simplifying adaption to future users.

Simplify a Lambda dependency with a Lambda Layer

starpebble — Mon, 17 Aug 2020 22:07:56 +0000

Faster code deployments are better. A Lambda layer can reduce the time to deploy a Lambda function. A Lambda layer is simply a support layer to store code. Here's how the layer speeds a deployment up, code in a Lambda layer may be excluded from the Lambda zip file. It's that easy. Smaller Lambda zip files are the pathway to Lambda rock stardom! 🤩

Quick Start

Let's example how to quickly create a Lambda for the Python 3.7 runtime engine.

Create a requirements.txt file listing one or more Python package dependencies
Download the dependencies to a local disk with pip install
Archive the dependencies into a single zip file
Create a single Lambda layer in the AWS Console, uploading the zip file artifact to the console
Add the single Lambda layer in the AWS console to list of layers for the Lambda function

Tips

The Lambda community is simplifying local install of tools like 'pip' or 'aws cli'. It's a long time in the making. No longer must we install tools. Docker containers with tools are available. Here are two containers to consider for this quick start. The containers are optional. The containers simply save time. It's up to you.

LambCI

LambCI is on a mission to improve serverless computing integration. The docker container lambci/lambda:build-python3.7 has a perfect installation of pip. Run step two with pip from this container.

Here is some community code to do it:

Example:

#!/bin/bash
export LIB_DIR="python"
rm -rf ${LIB_DIR} && mkdir -p ${LIB_DIR}
docker run --rm -v $(pwd):/foo -w /foo lambci/lambda:build-python3.7 \
    pip install -r requirements.txt -t ${LIB_DIR}

AWS CLI

The aws cli v2 is in a docker container. No need to repeat the install instructions, please simply read them here at Using the official AWS CLI version 2 Docker image. The cli is faster than the console.
It's simply a preference.

Here's another community code example:

Example:

docker run --rm -it -v ~/.aws:/root/.aws -v $(pwd):/aws amazon/aws-cli s3 cp s3://aws-cli-docker-demo/hello .

Async/Await with Nodejs File System

starpebble — Sun, 07 Jun 2020 00:50:47 +0000

It's still not possible to simply use memory for all our computing. A single S3 object can grow up to 5TBs from a humble 1 byte.

fs Promises API

Please let me show you how to simply read a tiny file in /tmp named data.json.

async function f() {
  const fsPromises = require('fs').promises;
  const data = await fsPromises.readFile('/tmp/data.json')
                     .catch((err) => console.error('Failed to read file', err));

  return JSON.parse(data.toString());
}

The require isn't exactly like Webpack's code splitting with dynamic imports. I promise it's static. It just kind of looks similar.

readFile() returns a promise to await upon in an async function. The single fulfilled promise provides one Node.js Buffer. This is a limitation. The Buffer must fit into the lambda's memory limit. Keep a lambda safe and read small, in KBs.

thenable

f() is thenable. Try and figure out error handling yourself. This is just an example.

f()
 .then((d) => console.log(d))
 .catch((err) => console.error('f() failed', err));

readFile() is pretty simple.

File System (fs)

A lambda can possibly write a file to a file system. Our use of a file system space is safe.

The Node.js File System Promises API is very nice. It's an extremely common module. fs has an asynchronous API compatible with await. It's somewhat exciting that Node.js is compatible with cloud bursting. fs knows how to read and write.

Keep bursting! This is a sign I am comfortable holding up.

How to explain in GraphQL-esque

starpebble — Sun, 24 May 2020 17:49:05 +0000

Explaining in GraphQL is easy. Write single line comments with #. Offer more verbosity in multi-line descriptions with bracketing """.

Single Line Comment

Start exactly with # to comment a simple single line.

# A snack may or may not be delicious.
type Snack {
  name: String!,
  delicious: Boolean!
}

Perfectly safe in a GraphQL schema.

Multi-Line Description

Bracket a multi-line comment with """. GraphQL schema tools are smart. Multi-line descriptions are useful to tools like Graphiql.

"""
A shirt.
It is a really simple type.
"""
type Shirt {
"""
The size of the shirt, like small or medium.
The value depends on the language of the user.
"""
  size: String!,
  threads: Int!,
  thickness: Float!
}

Also safe in a GraphQL schema.

Query Comment

A single line comment is safe in a query. A multi-line description is not.

{
  snack {
    # this comment is safe
    name
  }
}

Possible in a GraphQL query.

Lack of comments is like a pandemic

GraphQL is for people. I don't disagree with code clarity as documentation. Sometimes people who have nothing to do with code may read a GraphQL text block. It's shocking. Let's not forget that comments are fundamentally for our hyper connected readers. I don't know if there is a better way.

Generating a QR code with React hooks and JavaScript

starpebble — Mon, 04 May 2020 16:39:12 +0000

A single react function component can place an image like a QR code in a HTML5 canvas tag.

Screenshot

QRCode function component example

Here's how to do this without Kubernetes. This example is just JavaScript.

Example JavaScript:

const QRCode = ({text, size}) => {
  const canvas = useRef(null);
  useEffect(() => {
    if (canvas != null && canvas.current != null) {
      let qr = new QRious({
        element: canvas.current,
          value: text,
          size: size
      });
    }
  });
  return(<canvas ref={canvas}></canvas>);
}

Props

QRCode is a function component. QRCode accepts two props.

text
size

The generated QR code image encodes the text. Size controls the image size.

React hooks in this function component

The function component uses exactly two hooks:

useRef
useEffect

useRef() is an essential react hook. It's almost impossible for a React function component to draw on an HTML5 <canvas> without this hook.

useEffect() helps the function component by listening to React component lifecycle events.

Dependencies

Include the cdn hosted versions as <script/> tags:

unpkg is reliable. I love it. cdnjs is unstoppable! I love it too. Thanks Cloudflare!

Example

A single html file example.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>QRCode with React Hooks and JS</title>
    <meta charset="utf-8" />
    <meta name="description" content="QRCode with React Hooks and JS.">
    <meta name="keywords" content="JavaScript, React">    
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
    <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/qrious@latest/dist/qrious.min.js"></script> 
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

// React Hooks
const {
  useRef,
  useEffect
} = React;

// QRCode
//
// Function component, creates one QR code image    
const QRCode = ({text, size}) => {
  const canvas = useRef(null);
  useEffect(() => {
    if (canvas != null && canvas.current != null) {
      let qr = new QRious({
        element: canvas.current,
          value: text,
          size: size
      });
    }
  });
  return(<canvas ref={canvas}></canvas>);
}

// App
//
const App = () => {
  const text = "https://dev.to";
  return(<div align="center">
  <h1>One QRCode</h1>
  <QRCode text={text} size="100"/>
  <p>{text}</p>     
  </div>);
}

ReactDOM.render(
  <App />,
  document.querySelector('#root'),
);
    </script>
  </body>
</html>

Just one way

There are dozens of ways to generate a single QR code image. I'm writing down a list. Please feel free to share the best libraries as a comment.

Integrating a REST API into an Amplify app's GraphQL model

starpebble — Thu, 09 Apr 2020 03:28:33 +0000

Consolidate a REST API call into a GraphQL model with an AppSync HTTP resolver. Here are some instructions. Don't forget to read the summary no less than five times.

Weather Example

What is the weather in Anchorage, Alaska? Let's ask OpenWeatherMap.org in a new way with GraphQL.

# schema.graphql
type Weather {
  zipCode: String!
  temperature: String
}

type Query {
  # getWeatherByZipCode is resolved by https://api.openweathermap.org/data/2.5/weather
  getWeatherByZipCode(zipCode: String!) : Weather
}

# example graphql client query
query GetWeather {
  getWeatherByZipCode(zipCode: "99504") {
    zipCode
    temperature
  }
}

{
  "data": {
    "getWeatherByZipCode": {
      "zipCode": "99504",
      "temperature": "274.48"
    }
  }
}

It's cold in Anchorage, Alaska. OpenWeatherMap.org reports the temperature in Kelvin. 274.48 K degrees is chilly.

Instructions

Let's simply add exactly one AppSync HTTP resolver to an Amplify app.

Add one GraphQL API with amplify add api and name it however you like
Add one query getWeatherByZipCode and one type Weather
Add one request VTL for the resolver
Add one response VTL for the resolver
Add one CloudFormation AWS::AppSync::DataSource resource
Add one CloudFormation AWS::AppSync::Resolver resource
Push to the cloud with amplify push

1. Add one GraphQL API

amplify add api

2. Add one request VTL for the query getWeatherByZipCode

Add one request VTL in a file named Query.getWeatherByZipCode.req.vtl in the resolvers directory amplify/backend/api/<apiname>/resolvers. The VTL file will invoke the openweather.org REST API when the amplify app asks AppSync for the weather.

The request VTL template programs AppSync to get the weather from OpenWeatherMap.org with an HTTP GET.

Contents of Query.getWeatherByZipCode.req.vtl:

#set( $appid = $util.defaultIfNull($context.args.appid, "<secretopenweathermapapikey>") )
{
    "version": "2018-05-29",
    "method": "GET",
    "params" : {
        "headers" : {
            "Content-Type": "application/json"
        }
    },
    "resourcePath": $util.toJson("/data/2.5/weather?zip=${ctx.args.zipCode}&appid=${appid}")
}

3. Add one query getWeatherByZipCode and one type Weather

type Weather {
  zipCode: String!
  temperature: String
}
type Query {
  getWeatherByZipCode(zipCode: String!) : Weather
}

4. Add one response VTL for the query getWeatherByZipCode

Add one response VTL in a file named Query.getWeatherByZipCode.res.vtl in the resolvers directory amplify/backend/api/<apiname>/resolvers.

The response VTL programs AppSync to transform the OpenWeatherMap.org REST API response into the Weather type in our GraphQL schema.

Contents of Query.getWeatherByZipCode.res.vtl:

## Raise a GraphQL field error in case of a datasource invocation error
#if($ctx.error)
  $util.error($ctx.error.message, $ctx.error.type)
#end
#if($ctx.result.statusCode == 200)
## If response is 200, return the body.
  ## The response is a JSON string.  Let us parse it.
  #set( $json = $util.parseJson($ctx.result.body))
  ## Cherry pick the temperature field
  $util.toJson({
    "zipCode": $ctx.args.zipCode,
    "temperature": $json.main.temp
  })    
#else
  ## If response is not 200, append error message to response
  $utils.appendError($ctx.result.body, "$ctx.result.statusCode")
#end

5. Add one CloudFormation AWS::AppSync::DataSource resource

Add one AWS::AppSync::DataSource resource to the CustomResources.json template in amplify/backend/api/<apiname>/stack/CustomResources.json

"WeatherDataSource": {
  "Type": "AWS::AppSync::DataSource",
  "Properties": {
    "ApiId": {
      "Ref": "AppSyncApiId"
    },
    "Name": "Weather",
    "Type": "HTTP",
    "HttpConfig": {
       "Endpoint" : "https://api.openweathermap.org"
    }
  }
}

6. Add one CloudFormation AWS::AppSync::Resolver resource

Add one AWS::AppSync::Resolver resource to the CustomResources.json template in amplify/backend/api/<apiname>/stack/CustomResources.json

The resource programs AppSync to ask the WeatherDataSource for weather when a client invokes the getWeatherByZipCode(zipCode: String!) query.

The FieldName property is like glue. That's kinda why CloudFormation is like a glue gun.

"QueryOpenWeatherResolver": {
  "Type": "AWS::AppSync::Resolver",
  "DependsOn" : "WeatherDataSource",
  "Properties": {
    "ApiId": {
      "Ref": "AppSyncApiId"
    },
    "DataSourceName": "Weather",
    "TypeName": "Query",
    "FieldName": "getWeatherByZipCode",
    "RequestMappingTemplateS3Location": {
      "Fn::Sub": [
        "s3://${S3DeploymentBucket}/${S3DeploymentRootKey}/resolvers/Query.getWeatherByZipCode.req.vtl",
        {
          "S3DeploymentBucket": {
            "Ref": "S3DeploymentBucket"
          },
          "S3DeploymentRootKey": {
            "Ref": "S3DeploymentRootKey"
          }
        }
      ]
    },
    "ResponseMappingTemplateS3Location": {
      "Fn::Sub": [
        "s3://${S3DeploymentBucket}/${S3DeploymentRootKey}/resolvers/Query.getWeatherByZipCode.res.vtl",
        {
          "S3DeploymentBucket": {
            "Ref": "S3DeploymentBucket"
          },
          "S3DeploymentRootKey": {
            "Ref": "S3DeploymentRootKey"
          }
        }
      ]
    }
  }
}

7. Push to the cloud with amplify push

amplify push

Summary

Simplified Thinking

It's like wrangling data sources. Herd sources into exactly one spot to reduce complexity of client side code. Benefit from an increasingly consistent mental model of how an app gets data from the world. When the weather gets popular, I can simply turn on AppSync caching and make sure I'm not slowing the world down.

@http directive, throw my hands up

Just thinking out loud, maybe @http should simply be a directive on a field, like @function. @http would make a REST call where @function invokes a lambda. Amplify supports Lambda custom resolvers and omits HTTP resolvers. Don't let that stop you! It's a new way for an app to access a web service.

There are other ways to simplify. What's the best? If there is a better way to simplify, please leave a comment below.

Versioning git pushes of React websites

starpebble — Fri, 03 Apr 2020 01:32:14 +0000

Create a web page with an auto-incremented version number. Let git and npm automate it. Perfect for a small project with a single developer. It's the package.json approach with auto-bump.

Auto-Increment the package.json version number

Here's how to auto-increment a version number in package.json with git, npm, and react. Three steps.

Step 1: Create one git hook for the pre-push git command. It's just a text file. Create one file named 'pre-push' in the directory .git/hooks.

Example file structure:

$ tree .git/hooks
.git/hooks
├── applypatch-msg.sample
├── commit-msg.sample
├── post-update.sample
├── pre-applypatch.sample
├── pre-commit.sample
├── prepare-commit-msg.sample
├── pre-push
├── pre-push.sample
├── pre-rebase.sample
├── pre-receive.sample
└── update.sample

Step 2: Add the executable file permission. On linux, with chmod.

Example command:

 $ chmod +x .git/hooks/pre-push

Step 3: Place the following two lines into the file 'pre-push':

Example hook content:

npm version patch
exit 0

Done!

Trigger the auto-increment

git push triggers the auto-increment. git will execute the hook first. The hook is the shell script above. git then executes the push command to the upstream git repository. [npm version](https://docs.npmjs.com/cli/version) increments the version number and commits the package.json to the git repository. npm version shoves the new version number into the commit message. A one-liner.

npm version tags the local git repository. npm is nifty. The tag is a version number and it matches the package.json's 'version' value. Whether the tag is pushed to the upstream repository depends on the 'git push' command line arguments. By default, git does not push tags upstream.

Give the version number to the users

Place the version number in a react component. Then, users will see the exact version number!

Example react component:

import React from 'react';
import { version } from '../../../package.json';

// about page
export default class About extends React.Component {
  render() {
    return (<div>
      <p>Thanks to all my friends!</p>
      <p>v{version}</p>
    </div>);

The package.json file is a private file with important information. Don't import the whole file. Scope the import to one key/value pair. It's safe.

Versioning website content

Website content is kinda like code. A version number is like a sync point. A small project can benefit too from one that is auto-bumped. That's why a teeny tiny automated commit hook is perfect for a web site with a single developer.

'version' in package.json

The package.json is a simple place to keep the version number. So let's use that file. 'npm version' can bump it. JavaScript can simply import it. JavaScript can import a single 'version' key/value pair from the json file in the website content and exclude the rest of the file.

Example package.json:

{
  "name": "scotch",
  "version": "0.1.3",
  "private": true,
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start"
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}

Version numbers are not cache busters

I've never really liked cache busters. Cache invalidation is simpler. An amazing number of website bugs root from web browser cache staleness. A version number isn't a cache buster. It simply a sync point. git and npm are beautiful tools and I really like them. That's why I let these two tools handle my version number increments for my small website projects. Is is the simplest? Please share any other simple solutions as a comment!

Quickly populating a second AWS Amplify GraphQL environment with data

starpebble — Tue, 17 Mar 2020 16:11:31 +0000

Sometimes it's more comfortable to test an AWS Amplify app with active data. 'amplify env add' creates emptiness. The GraphQL endpoint will return nothingness. Fill it up! Maybe replicate data from production, or maybe bootstrap from files in S3.

Approaches

Bootstrap from Files
Quickly upload data the second environment from data in files. To DynamoDB or RDS. Simply put data files in S3 and replicate with AWS Data Migration Service. An empty environment can be painful. Data with velocity can be painful too. Static files are really simple and can take the pain away:

AWS Data Migration Service (for DynamoDB or RDS resolved models)

Replicate from Production
Quickly populate a second environment with data from the production environment for comfortable testing. How exactly can somebody replicate production data to a second environment? It's easy. There are two services which can replicate the production app environment's data stores:

AWS Data Pipeline (for DynamoDB resolved models)
AWS Data Migration Service (for RDS resolved models)

Bootstrap from Files

AWS Data Migration Service can copy data from S3. DMS can copy to DynamoDB or RDS. Create a source endpoint in AWS DMS with a single S3 bucket. See Using Amazon S3 as a Source for AWS DMS. Then create a destination endpoint, for example, a single AWS DynamoDB endpoint. See Using an Amazon DynamoDB Database as a Target for AWS Database Migration Service.

Replicate from Production

Choose a service to replicate a particular type of data store. AWS Data Pipeline can perfectly copy one DynamoDB table to another. AWS Data Migration Service can perfectly copy one RDS hosted database instance to another.

Jump in the saddle with AWS Data Pipeline to replicate a DynamoDB single table. Expect a quick hop to S3. See Exporting and Importing DynamoDB data with AWS Data Pipeline.

Replicating a single RDS hosted database from one instance to another is simple. Use AWS Data Migration Service to copy the tables over. It won't take months. It will be fast.

Possibilities

When it's absolutely necessary to have data in an Amplify environment, don't let it be cumbersome. A GraphQL endpoint is more functional with data. Iterative software feature delivery goes faster. Push the data replication into the cloud! Have fun. There might be more than one way. Leave a comment with other suggestions, please!

Hosting The Hugo QuickStart Project on AWS Cloudfront with Lambda@Edge

starpebble — Mon, 09 Mar 2020 17:34:51 +0000

The Hugo QuickStart is awfully simple. Why not host the quickstart project with serverless? Here is a guide to hosting Hugo content on serverless. The guide describes the steps to host the Hugo QuickStart project on Cloudfront with Lambda@Edge. It's really simplified. For fun, the code is nicknamed Flavor Cafe (Scotch). Go further than hugo deploy, which stops at S3.

Flavor Cafe (Scotch) - Hugo on Serverless

I've hosted the example quickstart site on serverless, visit the site at https://scotch.spicykey.com/. The site is securely served with https (http secure). Visit for fun.

Use the Cloudformation template in this post to try it. Any serverless computing enthusiast can use the template in his or her AWS account. The lambda@edge JavaScript function is teeny tiny and won't take up too much space in the cloud.

How it Works

Hosting the uri '/posts/my-first-post/'
The Hugo web server handles a gotcha - uri rewriting. That's why the quickstart project generated link '/posts/my-first-post/' is served with content from '/posts/my-first-post/index.html' by the Hugo server. '/posts/my-first-post/' is a sub directory distinguished by a trailing '/'. Cloudfront can also handle this sub directory gotcha. Cloudfront simply needs a little customization with Lambda@Edge. We can control Cloudfront's behavior where a Cloudfront distribution will accept rewritten uri's from a Lambda@Edge function. The lambda function will rewrite the uri's for sub directories. That means the quickstart project site will be easy to click around when hosted on Cloudfront. A web browser request for '/posts/my-first-post/' will be successful. The web browser will receive the content of the static file '/posts/my-first-post/index.html' hosted on S3.

Success
Flavor Cafe (Scotch) changes how Cloudfront behaves. This is a screenshot of the link '/posts/my-first-post/'

Failure
When Cloudfront receives a sub directory request such as '/posts/my-first-post/', it can fail. This is what failure looks like:

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>EA44DB04106A1902</RequestId>
<HostId>
ZslQyfgBnRJ/XPC2mVpNk8k/EBhCk+zE9Qa4zJ5pJIFwgeGKqekH0pF+gJoeQwrjPkD4uHGsFG4=
</HostId>
</Error>

Lambda

Flavor Cafe (Scotch) Lambda@Edge Code

'use strict';

// @starpebble on github
// hugo flavor cafe (scotch)

const DEFAULT_OBJECT = 'index.html';

exports.handler = (event, context, callback) => {
  const cfrequest = event.Records[0].cf.request;
  if (cfrequest.uri.length > 0 && cfrequest.uri.charAt(cfrequest.uri.length - 1) === '/') {
    // e.g. /posts/ to /posts/index.html
    cfrequest.uri += DEFAULT_OBJECT;
  }
  else if (!cfrequest.uri.match(/.(css|md|gif|ico|jpg|jpeg|js|png|txt|svg|woff|ttf|map|json|html)$/)) {
    // e.g. /posts to /posts/index.html
    cfrequest.uri += `/${DEFAULT_OBJECT}`;
  }
  callback(null, cfrequest);
  return true;
};

JavaScript Code Comments

// Hugo on Cloudfront, Lambda@Edge function 
// Flavor Cafe (Scotch)
// @starpebble on github
//
// Two rewrite rules for hugo sub directory uri's.
// Example:
//   1. rewrite uri /posts/ to /posts/index.html
//   2. rewrite uri /posts  to /posts/index.html
//
// Add as many file extensions as you like for rule 2.
// uri's that end in a known file extensions are not rewritten by rule 2.

200 not 404
The Lambda@Edge function takes will rewrite the Hugo QuickStart project urls for directories to a default object, index.html. That's how Cloudfront serves the URI '/posts/my-first-post/' with content '/posts/my-first-posts/index.html' returning a perfect 200 instead of an ugly 404.

Trust me, don't try to host a Hugo site on Cloudfront without a little customization with Lambda! Here's how we can make it easy for user's to click around a Hugo site hosted on Cloudfront.

Cloudfront is an amazing machine. When content does fit perfectly into its rules, Cloudfront can be customized with lambda@edge. Each request for content is simply an event to a lambda function replicated to the edge, just like the static html content generated by Hugo. That means the lambda is replicated to points of presence all around the world, in proximity to users.

The Lambda@Edge nodejs function is very small. This is important. Smaller lambda functions are better, with size measured in bytes.

Steps

Launch the Flavor Cafe (Scotch) Cloudformation template in this post, once
Write down the Cloudfront domain url, one output of the template
Create one quickstart project with Hugo guide
Modify the config.toml baseURL key with the Cloudfront domain url and secure https protocol string, e.g. 'baseURL = "https://d123456789.cloudfront.net"'
hugo -D
Write down the S3 bucket name, one output of the template
Upload the hugo generated content in the directory 'public/' to the S3 bucket, such as 'aws s3 sync'

Template

Cloudformation YAML

AWSTemplateFormatVersion: 2010-09-09
Description: 'Flavor Cafe (Scotch), host a static Hugo site on Cloudfront'
# one cloudfront distribution with one s3 bucket origin
# one lambda@edge function rewrites cloudfront sub directory requests to a root object
Parameters:
  flavor:
    Type: String
    Description: name of flavor
    Default: 'scotch'
Resources:
  LambdaEdgeFunctionRole:
    Type: "AWS::IAM::Role"
    Properties:
        Path: "/"
        ManagedPolicyArns:
            - "arn:aws:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole"
        AssumeRolePolicyDocument:
          Version: "2012-10-17"
          Statement:
            - Sid: "AllowLambdaServiceToAssumeRole"
              Effect: "Allow"
              Action:
                - "sts:AssumeRole"
              Principal:
                Service:
                  - "lambda.amazonaws.com"
                  - "edgelambda.amazonaws.com"
  LambdaAtEdgeFunction:
    DependsOn: 
      - LambdaEdgeFunctionRole
    Type: AWS::Lambda::Function
    Properties:
      Description: !Sub 'flavorcafe ${flavor} jamstack hugo lambda@edge'
      FunctionName: !Sub hugo-flavorcafe-${flavor}-function
      Role: !GetAtt LambdaEdgeFunctionRole.Arn
      Handler: index.handler
      Runtime: nodejs10.x
      Timeout: 1
      MemorySize: 128
      Code:
        ZipFile: >
          'use strict';

          // @starpebble on github
          // hugo flavor cafe (scotch)

          const DEFAULT_OBJECT = 'index.html';

          exports.handler = (event, context, callback) => {
            const cfrequest = event.Records[0].cf.request;
            if (cfrequest.uri.length > 0 && cfrequest.uri.charAt(cfrequest.uri.length - 1) === '/') {
              // e.g. /posts/ to /posts/index.html
              cfrequest.uri += DEFAULT_OBJECT;
            }
            else if (!cfrequest.uri.match(/.(css|md|gif|ico|jpg|jpeg|js|png|txt|svg|woff|ttf|map|json|html)$/)) {
              // e.g. /posts to /posts/index.html
              cfrequest.uri += `/${DEFAULT_OBJECT}`;
            }
            callback(null, cfrequest);
            return true;
          };          

  LambdaFunctionVersion:
    DependsOn:
      - LambdaAtEdgeFunction
    Type: AWS::Lambda::Version
    Properties: 
      Description: 'Lambda@Edge version'
      FunctionName: !Ref LambdaAtEdgeFunction
  S3Bucket:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: !Sub hugo-flavorcafe-${flavor}-${AWS::AccountId}
      BucketEncryption: 
        ServerSideEncryptionConfiguration: 
        - ServerSideEncryptionByDefault:
            SSEAlgorithm: AES256
      AccessControl: Private
      WebsiteConfiguration:
        IndexDocument: index.html
        ErrorDocument: error.html
      PublicAccessBlockConfiguration:
        BlockPublicAcls: true
        IgnorePublicAcls: true
        BlockPublicPolicy: true
        RestrictPublicBuckets: true
      CorsConfiguration:
        CorsRules:
          -
            AllowedOrigins:
              - 'http*'
            AllowedMethods:
              - HEAD
              - GET
              - PUT
              - POST
              - DELETE
            AllowedHeaders:
              - '*'
            ExposedHeaders:
              - ETag
              - x-amz-meta-custom-header
  CFOriginAccessIdentity:
    Type: AWS::CloudFront::CloudFrontOriginAccessIdentity
    Properties:
      CloudFrontOriginAccessIdentityConfig:
        Comment: !Sub FlavorCafe ${flavor} CloudFrontOAI
  S3BucketPolicy:
    DependsOn:
      - S3Bucket
      - CFOriginAccessIdentity
    Type: AWS::S3::BucketPolicy
    Properties:
      Bucket: !Ref S3Bucket
      PolicyDocument:
        Statement:
          -
            Effect: Allow
            Action: s3:GetObject
            Principal:
              CanonicalUser: !GetAtt CFOriginAccessIdentity.S3CanonicalUserId
            Resource: !Sub 'arn:aws:s3:::${S3Bucket}/*'  
  CFDistribution:
    DependsOn:
      - LambdaFunctionVersion
      - S3Bucket
      - CFOriginAccessIdentity
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Enabled: 'true'
        HttpVersion: 'http2'
        Comment: 'hugo flavor cafe distribution'
        DefaultRootObject: index.html
        Origins:
        - Id: S3OriginPrivateContent
          DomainName: !Sub hugo-flavorcafe-${flavor}-${AWS::AccountId}.s3.amazonaws.com
          S3OriginConfig:
            OriginAccessIdentity: !Sub origin-access-identity/cloudfront/${CFOriginAccessIdentity}
        DefaultCacheBehavior:
          TargetOriginId: S3OriginPrivateContent
          Compress: true
          ForwardedValues:
            QueryString: 'false'
            Headers:
              - Origin
            Cookies:
              Forward: none
          ViewerProtocolPolicy: redirect-to-https
          LambdaFunctionAssociations:
            - EventType: viewer-request
              LambdaFunctionARN: !Ref LambdaFunctionVersion
Outputs:
  BucketName:
    Description: The hugo content bucket name
    Value: !Ref S3Bucket
  CloudfrontDomain:
    Description: the cloudfront hosted dns domain name for the hugo static site
    Value: !GetAtt CFDistribution.DomainName

Diagrams

Serverless Resources
A picture is worth a thousand words. Here are two diagrams of the template above. The template can host a Hugo site like scotch.spicykey.com

Keep going

Just for fun
Hugo is fun. Go further than S3 and try Cloudfront. Hugo deploy is really different because it hosts the site on S3. Cloudfront is speedy, with http/2 and content hosted at the edge of the cloud. Have fun with the amazing content machine, Cloudfront!

starpebble
https://github.com/starpebble

Identifying the OS version and phone model hosting a React Native mobile app purely with JavaScript

starpebble — Mon, 03 Feb 2020 05:08:19 +0000

When it is absolutely necessary to determine the OS and phone model in a React Native app it can be done with purely with JavaScript. Please let me explain how exactly the open source React Native component info-glass does it.

User Agent String

The React Native WebView component can execute a simple JavaScript function that returns the user agent string. That means the WebView will kinda reply like a web browser does.

The user agent string identifies the mobile app's host:

OS name
OS version
Phone model

It doesn't have to be a phone the WebView can also identify a mobile device model like a tablet too.

Code

<script>
  function getinfo() {
    if(window.postMessage.length !== 1) {
      setTimeout(getinfo, ${ASYNCHRONOUS_DELAY_MS});
    } else {
      window.postMessage(window.navigator.userAgent);
    }
  }
  window.onload = getinfo;
</script>

The code snippet above is just a single javascript function named getinfo() in a single HTML script tag. The function getinfo() returns the window.navigator.userAgent string for the WebView.

The secret is that a WebView component instance can send a message to the containing React Native component through the JavaScript function window.postMessage().

info-glass

The npm package info-glass is a single JavaScript component that does one or two more things to simplify the above snippet. The source code is on Github in one single index.js file.

Every single React Native project is different. I simply like building purely in JavaScript because:

Developer operation simplifications.
Debugging a purely JavaScript application is relatively easy.
Dust bunnies are easy to find with a JavaScript linter.

It's not too difficult to mix in native code, it simply isn't always absolutely necessary to write native code. If you are trying to be a humble JavaScript champion, it can't hurt to use a WebView to get the userAgent.