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

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 i react-redux

Add Redux devtools for Chrome (see here):

npm install --save 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!

React and Redux error: “_react.default.createContext is not a function”

I’m adding Redux to an existing React app, converting from Flux to Redux. After wrapping my root component with the <Provider> I got this error and the app doesn’t initialize:

_react.default.createContext is not a function

Doing a quick search found this post suggesting I’ve got a mismatch in versions between newest Redux versions and possibly older versions of React. This is possible as I’m updating an older React app I put together a couple of years ago. Quick way to test this, remove React and react-dom and add them back again.

Right now I have:

"react": "^15.4.1",
"react-dedux": "^0.4.0-beta.4",
"react-dom": "^15.4.1",
"react-redux": "^7.2.0"

Removed React and react-dom and added back latest versions:

"react": "^16.13.1",
"react-dedux": "^0.4.0-beta.4",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0"

Restated my app, fixed!

Kafka Streams error: “PolicyViolationException: Topic replication factor must be 3”

I’m creating a Streams app to consume a Topic and do a count with results in a KTable, and I’ve got this error:

2020-05-03 15:23:26,373 [streamsapp1-e7955018-aca6-43ce-8967-abd6c6d238d9-StreamThread-1] ERROR org.apache.kafka.streams.processor.internals.InternalTopicManager [] - stream-thread [main] Unexpected error during topic creation for streamsapp1-KSTREAM-AGGREGATE-STATE-STORE-0000000001-changelog.
Error message was: org.apache.kafka.common.errors.PolicyViolationException: Topic replication factor must be 3
2020-05-03 15:23:26,374 [streamsapp1-e7955018-aca6-43ce-8967-abd6c6d238d9-StreamThread-1] ERROR org.apache.kafka.streams.processor.internals.StreamThread [] - stream-thread [streamsapp1-e7955018-aca6-43ce-8967-abd6c6d238d9-StreamThread-1] Encountered the following unexpected Kafka exception during processing, this usually indicate Streams internal errors:
org.apache.kafka.streams.errors.StreamsException: Could not create topic streamsapp1-KSTREAM-AGGREGATE-STATE-STORE-0000000001-changelog.

I think the clue here is that the app is trying to create an intermediate topic, streamsapp1-KSTREAM-AGGREGATE-STATE-STORE-0000000001-changelog, and is failing because the Replication Factor for the intermediate topic does not match the rf of the source topic. This is described in the Streams docs for option config options here.

Adding config property replication.factor=3 to match the rf of the source topic fixes the issue.