Category: Tech Notes

Posted on

AWS CloudFormation basics – part1

Collection of notes, templates and tips for building AWS CloudFormation templates.

The basic structure of CloudFormation files (in JSON):

{
  "Resources" : {
    "ExampleResourceName" : {
      "Type" : "AWS::?::?",
      "Properties" : {
        "Example" : "propertyvalue"
      }
    }
  }
}
  • Resources: the AWS services to be provisioned. There can be multiple repeating Resource elements in this section, to provision/configure multiple services in a stack
  • ExampleResourceName: a name for each resource being provisioned
  • Type: the AWS type for the resource, e.g. AWS::S3::Bucket
  • Properties: properties for the service being provisioned/configured

AWS CLI commands:

aws cloudformation create-stack --stack-name STACK-NAME
  --template-body file://template-file.json
  --parameters ParameterKey=example1,ParameterValue=value1    
    ParameterKey=example2,ParameterValue=value2
aws cloudformation list-stacks
aws cloudformation delete-stack --stack-name STACK-NAME

If your stack creates IAM resources, you’ll also need to pass:

--capabilities CAPABILITY_NAMED_IAM

Otherwise you’ll see this error:

An error occurred (InsufficientCapabilitiesException) when calling the CreateStack operation: Requires capabilities : [CAPABILITY_NAMED_IAM]
Posted on

Bulk converting image file formats with MacOS Preview

The Preview app on MacOS has a ton of useful features, from annotating images to converting file formats. Recently I had a bunch on .png screenshots that I needed to convert to jpegs. While I was aware you can Export an image file in Preview and save it in any other supported format, I was looking for a quicker way to bulk convert a large number of files.

Turns out, as explained in this article, if you select a group of images in Finder and double-click one of them to open them all in one go, you can select all the images from their thumbnails on the left:

… then from File click ‘Export Selected’. From the dialog chosoe where to write the converted files, and press Options button to change the file format. Done!

Posted on

Using Route 53 to create subdomain names for your projects

If you create and deploy your own software projects to the cloud, at some point you probably end up with a number of things deployed to various places and unless you spend time maintaining your bookmarks to all these projects, it becomes hard to keep track after a while.

One of the interesting things about Route 53 is that you can create A records that resolve to IP addresses either within AWS or hosted elsewhere. If you have you own domain setup in Route 53, you can easily create subdomains with A records pointing to where ever these projects are hosted. e.g.

example1.youdomain.com -> x.x.x.x

example2.yourdomain.com -> y.y.y.y

A while back I deployed my Sudoku Solver React app to an S3 bucket hosting the website, and I can never remember the S3 endpoint name. But using a Route 53 Alias to the S3 endpoint, you can create whatever subdomain you need to point to the target resource. Here’s what it looks like setting up an alias:

Notes:

  • when you click in the Alias Target box you should see your S3 bucket already listed (if not, check you’ve enabled Static Website Hosting)
  • the recordset name must be identical to the first part of your bucket name (e.g. ‘example’)
  • the S3 bucket name must be the subdomain name plus full domain, e.g. example.yourdomain.com

Posted on

React Redux cheatsheet

This is my summary of the bare minimum steps as a quick-ref cheatsheet for adding Redux to an existing React app. This is just some notes for future reference. If you’re looking for tutorials, take a look at:

Here’s my quickref:

npm install --save react-redux

Add Redux devtools for Chrome (see here):

npm install --save-dev redux-devtools-extension

Wrap <Provider> around root Component to share the Store with all child components:

import { Provider } from 'react-redux'
import store from './store'

<Provider store={store}>
  <App>
</Provider>

Implement mapStateToProps and mapDispatchToProps to pass store and dispatch() as props to each Component, and call connect() to connect each Component with your Redux Store:

const mapStateToProps = (state) => {
  return {
    yourcomponent: state.yourcomponent
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(YourComponent)

Create a Store:

import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension';
let store = createStore(yourReducer, devToolsEnhancer());
export default store;

Create reducers for Store – here’s an example that take the the value of a label from the passed action payload and sets it in the Store – remember the state of the store is always treated as immutable, so always create a new copy of the modified state, here using Object.assign():

function labelReducer(state = initialState, action) {
  switch (action.type) {
    case 'CHANGE_LABEL':
      return Object.assign( {},{ labelValue : action.payload 
    } );
    default:
      return state;
    }
}

Implement an action creator that builds an Action object that requests changes to the Store – each action has a type and a payload:

export function changeLabel(payload) {
  return { type: "LABLE_CHANGE", payload }
};

Implement mapDispatchToProps – you can either build the Action object yourself here, or call an Action creator like the above example:

function mapDispatchToProps(dispatch) {
return {
  changeLabel: labelValue => 
    dispatch(changeLabel(labelValue))
  };
}

Pass mapDispatchToProps to your connect() call shown earlier.

As a comparison, here’s a simple React app using Flux:

https://github.com/kevinhooke/SimpleReactFluxExample

… and here’s the same app converted to use Redux:

https://github.com/kevinhooke/SimpleReactReduxExample

Done!

Proudly powered by WordPress