
## A hook that runs after the component is 'mounted'

Here is a hook that will will not run the supplied function on the first render:

```typescript
import { useRef, useEffect, useState } from 'react'

const useDidMountEffect = (func, deps) => {
  const isMounted = useRef(false)

  useEffect(() => {
    if (isMounted.current) func()
    else isMounted.current = true
  }, deps)

  // reset on unmount; in React 18, components can mount again
  // useEffect(() => {
  //   isMounted.current = false
  // })
}
```

You can use it like this:

```typescript
export default function UseMountEffectExample() {
  const [toggle, setToggle] = useState(false)

  useEffect(() => {
    console.log('Running useEffect. Toggle Value: ', toggle)
  }, [toggle])

  useDidMountEffect(() => {
    // react please run me if 'key' changes, but not on initial render
    console.log('Running useDidMountEffect. Toggle Value: ', toggle)
  }, [toggle])

  return (
    <div className="flex flex-col content-between">
      <button onClick={() => setToggle((prev) => !prev)}>Toggle</button>
      <p>Toggle: {toggle ? 'true' : 'false'}</p>
    </div>
  )
}
```

Codepen here to play round with: https://codepen.io/rainkinz/pen/ZEMYaeN

## Some notes on useEffect

`useEffect` by default runs after the first render and after every update. React runs `useEffect` after it has finished updating the DOM on render.

```typescript
useEffect(() => {
  // do something when the component renders

  return () => {
    // cleanup
  }
})
```

In certain cases, applying the effect after every render might not be desirable. We can list arguments
that will cause `useEffect` to fire if they have changed:

```typescript
useEffect(() => {
  // do something when the component renders but only if count has changed
}, [count])
```

The same thing was done in class components using `prevProps` or `prevState` in `componentDidUpdate`
remembering that the `componentDidUpdate` lifecycle method is invoked during each render, except the first one. The `componentDidMount` is only invoked once, after the first render.

```typescript
componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    // do something when the component renders
  }
}
```

Note that listing no arguments in the dependency array `[]` makes the effect and cleanup run only once, on mount and unmount.

```typescript
useEffect(() => {
  // do something when the component mounts
  return () => {
    // cleanup on unmount
  }
}, [])
```


A hook that runs after the component is mounted

A hook that runs only after a component is mounted


## Default to Squash Merge for PRs

Generally I prefer a squash merge for a PR. To make Github default to this option, go to `Settings` and scroll down to the bottom until you see Merge button. Select 'Allow squash merging' and remove the other selected options to make squash merging the only allowable option.

![Squash Merge Settings](/images/blog/gh-squash-merge.png)


Useful bits and pieces for working with Github

Github Tips


## Introduction

I really enjoy the TDD workflow of creating tests before the implementation, but
it's a drag to run tests manually. We can use [Guard](https://github.com/guard/guard)
to watch and rerun our tests and application code as we make changes to them.

## Setup

Add the following to your Gemfile:

```ruby
group :development, :test do
  gem 'spring'
  gem 'spring-commands-rspec'
  gem 'guard-rspec', require: false

  # other development and test gems follow
end
```

and install the gems using bundler as normal:

```bash
bundle install
```

Initialize Guard:

```bash
bundle exec guard init
```

This will create `Guardfile` which is heavily commented:

```ruby
# A sample Guardfile
# More info at https://github.com/guard/guard#readme

guard :rspec, cmd: "bundle exec rspec" do
  require "guard/rspec/dsl"
  dsl = Guard::RSpec::Dsl.new(self)

  # Feel free to open issues for suggestions and improvements

  # RSpec files
  rspec = dsl.rspec
  watch(rspec.spec_helper) { rspec.spec_dir }
  watch(rspec.spec_support) { rspec.spec_dir }
  watch(rspec.spec_files)

  # Ruby files
  ...
```

To use Guard and RSpec with Spring install the Spring binstubs using:

```bash
bundle exec spring binstub rspec
```

Then change your `Guardfile` to use this:

```ruby
guard :rspec, cmd: 'bin/rspec' do
  require "guard/rspec/dsl"
  dsl = Guard::RSpec::Dsl.new(self)
  ...
```

Start up Guard:

```bash
bundle exec guard
```

Now when you edit a spec it should be run automatically.


Continuous Testing with RSpec and Guard - Better together


## Introduction

I'm terrible at CSS and a lot of purely front end development in general. So as an exercise to improve, I rebuilt my blog using [Tailwind CSS](https://tailwindcss.com/) and [Next.js](https://nextjs.org/). It was a surprisingly pleasant experience. If you're like me, a developer, but definitely not a designer, you might enjoy reading about to write a static blogging system utilizing these technologies. As a bonus, I am hosting this all on AWS and using CDK to deploy it. 

## Bootstrapping the Next.js Project

First up, create a new Next.js project using:

```sh
$ npx create-next-app nextjs-blog --use-npm 
```

Change to the newly created directory and initialize git:

```sh
$ cd nextjs-blog 
$ git init .
```

Make sure everything is working ok:

```sh
$ npm run dev

> nextjs-blog@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
event - compiled successfully
```

Open a browser and navigate to [http://localhost:3000](http://localhost:3000) and you should see:

![Welcome to Next.js](/images/welcome_to_nextjs.png "Welcome To Next.js")

The setup is done. Lets add everything to git:

```sh
$ git add .
$ git commit -m 'Bootstrapped Next.js blog'
[main (root-commit) 1a8f1a4] Bootstrapped Next.js blog
 11 files changed, 5004 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 README.md
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 pages/_app.js
 create mode 100644 pages/api/hello.js
 create mode 100644 pages/index.js
 create mode 100644 public/favicon.ico
 create mode 100644 public/vercel.svg
 create mode 100644 styles/Home.module.css
 create mode 100644 styles/globals.css
```

## Adding Tailwind CSS

Create a new branch so that we can make sure everything is good before merging to `main`:

```sh
$ git checkout -b rainkinz/add_tailwindcss
```

Now install the Tailwind CSS dependencies (See https://tailwindcss.com/docs/guides/nextjs for more information):

```sh
$ npm install --save-dev tailwindcss@latest postcss@latest autoprefixer@latest
```

Generate the `tailwind.config.js` and `postcss.config.js` files:

```sh
$ npx tailwindcss init -p
```

Configure `tailwind.config.js` to remove unused styles as per the Tailwind guide:

```json
module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

Include Tailwind in the CSS. In this case I'll add it to `./styles/globals.css`. Replace everything in that file with:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Also, clean up some of the stuff we don't need:

```sh
rm styles/Home.module.css
```

remove the import from `page/index.js` and remove all the existing content. It should end up looking like this:

```js
import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1>Our blog</h1>
      </main>
    </div>
  )
}
```

Add everything to git:

```sh
$ git add .
$ git commit -m 'setup tailwind'
```

The Tailwind setup is done.

## Using Typescript

I would rather use Typescript. Next.js makes that easy. Simple create a `tsconfig.json` like so:

```sh
$ touch tsconfig.json
```

Then add the needed packages:

```sh
$ npm install --save-dev typescript @types/react
```

When you next run the app you'll see:

```sh
$ npm run dev

> nextjs-blog@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
We detected TypeScript in your project and created a tsconfig.json file for you.

event - compiled successfully
```

Finally rename `./pages/app.js` to `./pages/app.tsx`:

```sh
$ mv pages/_app.js pages/_app.tsx 
```

Commit and test everything:

```sh
$ git add .
$ git commit -m 'Configured typescript'
```

Finally convert out `pages/index.js`, and `_app.js` to Typescript by changing the extension from `.js` to `.tsx`. Check it in to git and test.

And that's it for now. In the next post I'll actually start creating the Tailwind components I'm going to use in my blog project. 

The completed code for the setup can be found here: https://github.com/rainkinz/nextjs-blog-example/tree/rainkinz/part-1_setup


Creating a blog using Tailwind CSS and Next.js

Learning Tailwind CSS and Next.js


## Introduction

In this post I'm going to create a very simple Ruby on Rails application and deploy it using AWS CDK. This has been done in a few places but I have a few difference goals here:

* Create something that can be deployed as cheaply as possible. I really want to just be able to create a quick rails app and get it on the web, somewhat like Heroku, but using AWS, more for bootstrapping an MVP or something as quickly as possible.
* I don't care about High Availability, redundancy etc. If things break, we'll just redeploy.
* To learn more about CDK and few AWS features I haven't played with much at work, like SSM.

## Setup

Create a directory called `cdk-blog` or whatever you want to be the base directory of the application and deploy code. The structure I'll use will look like:

```sh
cdk-blog 
  - blog # the actual application we're deploying
  - deploy # the cdk deploy code
```

For a great introduction to CDK see: https://dev.to/emmanuelnk/series/11689

## Create the Rails application

```sh
$ rails new blog
      create
      create  README.md
      create  Rakefile
      create  .ruby-version
      create  config.ru
      create  .gitignore
      create  .gitattributes

...

├─ websocket-extensions@0.1.4
└─ ws@6.2.1
✨  Done in 8.17s.
Webpacker successfully installed 🎉 🍰
```

Now lets get this thing to run on docker. If you're looking for a great guide on 'Dockerizing' Rails, check out this [post](https://evilmartians.com/chronicles/ruby-on-whales-docker-for-ruby-rails-development) by Evil Martian. I'm not using exactly what the Evil Martians created, but this works for me for the purposes of this post:

```docker
ARG BASE_IMAGE_VERSION=2.7

FROM ruby:$BASE_IMAGE_VERSION-alpine as builder

ARG BUNDLE_WITHOUT
ARG RAILS_ENV

ENV BUNDLE_WITHOUT ${BUNDLE_WITHOUT}
ENV RAILS_ENV ${RAILS_ENV}
ENV SECRET_KEY_BASE=foobar
ENV RAILS_SERVE_STATIC_FILES=true

RUN apk add --update --no-cache \
    build-base \
    postgresql-dev \
    git \
    nodejs \
    yarn \
    tzdata

WORKDIR /app

# Install gems
RUN gem install bundler
ADD Gemfile* /app/

RUN bundle install -j4 --retry 3 \
 # Remove unneeded files (cached *.gem, *.o, *.c)
 && rm -rf /usr/local/bundle/cache/*.gem \
 && find /usr/local/bundle/gems/ -name "*.c" -delete \
 && find /usr/local/bundle/gems/ -name "*.o" -delete

# Add the Rails app
ADD . /app

# Precompile assets
# RUN bundle exec rake assets:precompile

###############################
# Stage final
FROM ruby:$BASE_IMAGE_VERSION-alpine
MAINTAINER brendan.grainger@gmail.com

ARG ADDITIONAL_PACKAGES

# Add Alpine packages
RUN apk add --update --no-cache \
    postgresql-client \
    $ADDITIONAL_PACKAGES \
    tzdata \
    file

# Add user
RUN addgroup -g 1000 -S app \
 && adduser -u 1000 -S app -G app
USER app

# Copy app with gems from former build stage
COPY --from=builder /usr/local/bundle/ /usr/local/bundle/
COPY --from=builder --chown=app:app /app /app

# Set Rails env
ENV RAILS_LOG_TO_STDOUT true
ENV RAILS_SERVE_STATIC_FILES true

WORKDIR /app

# Expose Puma port
EXPOSE 3000

# Save timestamp of image building
RUN date -u > BUILD_TIME
```

I like to make sure it's all running ok locally. Create `docker-compose.yml` file and add the following:

```yaml
# See: https://codetales.io/blog/publishing-ports-the-right-way
#
version: '3.7'
services:
  db:
    image: postgres:11-alpine
    environment:
      - POSTGRES_PASSWORD=password
    volumes:
      - db-data:/var/lib/postgresql/data
    ports:
      - 127.0.0.1:${PG_PORT}:5432
  app:
    #user: root
    image: rainkinz/blog-app:latest
    build:
      context: .
      args:
        # Install dev and test gems
        - BUNDLE_WITHOUT=production
    tty: true # do we need this?
    stdin_open: true # do we need this
    volumes:
      - type: bind
        source: ./
        target: /app
        consistency: cached
    environment:
      - RAILS_ENV
      - DB_USER=postgres
      - DB_PASSWORD=password
      - POSTGRES_PASSWORD=password
      - DB_HOST=db
      - SECRET_KEY_BASE=we-dont-need-a-secret-here
    ports:
      - 127.0.0.1:${APP_PORT:-3000}:3000
    links:
      - db
    command: ["rails", "server", "-b", "0.0.0.0", "-p", "${MY_APP_PORT:-3000}"]
    #
volumes:
  db-data:
```


```sh
$ docker-compose up
WARNING: The PG_PORT variable is not set. Defaulting to a blank string.
Creating network "blog_default" with the default driver
Creating volume "blog_db-data" with default driver
Pulling db (postgres:11-alpine)...
11-alpine: Pulling from library/postgres
ca3cd42a7c95: Pull complete
a0d003399a5b: Pull complete
0a08de1ad3ba: Pull complete
d339911efe38: Extracting [>                                                  ]  557.1kB/57.72MB
223f635ad1dd: Download complete
```


## Creating the deploy

I am using [AWS CDK](https://docs.aws.amazon.com/cdk/latest/guide/home.html) to deploy the application.

First up install CDK:

```sh
$ npm install -g aws-cdk
```

Now create the application in our `cdk-rails` base directory:

```sh
$ mkdir deploy && cd deploy
$ cdk init --language=typescript 
# Welcome to your CDK TypeScript project!

This is a blank project for TypeScript development with CDK.

The `cdk.json` file tells the CDK Toolkit how to execute your app.

...
```

This will create a 'blank' Typescript based CDK application, with the following level folder structure (ignoring `node_modules`):

```sh
.
├── README.md
├── bin
│   └── deploy.ts
├── cdk.json
├── jest.config.js
├── lib
│   └── deploy-stack.ts
├── node_modules
├── package-lock.json
├── package.json
├── test
│   └── tmp.test.ts
└── tsconfig.json
```

For not the 2 files we'll work with mostly are:

### `bin/deploy.ts`

This contains the deployment 'glue' code.

```typescript
#!/usr/bin/env node
import 'source-map-support/register';
import * as cdk from '@aws-cdk/core';
import { DeployStack } from '../lib/deploy-stack';

const app = new cdk.App();
new DeployStack(app, 'DeployStack', {
  /* If you don't specify 'env', this stack will be environment-agnostic.
  * Account/Region-dependent features and context lookups will not work,
  * but a single synthesized template can be deployed anywhere. */

  /* Uncomment the next line to specialize this stack for the AWS Account
  * and Region that are implied by the current CLI configuration. */
  // env: { account: process.env.CDK_DEFAULT_ACCOUNT, region: process.env.CDK_DEFAULT_REGION },

  /* Uncomment the next line if you know exactly what Account and Region you
  * want to deploy the stack to. */
  // env: { account: '123456789012', region: 'us-east-1' },

  /* For more information, see https://docs.aws.amazon.com/cdk/latest/guide/environments.html */
});
```

### `lib/deploy-stack.ts` 

Which is where we'll write most of the deployment code for now. We will refactor later though. It looks like this:

```typescript
import * as cdk from '@aws-cdk/core';

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

    // The code that defines your stack goes here
  }
}
```

https://docs.aws.amazon.com/cdk/api/latest/docs/aws-ec2-readme.html#configuring-instances-using-cloudformation-init-cfn-init

Install some dependencies we'll need:

```sh
npm install --save @aws-cdk/aws-iam @aws-cdk/aws-ecr-assets
```

```sh
AWS_PROFILE=kuripai_dev cdk deploy --all 
```

Notice, I always explicitly use a profile or set it using `.envrc `. I prefer to do this than accidentally deploy to production or something...


## References

* [Isolated networks on AWS](https://summitroute.com/blog/2020/03/31/isolated_networks_on_aws/)

* https://docs.aws.amazon.com/cdk/api/latest/docs/aws-ecr-assets-readme.html

* [Using VPC Endpoints to teleport into your VPC](https://mechanicalrock.github.io/2020/07/20/private-bastions.html)
* https://tomgregory.com/when-to-use-an-aws-s3-vpc-endpoint/
* [Building, bundling, and deploying applications with the AWS CDK](https://aws.amazon.com/blogs/devops/building-apps-with-aws-cdk/)
* https://sbstjn.com/blog/aws-cdk-lambda-docker-container-example/

* https://gist.github.com/windlessuser/d9e27a79882a572b5f1eecc6a42655c0


* https://blog.codecentric.de/en/2021/03/fargate-with-efs-and-aurora-serverless-using-aws-cdk/

* https://gist.github.com/windlessuser/d9e27a79882a572b5f1eecc6a42655c0


Simple Rails deployment using CDK


## Setup

Ensure `aws-cdk` is installed.

```sh
npm install -g aws-cdk
```

Then bootstrap the CDK project by creating a folder where we will keep our deployment code:

```sh
mkdir deploy && cd deploy
```

Finally initialize the CDK application:

```sh
cdk init --language=typescript
```

Open up `lib/deploy-stack.ts`. It'll look something like this:

```typescript
import * as cdk from '@aws-cdk/core';

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

    // The code that defines your stack goes here
  }
}
```

## Install the required dependencies

```sh
npm install @aws-cdk/aws-s3 @aws-cdk/aws-s3-deployment
```

## Create a bucket to store our site in

We need a place to host our website. We'll use a `s3` bucket for that. Note that since the bucket 
will be serving a website, we need to allow `publicReadAccess` and additionally set an index document. 

```typescript
  const websiteBucket = new s3.Bucket(this, 'WebsiteBucket', {
    publicReadAccess: true,
    websiteIndexDocument: 'index.html'
  });
```

I am only going to deploy a static version of my site, however, by default NextJS builds a version of 
the site to be served up using Node. We can get it to create a static version of the site using: `next export` which will create an `out` folder containing the static versio of our site. I'll adjust the build in `package.json` to do this by default when we build:

```sh
  "scripts": {
    ...
    "build": "next build && next export",
    ...
  },
```

We could manually copy the `out` folder to the bucket created above, but CDK has a construct to do this for us called `BucketDeployment` in the `@aws-cdk/aws-s3-deployment` package:

```typescript
  new s3Deployment.BucketDeployment(this, 'DeployWebsite', {
    destinationBucket: websiteBucket,
    sources: [s3Deployment.Source.asset("../out")]
  });
```

Finally we need to know the endpoint of our website:

```typescript
  new cdk.CfnOutput(this, "WebsiteURL", {
      value: websiteBucket.bucketWebsiteUrl
  });
```

## Running the deploy

Simply run:

```sh
cdk deploy
```

This will create a new 'Stack' called `DeployStack`, and the necessary resources to host your site.

When it's all said and done CDK will output the URL of the newly hosted site:

```sh
 ✅  DeployStack

Outputs:
DeployStack.WebsiteURL = http://deploystack-websitebucket75c24d94-16jtb8ug8sqtg.s3-website-ap-southeast-2.amazonaws.com
```

In the next post Next up, we'll use CDK to create a CloudFront distribution. 


Deploy a simple static site build with NextJS to AWS using AWS CDK

Example using Prism / Markdown with Next.js including switching syntax highlighting themes.

Getting Started with Tailwind CSS and NextJS


## Another new beginning

This is probably the 10th blogging 'platform' I've created from scratch. I have no good reason to do this other than a blog is a nice sized project to learn new things on. It has the side effect benefit of making me actually document how I did something. My memory has never been great...

Anyway the latest iteration is build with all the latest in buzz technology: [Next.js](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/), and deployed to Cloudfront using [AWS CDK](https://aws.amazon.com/cdk/).

Below is a list of a few of the TODO items to make this a bit more spiffy, and more importantly a few things I'd like to achieve aside from writing up a few posts to help my memory. I'll update it as I go.

## Building this blog

- [x] Add about page!
- [ ] Document how to actually build a static site builder using Next.js, etc. Despite the fact that there are lots of 'reference' implementations, youtube videos, etc, there turned out to be a few gotcha's.
  - [x] Setting Up: Next.js, Tailwind, using Typescript.
  - [ ] Basic Styling using tailwind - index page
  - [ ] Basic Styling using tailwind - article page
  - [ ] Loading articles from markdown - domonstrating `getStaticProps` and `getStaticPaths`
  - [ ] Custom Image optimization using AWS and CDK
  - [ ] ? Maybe - adding analytics? 

## TODO

- [ ] Add Comments - not discus
- [ ] Move old blog posts to this version

## DONE

- [x] Add Analytics 
  - [ ] Look at: https://www.npmjs.com/package/@analytics/google-analytics
- [x] Move domain names over
- [x] Deploy using CDK

## Things to play with

- [ ] [Localstack + CDK = local AWS development ](https://dev.to/_mikigraf/localstack-cdk-local-aws-development-58ff) and [aws-cdk-local](https://www.npmjs.com/package/aws-cdk-local)
- [ ] https://aws.amazon.com/blogs/mobile/zero-effort-container-deployment-for-graphql-and-rest-apis-and-web-hosting-with-amplify-cli/

work

A hook that runs only after a component is mounted

work

Github Tips

work

Continuous Testing with RSpec and Guard - Better together

work

Learning Tailwind CSS and Next.js

work

Simple Rails deployment using CDK

work

Deploying a NextJS site using cdk

work

Getting Started with Tailwind CSS and NextJS

work

My new blog