
## Why do I need to test my network connection?

Today I needed to install a new network cable in one of my rooms, and unfortunately my current switch is not only on the other side of my apartment, but it had run out of ports. Annoyingly I hadn't labelled the cables, so my only option was to unplug the cables one by one and see which one was the one I needed to replace.

My only option was to unplug each cable, go back to the other end of my apartment, and then check if the network connection was still working. This was a very time-consuming process, and I thought there must be a better way to do this. So I created this simple bash script to play a sound everytime the network connection drops out or comes back online, I plugged in some speaker into my Mac and ran the script. This way I could hear when the network connection was back online without having to go back and forth across my entire apartment.

Please note - this script is setup to work on a Mac, but you can easily modify it to work on a Linux or Windows machine.

## 1. Create the bash script

Copy the code below and save it as something like `network-test.sh` on your Mac.

```bash
#!/bin/bash

# Host to ping
HOST="google.com"  # Replace with the IP or hostname you want to ping

# Path to the success sound file (sound when connection is alive)
SUCCESS_SOUND="/System/Library/Sounds/Glass.aiff"

# Path to the error sound file (sound when connection is dropped)
ERROR_SOUND="/System/Library/Sounds/Basso.aiff"

# Variable to track connection status
CONNECTION_ALIVE=0

while true; do
    # Ping the host and check if successful
    if ping -c 1 $HOST > /dev/null 2>&1; then
        # If previously disconnected, play reconnect sound and update status
        if [ $CONNECTION_ALIVE -eq 0 ]; then
            echo "Connection restored ✅ ✅ ✅ ✅"
            afplay $SUCCESS_SOUND
            CONNECTION_ALIVE=1
        else
            # Keep playing the success sound every 1 second
            afplay $SUCCESS_SOUND
        fi
    else
        # If disconnected, keep playing the error sound every second
        echo "Connection lost ❌ ❌ ❌ ❌"
        afplay $ERROR_SOUND
        CONNECTION_ALIVE=0
    fi
    sleep 1  # Wait 1 second before the next check
done

```

## 2. Make the script executable

Open a terminal and navigate to the folder where you saved the script. Run the following command to make the script executable:

```bash
chmod +x network-test.sh
```

## 3. Run the script

To run the script, simply type the following command in the terminal:

```bash
./network-test.sh
```

You should now hear a sound every time your network connection drops out or comes back online.

## Conclusion

This script is a simple way to test your network connection without having to constantly check your network connection by hand. You can easily modify the script to work on a Linux or Windows machine by changing the sound file paths.


Testing your network connection using a bash script


## Updated for 2024

You can find the old version of this blog article here [Creating a Typescript, Tailwind and Expo Go App in 2 minutes (2022 version)](/blogs/expo-go-tailwindcss-easy-build) - this new version does everything included in the old version in a single command line to get your Expo Go Tailwind app running in no time at all.

## Expo Go - A Quicker Setup

Using Expo for building apps is a better experience (in my opinion) than using a bare bones React Native setup. I find the Expo Go App great for getting your self up and running quickly and being able to see something on a device quickly is just awesome. The purpose of this page is to try and get it up and running even quicker.

## Simply Run this command in a VS Code Workspace

```bash
APP_NAME="my-awesome-app"
mkdir $APP_NAME \
&& cd $APP_NAME \
&& npx create-expo-app . --template blank \
&& rm -rf .git \
&& sed -i '' "s/\"name\": \"myapp\"/\"name\": \"$APP_NAME\"/" app.json \
&& sed -i '' "s/\"name\": \"myapp\"/\"name\": \"$APP_NAME\"/" package.json \
&& npx expo install react-dom react-native-web @expo/metro-runtime \
&& rm package-lock.json \
&& yarn add nativewind \
&& yarn add -D tailwindcss@3.3.2 \
&& yarn add typescript @types/react @types/react-native \
&& yarn add @react-navigation/native @react-navigation/native-stack \
&& yarn add react-native-screens react-native-safe-area-context \
&& echo '{\n\t"extends": "expo/tsconfig.base",\n\t"compilerOptions": {}\n}' > tsconfig.json \
&& npx tailwindcss init \
&& sed -i '' "s/content: \[\],/content: \[\".\/App.{js,jsx,ts,tsx}\", \".\/src\/**\/*.{js,jsx,ts,tsx}\"\],/" tailwind.config.js \
&& sed -i '' "/presets: \['babel-preset-expo'\],/a\\
plugins: \[\"nativewind\/babel\"\]," babel.config.js \
&& sleep 1 \
&& mv App.js App.tsx \
&& echo '/// <reference types="nativewind/types" />' > my-app.d.ts \
&& code . --add \
&& cat > App.tsx <<EOL
import React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { StatusBar } from 'expo-status-bar';

function HomeScreen() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <View className="bg-cyan-100 py-2 px-7 rounded-lg border border-cyan-300">
        <Text className="text-cyan-700 text-lg">
            I am a Tailwind Expo Go app! $APP_NAME
        </Text>
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
EOL

# Start expo after the file is written
npx expo start

```

This does the following:

1. Creates an Expo app
2. Moves it back into the root or the project
3. Installs additional dependencies
4. Adds NativeWind and Tailwind (uses version 3.2.2)
5. Adds TypeScript
6. Sets up Tailwind and TypeScript so you're ready to go!
7. Changes the App.js to App.tsx (If you're not using TypeScript then you can remove this line, but you really should be!)
8. Adds a reference to the NativeWind types in a new file called `my-app.d.ts`
9. Opens the project in VS Code - the --add flag means if you're using the command in an existing workspace it will add the new project to the workspace
10. Adds a new App.tsx file with a simple HomeScreen component that uses Tailwind classes, and prints back the App name
11. Starts the Expo Go app

...there you go a good blank starting template for your next Expo Go app. Enjoy


Creating a Typescript, Tailwind and Expo Go App in 2 minutes (Updated for 2024)


## What is this? 

I've created a full stack photo uploader tool using AWS and NextJS, for more details about what technology it uses please read more here: [photo uploader tool](/photo-uploader-with-aws-serverless-nextjs-and-tailwind)


## Super Quick start guide

```text
1. Clone backend repo to ./backend/ 
2. Clone frontend repo to ./website/
3. In the ./backend/  copy .env.example to .env 
4. Set YOUR_AWS_IAM_PROFILE to be your IAM Profile in the .env file 
5. yarn install && sls deploy -s dev && bash echo-outputs.sh -s dev - this deploys your backend to AWS
6. Copy the values from the sls deploy output once it's finished
7. In the frontend ./website/ copy the .env.example to .env.local and copy the values from the sls out out from step 6.
8. yarn install && yarn dev - to start your frontend locally
9. Visit http://localhost:3000/ Register, Login and then upload some photos!
```

...for a more detailed guide please read on!

## Pre-requisites

In order to use this guide, you should have some knowledge of the following:

* Basic knowledge of AWS and setting up an IAM profile and credentials file
* Basic knowledge of the Serverless Framework
* Basic knowledge of NextJS and React

## Getting started 

First grab the Frontend repo here: [photo uploader frontend](https://github.com/joemore/aws-serverless-photo-uploader-frontend-nextjs) and the backend here:
[photo uploader backend](https://github.com/joemore/aws-serverless-photo-uploader) 

Lets create a directory called `photo-uploader` anywhere on your computer (location does not matter) and save each of these repos as:

- `~/photo-uploader/backend/`
- `~/photo-uploader/website/`

## Lets create a Workspace (VS Code users only)

This part is optional, but I highly recommend it as it's a really effective way of using VS Code when you are working with multiple repos at the same time, especially with full stack projects that have a backend, frontend and maybe even a mobile app.

1. Open VS Code & open a new blank window.
1. Click on the `File` menu and select `Add Folder to Workspace...`
1. Navigate to the `photo-uploader` directory you created earlier and select the `website` folder
1. Now repeat the above 2 steps but this time add the `backend` folder
1. Now click `File` > `Save Workspace As...` and save the workspace as `photo-uploader.code-workspace` somewhere safe on your computer.
1. (Even more optional...) Install this [Peacock VS Code plugin](https://www.peacockcode.dev/) 
1. Hit CMD + Shift + P (for a Mac) and type "peacock" and then select `Peacock: Change to a Favorite Color` and select a color of your choice. 



<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/vscode-workspaces-and-peacock-colors-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/vscode-workspaces-and-peacock-colors-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/vscode-workspaces-and-peacock-colors-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/vscode-workspaces-and-peacock-colors-md.jpg" alt="VS Code coloured Workspace with Peacock" width="800">
</picture>

...and hey presto you have a workspace with 2 repos in it, and you can easily switch between them using the sidebar. And when you open back up VS Code it will remember your workspace and open both repos for you. We have even added a lovely color to our Workspace so we can easily see which one we are working in at a glance!

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/vscode-workspaces-at-a-glance-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/vscode-workspaces-at-a-glance-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/vscode-workspaces-at-a-glance-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/vscode-workspaces-at-a-glance-md.jpg" alt="VS Code coloured workspaces at a glance" width="800">
</picture>


## AWS Account with ~/.aws/credentials file

First off - you will need to have an AWS Account, along with an IAM profile (with Administrator access)

Create a `~/.aws/credentials` file on your computer so we can use your IAM Profile to create our backend.  [See the AWS Docs about creating a credentials file here](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html)

Next make sure you have the AWS CLI installed and configured on your computer. [See the AWS Docs about installing the AWS CLI here](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html)

Once good to go we can now run commands such as `aws ec2 describe-instances --profile MyUserProfile` and it will use the credentials in your `~/.aws/credentials` file to authenticate you and describe your EC2 instances.

<a id="backend-setup"></a>

## Backend Setup 

Note all of this is performed in the `backend/` directory in our workspace.

1. In VS Code, press Control + ` to open a new terminal window and make sure we are in the backend/ directory
1. Make sure you have Serverless frame work installed: `yarn global add serverless` to install the serverless framework to your system
1. Run `yarn install` to install the dependencies
1. Next copy the `.env.example` to `.env` and fill in the values

```bash
YOUR_AWS_IAM_PROFILE=XXXXXXXXXXX
REGION=us-east-1
PREFIX=pinkmonkey-
SERVICE_NAME=photo-uploader
DYNAMO_DB_TABLE=photos
COGNITO_POOL=users
S3_BUCKET=photos-bucket
```

Note - for this demo you only actually have to change the `YOUR_AWS_IAM_PROFILE=XXXXXXXXXXX` to be `YOUR_AWS_IAM_PROFILE=MyUserProfile` from your credentials file.  The rest of the values are optional and can be used as defaults.

You may also change the region if you wish to one nearer to you and you want speedier uploads and downloads, but it's not required.

A note about the `PREFIX` - This is used to prefix the SERVICE_NAME, DYNAMO_DB_TABLE, COGNITO_POOL and S3_BUCKET.  As you can see in this example I have chosen "pinkmonkey-" as my prefix.  This is simply an arbitrary value and is only used so that all of our AWS resources that we create have a uniquely prefixed name.  

If like me you have multiple AWS services spun up, then not only is this good for avoiding any naming collisions, but also makes it easier to identify which resources belong to which project when you haven't looked at them for a while.

5. Now run `sls deploy -s dev` to deploy the backend to AWS  This will take a few minutes to run, but once it's done you should see something like this:

```bash
Bundling with Webpack...
No external modules needed
Copying existing artifacts...

✔ Service deployed to stack pinkmonkey-photo-uploader-dev (132s)

endpoints:
  POST - https://xxxxxxxx.execute-api.us-east-1.amazonaws.com/dev/insert-photo
  GET - https://xxxxxxxx.execute-api.us-east-1.amazonaws.com/dev/complete-photo/{id}
  GET - https://xxxxxxxx.execute-api.us-east-1.amazonaws.com/dev/get-photos
  DELETE - https://xxxxxxxx.execute-api.us-east-1.amazonaws.com/dev/delete-photo/{id}
functions:
  insertPhoto: pinkmonkey-photo-uploader-dev-insertPhoto (3.3 MB)
  completePhoto: pinkmonkey-photo-uploader-dev-completePhoto (3.3 MB)
  getPhotos: pinkmonkey-photo-uploader-dev-getPhotos (3.3 MB)
  deletePhoto: pinkmonkey-photo-uploader-dev-deletePhoto (3.3 MB)
```

Yay - you now have a fully functional backend running on AWS! There will be a Cognito UserPool and client, a DynamoDB table, an S3 bucket, and Lambda functions to handle the API calls.

The backend will handle the upload of your images by storing them to s3 and then creating a record in DynamoDB. It will also handle the displaying and deletion of the images.

6. Finally run the bash script with `bash echo-outputs.sh -s dev` to get the information we need from our stack to use in our frontend.  This will output something like this:

```bash
NEXT_PUBLIC_AWS_REGION=xx-xxxx-1
NEXT_PUBLIC_AWS_USER_POOL_ID=xx-xxxx-1_123456789
NEXT_PUBLIC_AWS_USER_POOL_WEB_CLIENT_ID=abdef0123456789012345
NEXT_PUBLIC_AWSAPIENDPOINT=https://xxxxxxxx.execute-api.xx-xxxx-1.amazonaws.com/dev
```



Copy these values so that we can use in our frontend to connect to our backend in the next steps...


<a id="frontend-setup"></a>

## Frontend Setup

Note all of this is performed in the `website/` directory in our workspace.

1. In VS Code, press Control + ` to open a new terminal window and make sure we are in the website/ directory
1. Run `yarn install` to install the dependencies
1. Next copy the `.env.example` to `.env.local` and replace the values below with our values from the backend setup:

```bash
NEXT_PUBLIC_AWS_REGION=us-east-1
NEXT_PUBLIC_AWS_USER_POOL_ID=us-east-1_XXXXXXXXX
NEXT_PUBLIC_AWS_USER_POOL_WEB_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXXXXXXX
NEXT_PUBLIC_AWSAPIENDPOINT=https://XXXXXXXX.execute-api.us-east-1.amazonaws.com/dev
```

4. Now run `yarn install && yarn dev` to start the frontend.  This will take a few seconds to run, but once it's done you should see something like this:


<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-website-frontend-2-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-website-frontend-2-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-website-frontend-2-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-website-frontend-2-md.jpg" alt="Photo Uploader Tool Frontend" width="800">
</picture>

If all is setup correctly then you should now be able to Register a new user, get an email confirmation code, and then login to the website.

## Testing the Frontend

1. Register a new user
1. Check your email for the confirmation code
1. Enter the confirmation code
1. Login to the website (Should be automatic after confirming your email)
1. Click the "Photo Uploader" button


<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-website-logged-in-menu-2-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-website-logged-in-menu-2-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-website-logged-in-menu-2-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-website-logged-in-menu-2-md.jpg" alt="Photo Uploader Tool Logged in menu" width="800">
</picture>

This will take you to the Photo Uploader page. Here you can select any JPEG images from your computer and start uploading them...


<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-website-upload-photos-2-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-website-upload-photos-2-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-website-upload-photos-2-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-website-upload-photos-2-md.jpg" alt="Photo Uploader Tool Uploaded Photos" width="800">
</picture>

... hit the refresh button, or reload the page to see your uploaded images, along with the crops and extracted color made by the frontend script

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-website-upload-photos-3-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-website-upload-photos-3-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-website-upload-photos-3-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-website-upload-photos-3-md.jpg" alt="Photo Uploader Tool Uploaded Photos" width="800">
</picture>

<b>And Voila! 🥳</b> - you have a fully functional Photo Uploader tool running on AWS! All images will be saved in your S3 Bucket, and the details will be saved in your DynamoDB table.

Once you are finished you can run `sls remove -s dev` in the backend/ directory to remove all of the AWS resources that were created.

If you need any help or have any questions, please feel free to reach out to me on Twitter: [@joemore_g](https://twitter.com/joemore_g)

<b>Enjoy!!</b>

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-infrastructure-2-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-infrastructure-2-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-infrastructure-2-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/photo-uploader/photo-uploader-infrastructure-2-md.jpg" alt="VS Code coloured workspaces at a glance" width="800">
</picture> 

Photo Uploader Tool using AWS and NextJS


## Backing Up to AWS S3

If like me you want to store your old computer files, photos or videos in the cloud and you are using AWS S3 then you might have uploaded them using the default STANDARD storage class. This is fine if you just have infrequently accessed files, but the trouble is it can end up costing you way more than you need. 

Also, maybe you already have some files in an S3 Bucket using the lowest cost DEEP_ARCHIVE tier but you have uploaded some more files using the STANDARD tier and forgot to change the class.

AWS S3 can be amazing, but if you do not stay on top of managing your buckets then you will easily forget to change the storage class of your files, and a few months down the line wonder why your costs have shot up! 

## Scanning the S3 Bucket

To find out what storage class your files are using you can use the AWS CLI to scan the bucket. 

```bash
aws s3api list-objects  \
    --profile YOUR_PROFILE  \
    --bucket YOUR_BUCKET  \
    --query 'Contents[].{Key: Key, StorageClass: StorageClass}'
```

This returns a JSON array of all the files in the bucket and their storage class... which is fine for looking at each file.

Now lets instead use a NodeJS Script that Counts the Files in each Storage Class making it much easier to give us a better breakdown of how many files for each storage class.

```js
const PROFILE = 'YOUR_PROFILE';
const BUCKET = 'YOUR_BUCKET';

const AWS = require('aws-sdk');
const credentials = new AWS.SharedIniFileCredentials({ profile: PROFILE });// Load the AWS profile from ~/.aws/credentials
const s3 = new AWS.S3({apiVersion: '2006-03-01',credentials,});


const counts = {};

function handleListObjectsResponse(response) {
  response.Contents.forEach(function(obj) {
    const storageClass = obj.StorageClass;
    if (!counts[storageClass]) {
      counts[storageClass] = 0;
    }
    counts[storageClass]++;
  });
  if (response.IsTruncated) {
    s3.listObjectsV2({
      Bucket: BUCKET,
      ContinuationToken: response.NextContinuationToken
    }, function(err, data) {
      if (err) {
        console.log('Error:', err);
      } else {
        handleListObjectsResponse(data);
      }
    });
  } else {
    console.log(counts);
  }
}


s3.listObjectsV2({ Bucket: BUCKET }, function(err, data) {
  if (err) {
    console.log('Error:', err);
  } else {
    handleListObjectsResponse(data);
  }
});
```

This will give you an output a bit like this:

```js
{ 
    DEEP_ARCHIVE: 387720, 
    GLACIER: 84255, 
    STANDARD: 24117 
}
```

So I know that I have a load of STANDARD files that I need to move to DEEP_ARCHIVE...

## Changing the Storage Class 

This next script goes through our bucket and changes the storage class of any files that are STANDARD to DEEP_ARCHIVE.

```js
const PROFILE = 'YOUR_PROFILE';
const BUCKET = 'YOUR_BUCKET';
const storageClassFrom = 'STANDARD';
const storageClassTo = 'DEEP_ARCHIVE';

const AWS = require('aws-sdk');
const credentials = new AWS.SharedIniFileCredentials({ profile: PROFILE });
const s3 = new AWS.S3({apiVersion: '2006-03-01',credentials,});

function handleListObjectsResponse(response) {

  response.Contents.forEach(function(obj) {
    const storageClass = obj.StorageClass;
    if (storageClass === storageClassFrom) {
      s3.copyObject({
        Bucket: BUCKET,
        CopySource: `${BUCKET}/${obj.Key}`,
        Key: obj.Key,
        StorageClass: storageClassTo,
      }, function(err, data) {
        if (err) {
          console.log('Error:', err);
        } else {
          console.log(`Changed storage class of object ${obj.Key} from ${storageClassFrom} to ${storageClassTo}`);
        }
      });
    }
  });
  // If there are more objects, make another listObjectsV2 call to get the next page
  if (response.IsTruncated) {
    s3.listObjectsV2({
      Bucket: BUCKET,
      ContinuationToken: response.NextContinuationToken
    }, function(err, data) {
      if (err) {
        console.log('Error:', err);
      } else {
        handleListObjectsResponse(data);
      }
    });
  }
}

// Get a list of all objects in the bucket
s3.listObjectsV2({ Bucket: BUCKET }, function(err, data) {
  if (err) {
    console.log('Error:', err);
  } else {
    handleListObjectsResponse(data);
  }
});

```

Please note - if your bucket contains many files this might take you a while to run... so be patient! It took about 30 mins for each bucket I ran it on, as they had quite a few files!

I recently ran this script on two of my buckets that I knew still had a lot of STANDARD files in them as I had uploaded a load of files over a month ago but had forgotten to set them to DEEP_ARCHIVE. It managed to save me a daily cost saving of around $0.37 per day.

## Conclusion

I hope this post has helped you to save some money on your AWS S3 bills. If you have any questions or comments please contact me on Twitter at https://twitter.com/joemore_g

AWS S3 & NodeJS to Change Storage Class



## Hunting down Duplicate file names

This simple NodeJS Script allows you to hunt in a specific directory for duplicate file names:

```js
const fs = require("fs").promises;
const path = require("path");

// Directory passed to the function when run
const directory = process.argv[2];
const writeToJson = true; // Set to true to write to JSON file, false to log to console

const findDuplicates = async (dir, duplicates, filenames) => {
  const files = await fs.readdir(dir);

  for (const file of files) {
    if (file.startsWith(".")) continue;

    const filePath = path.join(dir, file);
    const filename = path.parse(file).name;

    const stats = await fs.stat(filePath);

    if (stats.isDirectory()) {
      await findDuplicates(filePath, duplicates, filenames);
    } else {
      if (filenames[filename]) {
        duplicates.push(filePath);
      } else {
        filenames[filename] = true;
      }
    }
  }
};

(async () => {
  const duplicates = [];
  const filenames = {};

  await findDuplicates(directory, duplicates, filenames);

  if (writeToJson) {
    await fs.writeFile("duplicates.json", JSON.stringify(duplicates,null,2));
    console.log("duplicates.json has been saved");
  } else {
    console.log(duplicates);
  }
  
})();
```

Run using : `node find-duplicates.js /YourPathName/SubFolder/etc/`

It will then output a JSON file with all the duplicate file names, and you can then manually take a look to see if you want to delete them or not. 

Please note however, this only compares the filenames regardless of what the file is... we can improve this a bit further by comparing both the filename and the filesize of the file, here we go:

```js
const fs = require("fs").promises;
const path = require("path");

/* To run this file: 
node find-duplicate-files.js "/Volumes/5TB"
*/

// Directory passed to the function when run
const directory = process.argv[2];
const writeToJson = true; // Set to true to write to JSON file, false to log to console

const findDuplicates = async (dir, duplicates, filenames) => {
  const files = await fs.readdir(dir);

  for (const file of files) {
    if (file.startsWith(".")) continue;

    const filePath = path.join(dir, file);
    const filename = path.parse(file).name;

    const stats = await fs.stat(filePath);

    if (stats.isDirectory()) {
      await findDuplicates(filePath, duplicates, filenames);
    } else {
      if (filenames[filename]) {
        if (filenames[filename].size === stats.size) {
          duplicates.push(filePath);
        }
      } else {
        filenames[filename] = stats;
      }
    }
  }
};

(async () => {
  const duplicates = [];
  const filenames = {};

  await findDuplicates(directory, duplicates, filenames);

  if (writeToJson) {
    await fs.writeFile("duplicates.json", JSON.stringify(duplicates,null,2));
    console.log("duplicates.json has been saved");
  } else {
    console.log(duplicates);
  }
  
})();
```

Now when you run it, it will look for files that share the same name and size... so much more likely to be duplicates. 

We could go even further and do some kind of MD5 checksum, but I'll leave that to you to figure out. 😝



Finding Duplicate files with Node JS


<div classname="text-center"><small>🤖 Please Note: All images in this article were made using MidJourney AI</small></div>

## First head over to Chat GTP



You want to head over to [chat.openai.com](https://chat.openai.com/) and create yourself an account, and get yourself familiar with how to enter prompts.

### Next think of a concept

Ok, so this is the part that when I ask someone to think of absolutely anything & their mind simply goes blank. So lets just that your concept is "A Cube from the Future" and you want to see ideas for it. Now... you know what you mean, but you find it hard to describe. So lets head over to chat GTP to make our lives easy and enter the following: 

> Your instructions are to imagine 3 concepts for "A Cube from the Future" and describe them

Chat GTP will give you 3 descriptions, heres what I got:

![Chat GTP 3 Responses](https://cdn.3dnames.co/uploads/joemore.com/blogs/asking-ai-to-design-a-cube/chat-gtp-describe-3-cubes-lg.jpg)


next is to pick the one that you think best suits your concept. And we are going to then use Chat GTP to extract the keywords from it:

> Can you focus on description 2 to extract the nouns and adjectives? separated by a ,

...this will give you a breakdown of the keywords that you can use to for the next part.

![Chat GTP Focus on Keywords](https://cdn.3dnames.co/uploads/joemore.com/blogs/asking-ai-to-design-a-cube/chat-gtp-focus-on-keywords-lg.jpg)


## Now go to Mid Journey 

Next up is [midjourney.com](https://www.midjourney.com/) - again I'm not going to explain the signup process (lets just say it's a small headache, but nothing trivial a cup of coffee and 10 minutes cant solve) - but once you are in, and in the chatbot ready to enter your prompt. Lets start by typing `/imagine` and up pops the prompt box. So first, lets paste in our Nouns from Chat GTP:

![Mid Journey - just nouns](https://cdn.3dnames.co/uploads/joemore.com/blogs/asking-ai-to-design-a-cube/mid-journey-just-nouns-lg.jpg)

![Mid Journey - cubes results 1](https://cdn.3dnames.co/uploads/joemore.com/blogs/asking-ai-to-design-a-cube/cubes-1-lg.webp)

...the results are 'meh' ok, but now lets try adding in the adjectives, and see the results:

![Mid Journey - cubes results 2](https://cdn.3dnames.co/uploads/joemore.com/blogs/asking-ai-to-design-a-cube/cubes-2-lg.webp)

Nice... it's getting there, however I don't like this planet in the middle, so I'm going to delete the keywords `user, location, planet, destination` and test again:

![Mid Journey - cubes results 3](https://cdn.3dnames.co/uploads/joemore.com/blogs/asking-ai-to-design-a-cube/cubes-3-lg.webp)

...ok 1 more tweak, I'm going to also drop the key word `computer-generated` and add the keyword `white background` & then try once again:

![Mid Journey - cubes results 4](https://cdn.3dnames.co/uploads/joemore.com/blogs/asking-ai-to-design-a-cube/cubes-4-lg.webp)

Oh... there you go! The first one is what I was visualising, so now in the Mid Journey chatbot, lets click the V1 button under our 4 images... this will make us 4 more variations of the same design, but just each slightly different. 

![Mid Journey - cubes results 5](https://cdn.3dnames.co/uploads/joemore.com/blogs/asking-ai-to-design-a-cube/cubes-5-lg.webp)

Ok, I love number 3, so finally lets press the U3 button and this will upscale the image to 1024x1024px. Lets download it, and voila... we have our concept art!

![Mid Journey - final cube](https://cdn.3dnames.co/uploads/joemore.com/blogs/asking-ai-to-design-a-cube/final-cube-lg.webp)

You may have of course preferred one of the other cubes... but this is the power of Chat GTP and Mid Journey, you can keep tweaking the keywords until you get the design you want.

## Now - Lets get try designing some websites 

So we have seen how we can use Chat GTP as a great tool to make us some prompts for Mid Journey, so now, we can use a same process to design websites.

![Baby Toys Website](https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-designed-websites/baby-toys-website-lg.webp)

<div className="text-center">👆 A website selling baby toys</div>

![Future Tech Website](https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-designed-websites/future-tech-website-lg.webp)

<div className="text-center">👆 A website selling Future Tech</div>

![Vodka and Skiis Website](https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-designed-websites/vodka-skiis-website-lg.webp)

<div className="text-center">👆 A website selling Vodka and Skiis</div>

![Sunglasses Website](https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-designed-websites/sunglasses-website-lg.webp)

<div className="text-center">👆 A website selling Sunglasses</div>


..and there you have it, 4 websites designed by AI. Mid Journey and Chat GTP are still very much in their infancy, but WOW! The results are seriously impressive (and fucking scary sometimes to be fair!) - I personally feel that they are both amazing, yet, they are still both only tools to be used to 
help with starting the building blocks or to give inspiration and allow you to really speed up your development or design process/flows. They still require someone driving them for now... but I'm sure that will change in the (very very near) future.


Using Chat GTP and MidJourney to Design conceptual items

# NextJS and Dynamic Sitemap.xml file.

I absolutely love NextJS, as a React developer it allows you to rapidly build your website/application much quicker than a bare-bones React app, and with it's built in routing
system creating dynamic pages is a walk in the park. 

A small issue I recently ran into however was on this website while building my dynamic blog pages, I use [Markdown files to generate each blog page](/blogs/markdown-blogs-with-nextjs) - and I needed a way of having a sitemap.xml file that picked up these pages dynamically as well, on top of that I wanted my sitemap.xml file
to also show the correct Date in the `<lastmod></lastmod>` tag whenever I edit one of my markdown files. 

NextJS allows us to easily create static files by placing them into the `/public/` folder, so what we are going to do here is utilize webpack to generate our
`/public/sitemap.xml` file on either our `yarn dev` or `yarn build` commands locally, and then it can easily be pushed to our repo ready to be built server side. 

### NextJS Config Update

First we need to look at updating our `next.config.js` file with the following (See START and END):


```js
const nextConfig = {
  reactStrictMode: true,
  // START
  webpack: (config, { isServer }) => {
    if (isServer) {
      require("./lib/sitemap-generator");
    }
    return config;
  },
  // END
}
module.exports = nextConfig
```

### The Sitemap Generator

Now create a new file called `sitemap-generator.js` and place the following contents into it like this: 

```js
const fs = require('fs');
const path = require('path');
const matter = require('gray-matter');

const fsPromises = fs.promises;
const SITE_ROUTE = 'https://www.mywebsite.com';

const postsDirectory = path.join(process.cwd(),'markdown-blogs')

const getBlogsFiles = () => {
    return fs.readdirSync(postsDirectory)
}
const getBlogData = ( postIdentifier ) => {
    const postSlug = postIdentifier.replace(/\.md$/,'') // removes file extension
    const filePath = path.join(postsDirectory, `${postSlug}.md`)
    const fileContent = fs.readFileSync(filePath,'utf-8')
    const { data, content } = matter(fileContent)
    const postData = { slug: postSlug , ...data, content, }
    return postData
}
const getAllBlogs = () => {
    const postFiles = getBlogsFiles();
    const allBlogs = postFiles.map(postFile => {
        return getBlogData(postFile)
    })

    const sortedBlogs = allBlogs.sort( (blogA , blogB ) => blogA.date > blogB.date ? -1 : 1 )
    return sortedBlogs
}
    
const getFileLastMod = async (PAGE ) => {
    try{
        const filePath = path.join(process.cwd(),PAGE)
        const stats = await fsPromises.stat(filePath);
        return await new Date(stats.mtime).toISOString();
    }catch(err){
        console.log('🤬',err);
        return new Date().toISOString();
    }
    
}

const regularPages = async (route) => {
    const pages  = {
        'pages/index.tsx' : '/',
        // ... add other static pages here... e.g.
        'pages/about.tsx' : '/about',
        'pages/contact.tsx' : '/contact',
        'pages/blogs/index.tsx' : '/blogs',
    }
    const output = await Object.keys(pages).map(async (file) => {
        const path = pages[file]
        const lastmod = await getFileLastMod(file);
        if(lastmod){
            return `
                <url>
                <loc>${route + path}</loc>
                <lastmod>${lastmod}</lastmod>
                <changefreq>monthly</changefreq>
                <priority>1.0</priority>
                </url>
            `
        }else{
            return ``
        }
    })
    return await Promise.all(output);
}

const listBlogsSitemaps = async (route) => {
    const blogs = getAllBlogs();
    const formatted = await blogs.map( async ( blog ) => {
        return `<url>
                <loc>${route}/blogs/${blog.slug}</loc>
                <lastmod>${await getFileLastMod(`markdown-blogs/${blog.slug}.md`)}</lastmod>  
                <changefreq>monthly</changefreq>
                <priority>1.0</priority>
            </url>`;
        });
    return await Promise.all(formatted);
}  

const generateSitemap = async () => {
    fs.readdirSync(path.join(process.cwd(), 'markdown-blogs'), 'utf8');
    const regPages = await (await regularPages(SITE_ROUTE)).join('')
    const blogs = await (await listBlogsSitemaps(SITE_ROUTE)).join('');
    const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
            ${regPages}
            ${blogs}
        </urlset>
    `;
    fs.writeFileSync('public/sitemap.xml', sitemap)
    return {
        props: {
        },
    };
};
generateSitemap();

```

<p class="note">
<b>Please note</b> - annoyingly for now the <code>sitemap-generator.js</code> file must be 
JavaScript and not Typescript - this is due to the NextJS <code>next.config.js</code> file itself being JavaScript. There is more info about this <a href="https://github.com/vercel/next.js/issues/5318">here</a> - this means that some functions are repeated in stead of re-used from our blogs-util.ts if you've been following along to my other article <a href="/blogs/markdown-blogs-with-nextjs">Markdown Blogs with Next JS and Typescript</a>
</p>

The 2 main functions in this file are first the `regularPages()` function, which contains an object with File paths along with the route name, these are our static files 
we wish to add to our sitemap. 

The 2nd function of concern is the `listBlogsSitemaps()` function - this file reads our Markdown blog files, and creates the xml for the sitemap dynamically. 

Now when you either run `yarn dev` or `yarn build` the sitemap.xml file will be generated and placed into the `/public/sitemap.xml` folder ready to be served by https://www.yourwebsite.com/sitemap.xml along with the correct <lastmod> tags for each of your blog articles.

Happy blogging!

NextJS Sitemap with Dynamic Content


# NextJS Websites Hosted with Amplify

If you have a website written using the NextJS framework, then you might be looking at various hosting platforms out there. Vercel is one of my favorite platforms to host NextJS sites and rightfully so as they are the guys who wrote NextJS in the first place. However, if like me you use AWS then you might also find it beneficial to host some of your projects using AWS's Amplify service, this guide shows you how. 

**Please Note:** - At the time of writing this article (29th March 2022) there are currently 2 bugs I've found with Amplify that might affect the NextJS `/api/` path. The first is that environment variables must all be prefixed with "NEXT_PUBLIC_" when within the api directory contents (going against the rules of NextJS) and secondly, Amplify does not work at all with the `/api/` on Version 12.1.0 - I had to revert back to v 12.0.8 to get it working. I.e. `yarn remove next` and then `yarn add next@12.0.8`

### Before you start

In this example we will be using a NextJS app version 12.0.8, saved in a Github repo. I am using AWS region `eu-west-2` but you can use any region of your choice

* Make sure you have a NextJS website ready, if needs be start a new one with `npx create-next-app@12.0.8`
* Add it to your Github account (can be private and temporary)

### Lets go: 

1. Login to your AWS Account, and go to the [Amplify Console](https://eu-west-2.console.aws.amazon.com/amplify/home), click get started

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/1-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/1-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/1-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/1-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

2. We want to choose Amplify hosting not Studio (that's a backend part and I'll be writing another guide about that soon!)

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/2-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/2-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/2-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/2-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

3. Now choose Github (or another GIT repository)

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/3-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/3-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/3-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/3-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

4. Now sign-in to your GitHub account and authorize Amplify to access either all your repos, or specific ones.

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/4.1-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/4.1-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/4.1-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/4.1-md.jpg" alt="NextJS Amplify Setup Guide" width="600">
</picture>

5. Enter your password to confirm

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/5-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/5-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/5-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/5-md.jpg" alt="NextJS Amplify Setup Guide" width="400">
</picture>

6. You should now be able to choose your repo from the list 

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/7-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/7-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/7-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/7-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

7. We now need to create a new backend role, this is what NextJS requires to process things like images, SSR and the /api/ folder. So click "Create New Role" 

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/8-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/8-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/8-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/8-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

8. It will open up a new window with the selected options already selected for you, choose "Next: Permissions"

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/9-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/9-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/9-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/9-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

9. This show the policy name, you can expand it if you wish to see whats happening, Click "Next: Tags" and click next again (FYI - I've not included the tags screenshot)

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/10-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/10-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/10-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/10-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

10. Finally you can name your role here, and edit the description (or just use the defaults) and click "Create role" 

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/11-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/11-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/11-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/11-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

11. Once you return to Amplify you'll be able to select the newly created role, and on this page review the build settings

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/12-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/12-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/12-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/12-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

12. We are then taken to a page where we can review our Amplify setup, click "Save and Deploy"

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/13-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/13-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/13-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/13-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

13. Our NextJS Website will then be deployed, built and hosted and once ready

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/14-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/14-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/14-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/14-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

...and that's it, we now have a fully hosted NextJS website, that re-builds automatically when you push content into your GitHub repo. 

### Further improvements:

* Click on Domain Management" on the left to add a domain you own in route53 to your website, if you wish to just use a subdomain, then make sure you press the "exclude root" button on setup
* Notifications - allows you to be emailed whenever a new build is in progress, excellent if you have team members all working on the same repo. 
* Environment variables - Add key/value pairs to display/use in your NextJS App
* Access control - add a username and password to protect your site until it's ready for public viewing.
* Amplify Studio - Add a full backend system to administer your website, the power of AWS with the simplicity of Amplify.

For more reading please see the [AWS Amplify Documentation](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html) 


NextJS Websites Hosted with Amplify


# What is Lighthouse?

First off, if you do not know what Lighthouse is yet, and you're a web developer then Oh Boy! Are you in for a nice treat to add to your website list of tools.

To access it it, open your webpage in an incognito window (to minimize plugins loading) then right click in the webpage, choose "Inspect" and up will pop the console tab, click the "Lighthouse" tab at the top and you are now ready to run a report:

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-1.1.avif" type="image/avif">
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-1.1.webp" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-1.1.jpg" alt="Lighthouse Ready To Start" width="800" height="329">
</picture>

For now lets skip the "Progressive Web App" and "Publisher Ads" and just focus on the ones shown selected in the image above... now choose either mobile and Desktop and hit the "Generate Report" button!

## What score should I be aiming for? 

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-2.avif" type="image/avif">
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-2.webp" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-2.jpg" alt="Lighthouse Performance Score" width="800" height="580">
</picture>

I think you know the answer... 100 for everything is what you need to be aiming for, but the question is how important is this? 

Lets look at scores of the homepages of some of the worlds biggest companies:

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-amazon.avif" type="image/avif">
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-amazon.webp" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-amazon.jpg" alt="Lighthouse Amazon Score" width="600" height="155">
</picture>

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-apple.avif" type="image/avif">
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-apple.webp" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-apple.jpg" alt="Lighthouse Apple Score" width="600" height="156">
</picture>


<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-facebook.avif" type="image/avif">
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-facebook.webp" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-facebook.jpg" alt="Lighthouse Facebook Score" width="600" height="158">
</picture>

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-tesla.avif" type="image/avif">
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-tesla.webp" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-tesla.jpg" alt="Lighthouse Tesla Score" width="600" height="155">
</picture>

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-google.avif" type="image/avif">
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-google.webp" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-google.jpg" alt="Lighthouse Google Score" width="600" height="159">
</picture>


...So all not bad, but heck not even Google got themselves 100% in each area! Why is this you may ask? Well for a start, and let's face it, these sites are so god dam big that they don't need to have perfect scores, they are not starting out and need to worry about tweaking to perfection in order to get 100 in each section, also, and more importantly there could be business critical components/functionality of their pages that have a significantly higher impact to a) their business and b) the users experience that override any impact of a "not quite perfect" Lighthouse Audit.

For businesses that are already established you can see how scores such as these are justifiably good enough!

### Yes but what about me? 

Well, you my friend, if you are just beginning on your web development journey then having a high a score as possible really matters if you want to start getting noticed by the big search engines. 
Google now includes these lighthouse scores into their page ranking algorithms so on top of making sure you have good quality content, meta tags and back links you now need to stay on top of these vitals as well. 

Whenever it comes to search engines you always have to think of it like this:

> When I'm browsing the internet on my sofa how impatient am I? 

...I bet like 99.99% of people if you click on a link, and you get a blank page, that flickers a bit, loads the top menu, judders, flicks on and off again... and 5 seconds in it's still only loaded an advert and you've not even got close to what you're looking for then you'll immediately get fed up and be annoyed as f🤬ck!

Well Googles job is to try and please as many users as possible, that's why they make so much money you see! The better they make your searches, the more you use them and the more money they make! It's that simple, so all the time they are constantly trying to weed out the shit websites and only serve up the websites that gives their users the info they want and as quickly as they can get it! 

By focusing on getting as high a Lighthouse score as possible, and trying to always keep it high as you make updates to your websites will be 1 extra significant step in keeping your website listed just above everyone else out there! 

### How do I do this? 

Well, this article was written to mainly answer the question of if I need a high lighthouse score or not (which is Yes of course!) and the Lighthouse Audit itself will give you hundreds of useful tips 
on how to fix any of the parts it finds need attention, but my overall advice to anyone would be start with these:

1. Use a decent front end framework such as React and NextJS to build your main pages at build time
1. Try and reduce unused CSS by using a framework such a [TailwindCSS](https://tailwindcss.com/) 
1. Host in a cloud provider that can copy your front end code to multiple Edge locations around the globe such as [AWS Amplify](https://aws.amazon.com/amplify/), [Microsoft Azure](https://azure.microsoft.com/en-gb/), [Google Cloud](https://cloud.google.com/), [Vercel](https://vercel.com/) etc - or even use a Service such as [CloudFlare](https://www.cloudflare.com/) on top of your existing server. 
1. Optimise all your images as much as possible making sure to have the latest formats supported such as .webp and .avif and use the &lt;picture&gt; tag to let supported browsers load the format they prefer:

```html
<picture>
    <source srcset="example.avif" type="image/avif">
    <source srcset="example.webp" type="image/webp">
    <img src="example.jpg" alt="Do I need a high Lighthouse Score?" width="800" height="600">
</picture>
```

5. Focus on reducing image size above quality... I know it's tempting to try and make each image look as crisp as you can on your lovely retina screen, but remember most users don't care as much as you do about that! Speed is king!

...these are just a tiny handful of pointers, and I could spend hours talking about many more, but I'll leave this here as a starting block for you! 

Enjoy!



Do I need a high Lighthouse Score?


# Contact Us Emails with AWS SES

> Easily link up your websites contact us form to send you emails from verified users.

If you have ever developed a website, then you'll know there are always those standard types of pages that you always add to the menu first i.e. "Home", "About", &amp; of course "Contact Us" - then that last one, the contact us page generally always has a simple web form that users can send you messages through. You can use 3rd party services to handle this for you, you could link this up to a database
or you could process it using say PHP on your web server. 

However with todays frontend frameworks such as NextJS we can easily build our own cost effective (very very cost effective) by simply making use of AWS "Simple Email Service" or SES as it's known and providing API end point(s) to link our form up to.

Technologies used: AWS, SES, Lambda, API Gateway, Serverless, NextJS, Typescript, Google ReCaptcha - For this guide you'll need basic knowledge about AWS and should already have an IAM account and credentials ready.

All files in this guide are available in my [Github Repo](https://github.com/joemore/serverless-aws-ses-lambda-emails) 

### Users Perspective

As far as the user is concerned they will perform these actions:

1. They visit the website
1. They go the contact us page
1. They enter their email address, name and a message
1. They tick the "I'm not a robot" box
1. They hit the send button
1. Email gets sent! 👏 

### Developer Perspective

1. User submits their name, email, message and Google ReCaptcha Token
1. Axois posts this to the NextJS /api/send-email/ path
1. NextJS API then forwards this to our API Gateway End point
1. Lambda file checks the ReCaptcha Token, and users details then sends to email using SES service
1. Sends back SUCCESS message once email has been sent. 

### Lets get started...

So in order to get this up and running we are going to make use of the [ServerLess.com](https://www.serverless.com/) framework, that lets us deploy our AWS infrastructure from a single bit of code (I will be adding another blog article about that soon) - but if you haven't heard of Infrastructure as Code (IaC) before then I suggest you checkout some CloudFormation, ServerLess or Terraform tutorials. 

So if you haven't installed it then [follow the steps here](https://www.serverless.com/framework/docs/getting-started), and then you will also need to have your AWS IAM credentials stored in your `~/.aws/credentials` file like this:

```powershell
;This is a comment
[YourProfileName]
aws_access_key_id = KEY_GOES_HERE
aws_secret_access_key = SECRET_GOES_HERE
```

### Google reCAPTCHA

Next we want to create ourselves a Google reCAPTCHA key and secret for our website, this is fairly easy, you just need to go to [https://www.google.com/recaptcha/admin/](https://www.google.com/recaptcha/admin/) and add your domains, I'm using the V2 checkbox in this example. For now also add your localhost domains if you'd like to test locally (just remember to remove these afterwards)

![Google reCAPTCHA](https://cdn.3dnames.co/uploads/joemore.com/google-recaptcha.webp)

...Hit submit, and then copy down the Key and Secret it gives you. 

### SES Register Email/Domains

Now in your AWS account navigate to your [Simple Email Service](https://eu-west-2.console.aws.amazon.com/ses/home?region=eu-west-2#) (Note: I'm using region `eu-west-2` in this example) - and 
add either the email addresses you wish to send from and to, or simply add your entire domain. I won't go into depth here on how to do this, but it's fairly easy to follow the steps within the AWS console. 

### Now run our ServerLess Script

Ok, now we have all the bit's required, we can now deploy our Lambda function with API End Point using the serverless script, so once you've downloaded the git repo from above, create a `.env` file in 
`./serverless/contact-form/.env` and edit it's contents:

```powershell
REGION=eu-west-2
IAM_PROFILE=YourProfileName
FROM_EMAIL=contact@yourdomain.com
TO_EMAIL=you@yourdomain.com 
RECAPTCHA_SECRET=your-google-secret-key
```

Next, make sure you're in the `./serverless/contact-form/` directory, and edit the `serverless.yml` file "service" to change testwebsite-contact-form to something more descriptive and to match your website name i.e. I changed mine to `joemore-com-contact-form` (For some reason these could not be set in the .env file! Maybe a bug at the time of writing 🤷‍♂️)

Now, rum `npm i` to install any dependencies, and then run `sls deploy` to deploy it to your AWS account. It should take a few minutes to deploy, but once its done it should return you back an endpoint URL like this:

```powershell
Serverless: Stack update finished...
Service Information
service: joemore-com-contact-form
stage: dev
region: eu-west-2
stack: joemore-com-contact-form-dev
resources: 11
api keys:
  None
endpoints:
  POST - https://xxxyyyzzz.execute-api.eu-west-2.amazonaws.com/dev/contact-us
functions:
  contactUs: joemore-com-contact-form-dev-contactUs
```

Now we have our backend AWS/SES/Lambda system ready to send us emails once we send it the correct information. We also have our reCAPTCHA key - using both of these we can now plug this into our Front End website. In my repo I've included a demo NextJS site that makes use of the NextJS `/api/` path, as this allows us to effectively hide our AWS endpoint. You can either use this demo frontend site as a basis for you're own or write a new one from scratch!

I built this websites [contact us page](/contact/) using a similar method... although I expanded to code a bit more to do extra error checking and handling.

Good luck, and please let me know if you have any improvements suggestions? 

Joe


This is Joemore.comMy Personal blogging Website

What you can find on my website

Latest blogs