C.S. Rhymes

Hosting a Next.js site with AWS Elastic Beanstalk

Thu, 05 Feb 2026 00:00:00 +0000

I thought I’d share some learnings about how to host a Next.js site with AWS Elastic Beanstalk. This is a minimum configuration to get a basic site up and running.

Getting started

In this example, we are going to create a new Next.js project, but the process should apply to existing projects too.

The following command creates a folder called ‘my-app’ and creates a new Next.js app

npx create-next-app@latest my-app --yes
cd my-app

We need to create a few files so that the Next.js app is built on the server before it is deployed, then we need to tell AWS Elastic Beanstalk how to start the Next.js project. There is also a little configuration that will help our site deploy.

Hooks

When you set the platform to node.js, Elastic Beanstalk should automatically run npm install to install your dependencies, but it doesn’t automatically run the next build that is needed for a production site.

There are a couple of ways that you can get around this. One way is to build your app locally and zip it up, then deploy that build, or you can add some hook scripts to run the build on the server. We are going to run the build on the server, as this allows us to set environment variables in Elastic Beanstalk and use them when the site is built.

Beanstalk offers both deployment hooks and configuration hooks.

Deployment hooks are run when you push up code changes and configuration hooks run when you update configuration or environment variables through the web console or CLI.

When you update an environment variable, you need to re-run next build to build the code with the latest environment variables.

Make a .platform directory in your project root, then hooks and confighooks directories, then create a predeploy directory within each.

.platform/
- hooks/
  - predeploy/
- confighooks/
  - predeploy/

We can create a 01_build.sh script file in both the .platform/hooks/predeploy and .platform/confighooks/predeploy directories to run the build when either the code is pushed or the config is changed.

#!/bin/bash

set -e

cd /var/app/staging
npm install
npm run build

We need to use the predeploy hook as this runs after the code has been checked out, but before the code is deployed.

Beanstalk creates a /var/app/staging directory to do the build work,
It then deletes the /var/app/current directory,
It then renames the /var/app/staging directory to /var/app/current for your live app
Then it starts up the service

More information about platform hooks.

Procfile

Beanstalk has a default run command of npm start but we want to specify the port number so nginx is listening on the correct port. We can customise the start command using a Procfile in the project root.

web: node_modules/.bin/next start -p $PORT

More information on the Procfile.

Setting the server type

By default, Beanstalk uses t3.micro EC2 servers. From my initial testing, the build time took too long and actually timed out the deployment.

We can define the servers we want to use in our build with a config file. Create an .ebextensions directory in your project root, then create a file called next.config. The name doesn’t really matter but it’s handy to know these are settings that are useful for Next.js setup.

Paste the below into the next.config file and save it. This will:

Use the t4g.medium server as a minimum which has 4GB of RAM and 2 vCPUs. Feel free to try lower spec servers and see if it works for you.
Set nginx to listen on port 3000
Set the environment to launch a single instance. This will save on costs for this example, but for a production site you probably want a load balanced environment and multiple servers running.

option_settings:

  # Min 4GB RAM per instance for Next
  # The next build times out with micro servers
  aws:ec2:instances:
    InstanceTypes: t4g.medium, t4g.large
    
  # Configure the port the proxy server (nginx) listens on
  # https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/nodejs-platform-proxy.html
  aws:elasticbeanstalk:application:environment:
    PORT: 3000
    
  # Launch a single EC2 instance without a load balancer
  aws:elasticbeanstalk:environment:
    EnvironmentType: SingleInstance

Creating a beanstalk application

Now we have our files in place we can create an application using the Elastic Beanstalk CLI. You need the AWS CLI and the Elastic Beanstalk CLI, as well as configuring single sign on for the AWS CLI.

In the below examples we are using my-aws-profile as the AWS Single Sign On profile for our AWS account.

The application is the container that can have many environments, such as production, staging, etc.

Let’s create a Beanstalk app called example-next

eb init example-next --profile my-aws-profile

This should automatically recognise that you are using node.js from your project files. Select the version of node you would like to use and follow the instructions to either create a new key pair or use an existing key pair for SSH access.

The process takes a few minutes to run to generate the application.

Creating a beanstalk environment

Once we have an application, we can then create an environment and deploy our app. The Elastic Beanstalk CLI will zip up your project and upload it to an AWS S3 bucket. As Elastic Beanstalk automatically runs npm install we can remove the node_modules directory from our project before running the create or deploy commands to make the upload smaller.

eb create staging --profile my-aws-profile

This will zip up your code and upload it to the S3 bucket that was created when we initialised the environment. It will then create the resources it needs, along with an EC2 server.

When the EC2 server is ready, it will then copy the code into the staging directory, run npm install, then the predeploy hook and then move it to the current folder and run the command in our Procfile. It may take a bit longer the first time this is run as it has to create the environment and the EC2 server first. It should be quicker when deploying updates.

Opening the environment

To see our running Next.js app, run the below and it should launch a new browser window for you.

eb open staging --profile my-aws-profile

Deploying updates

Let’s say we change our app code and want to deploy the latest version to our existing staging environment. This can be done with the following command. You use eb deploy rather than eb create as the environment already exists. The staging in the below command is the name of the environment you want to update.

eb deploy staging --profile my-aws-profile

This command will take a few minutes to run as it will build your Next.js app on the EC2 server before deploying the build and starting the server.

Adding environment variables

You can add environment variables using the web console or the CLI. When you update the environment variables it should run the confighooks we set earlier. This means it will rebuild your app using the latest environment variables, deploy it and then start it up.

Photo by Christina Morillo on StockSnap

Creating a links page with Bulma Clean Theme

Sun, 23 Nov 2025 00:00:00 +0000

I’ve seen a few posts recently asking what other authors use for their website. There are many options available, but sometimes you just want a single page with links to your social media profiles and links to your books. This is where Bulma Clean Theme and GitHub pages can come to the rescue.

The below may seem a bit of a different workflow to begin with from other website builders, as it is defining content and configuration in files instead of through a user interface. It will get easier and more familiar the more you use it.

Here is an example Links Page, showing what we will achieve by the end of this article.

Forking the LinksPage repo

Create a GitHub account (if you don’t already have one)
Head over to https://github.com/chrisrhymes/LinksPage
Press the Fork button at the top right
Select your user as the owner
Your repository must be named <user>.github.io, replacing <user> with your username.
Press Create fork

Editing your site

So now you have a bunch of files in your repo, but these have sample content in so we need to modify the files to have your content.

We can open up a code editor in GitHub Codespaces. On your repo’s code tab, click the green Code button, then select the Codespaces tab, then click the + to create a new codespace. If you already have a codespace running then select it from the list.

Create an images folder

Create a folder for your images in the root of your repo called images. You can upload the images for your site into this folder and reference them from the other pages using /images/image-file-name.jpg style of paths.

Update the _config.yml file

The _config.yml file contains the sitewide settings for your site.

Update the title to your author name or pen name
Update the description to describe your books
Update the baseurl to be empty """
Update the list of social networks to point to your profile pages

Update the index.md file

This is the file for your homepage. It has a section at the top which is called front matter, which is the configuration for the page. The front matter is contained within the --- at the top and the bottom. Below the second --- is the page content and can be written in markdown format.

This page uses the links layout from Bulma Clean Theme. The front matter is written in yaml format.

Have a read of the Links page documentation on the Bulma Clean Theme website for full instructions, but essentially the links are broken into sections so each section of links can have a title and then a list of links below.

link_sections:
- title: The section title
  links:
    - name: Read the docs
      link: /docs/
      image: https://picsum.photos/id/69/300/300
      image_alt: An example image
    - name: Read the Blog
      link: /blog/
      image: https://picsum.photos/id/70/300/300
      image_alt: An example image

Commiting the changes

Once you are happy with your changes to your files, you need to add and then commit the changes to the GitHub repo.

Follow the instructions for how to commit changes in a GitHub codespace

Setting up GitHub pages hosting

Once you have made your content changes, you will want to set up the hosting for your page using GitHub pages. We are using GitHub actions to build and deploy the site. This means it will automatically trigger a rebuild each time you commit the changes to your main branch and then deploy the changes.

Go to the Settings tab from within your freshly forked repositiory
Select Pages from the left side menu
Under Build and deployment select GitHub Actions from the drop down
It should build your site using the built in GitHub Actions workflow
When it has finished, it should have a link at the top of the Pages settings page

Adding a custom domain

The site will be available on <user>.github.io but you probably want to configure a custom domain name.

This will vary based on your domain and the provider. Take a look through the GitHub documentation for how to set up your custom domain.

You should now have your links page up and running and have somewhere you can add links and share on your social media profile pages.

HTML is beautiful

Tue, 07 Oct 2025 00:00:00 +0000

Building a modern website can sometimes lead you to be so far separated from the end result that is sent to the user. Developers can end up focusing on building sites with component based frontend frameworks, fetching data from APIs and installing hundreds of npm dependencies. We can become more interested in writing great code in their chosen programming language than what we serve to the website visitors. How did we get so far away from writing HTML?

HTML is simple

It’s true. HTML is pretty simple. It’s a markup language with some simple tags to tell the browser how to render the content.

If you need a top level heading, put it in a <h1> tag.
If you need a paragraph of text, put it in a <p> tag.
If you want an unordered list, put it in an <ul> tag with <li> for each list item.

This has led some to question whether HTML is a programming language.

Maybe that’s why developers feel the need to abstract their time away from HTML? Make it a bit more complicated to feel like they are doing something more technical? I don’t know?

Anyway, check out the HTML elements reference for a full breakdown.

HTML is future proof

The first ever webpage written with HTML can still be viewed to this day. This displays that it is backwards compatible with modern browsers, but if you think about it the other way, it also means that it is future proof.

HTML is graceful

There are different specifications for HTML, with HTML5 being the most recent, but HTML5 tags will degrade gracefully in older browsers. Unlike JavaScript which stops rendering when an error occurs, HTML will gracefully continue rendering the rest of the page.

For example, if the old browser finds an article or section tag then it will be rendered as a span.

On a side node, HTML5 still feels like a new thing to me, but after looking it up I discovered it was first released in January 2008!

HTML5 was first released in a public-facing form on 22 January 2008, with a major update and “W3C Recommendation” status in October 2014.

https://en.wikipedia.org/wiki/HTML5

HTML is responsive

If you have been working in web development for a few years (ok, quite a few years) you may remember creating fixed width layouts with tables, then maybe using divs, then having to build mobile specific versions of websites, then responsive websites where the same website adapts to the device and screen size that is being used to view the website.

Haven’t we come a long way!

Well, no not really, because if you think about it, HTML with no CSS was already responsive. Content in a paragraph tag automatically wraps to the screen size. Developers forcing content into a fixed width layout broke HTMLs default flowing nature.

HTML is beautiful

If we want the user to click on something on the page to submit a form, then we could create a div and give it some styles to make it square with a fancy border and some shadow, then add a JavaScript listener so we can perform an action to submit the form when the user clicks it.

Or, we could use an input with type ‘submit’ that does all that for us.

<form>
  // More form content
  <input type="submit" value="Submit" />
</form>

In this day and age of React components and endless frontend build complexities and npm dependencies, it’s sometimes easy to forget what HTML can already do for you out the box.

Keep things simple where you can and make the most of built in and widely supported features where possible.

Fixing a few SEO issues with my author website

Sat, 23 Aug 2025 00:00:00 +0000

When I launched my cozy mystery series, The Little-Astwick Mysteries, I decided to create a new website to promote it. But I made a few mistakes with SEO that have led to a few issues with Search Engine Optimisation (SEO). Here is how I fixed them.

www or non-www subdomain

The site is built using Jekyll, which has a _config.yml file where you can specify your site_url that is used to build all the links and the sitemap. I set the site_url to www.littleastwick.co.uk, but the configuration in Netlify was set to use littleastwick.co.uk (without the www) as the primary domain.

What was the impact?

A simple mistake, but it meant lots of redirects from the www addresses to non-www addresses and a conflict between the generated sitemap file and the pages being served to visitors.

Search engines see each sub domain as a separate site. So www.littleastwick.co.uk is a different site to littleastwick.co.uk.

In essence, I was telling search engines a list of urls on one subdomain, but when Google tried to crawl them it would be redirected to another domain (the non www domain).

How was this fixed?

I host my site with Netlify. This was fixed by updating the ‘Domains configuration’ in Netlify to set the www address as the primary domain. Netlify now directed visitors to the pages with the www prefix and the sitemaps matched the subdomain correctly.

Of course, this is just for Netlify. The way to resolve this will vary depending on your hosting provider. Some have easy to use settings, whereas others may require you to edit configuration files. You may also need to update DNS (Domain Name System) settings to fix this issue, so check with your provider or speak to a developer, before you change anything.

Pitfalls avoided

The other saving grace with this was that Netlify is clever enough to only serve the site on one of the domains. If it was served on both then Google may have seen both sites and listed them separately in the search results or thought the site was duplicating content on purpose.

Permalinks

Jekyll has the option for you to set the permalinks of your pages. This is the format of the url for the generated page. For blog posts it could have the year, month and day of the post in the url. For normal pages it defines if the page should end in a forward slash / or index.html or custom-page-name.html.

I didn’t set a value for the permalinks thinking it all worked and was ok with whatever defaults Jekyll decided to use.

What I didn’t realise was that Netlify allowed you to visit the url ending in .html, but also visiting the page without the .html, or the url that ended in a forward slash. Some pages in the site directed visitors to the page without the .html, but the sitemap pointed search engines to pages with the .html.

What was the impact?

The result of this was lots of pages with duplicate content. Many pages had canonical urls redirecting search engines to the page with .html. A canonical url is a way of telling search engines what the true source should be and what you prefer to be shown in search results.

How was this fixed?

My resolution to this was to add permalinks: pretty to the _config.yml file. This meant the links in the built site and the sitemap now all end in a forward slash instead of .html.

I am fully expecting there to be some fall out of this in the short term as search engines will have to reindex the site again with the updated urls, but hopefully it should resolve these issues in the long term.

Potential pitfalls avoided

The bonus is that if someone visits an old link with the .html suffix, then it redirects the page to the new permalink ending with the forward slash suffix. Search engines should see these redirects and hopefully update their indexes over time to use the updated url.

404 page

Whilst I was testing all this out, I also realised that I didn’t have a 404 page for my site.

What was the impact?

If someone had visited a broken link, there wasn’t any links for them to easily get to where they needed to be or to easily get to the homepage, just a standard Netlify error page.

How was this fixed?

This was resolved by creating a new custom 404.html page that used the default page layout. This meant it had the header and footer links to be able to navigate to other pages on the site and it had a message stating that it was a 404 error.

There are different settings needed depending on your hosting, so check out the custom 404 documentation.

Conclusion

Hopefully these changes should lead to both a better user experience and a better configured site for search engines to be able to determine what the actual url should be.

I’m going to keep my eyes on the Google Search Console over the next few weeks and see what other items are raised. If you haven’t yet set up Google Search Console, then I recommend you do. It has performance reports to show you how visitors are finding your site, but it also has really useful reports for potential SEO issues with pages it finds.

Ensure you add your sitemap.xml file (create one if you don’t have a sitemap yet) to Google Search Console so it can easily find all your site’s pages and be informed when you create a new page too.

I may need to add some manual redirects from old urls to new urls, but luckily there is a Jekyll redirect from plugin that I can use for that.

What I have learned is to spend more time on the configuration details. This site is quite small and does not many pages, but making these changes on a larger site could result in a much bigger impact to its search rankings and take longer to resolve.

Using Tailwindcss with Codepen

Tue, 29 Jul 2025 00:00:00 +0000

I created a free account for Codepen to provide a demo with my blog post about ‘Creating a custom toggle in TailwindCSS’ but it took me a little while to figure out how to use Tailwindcss with codepen. So, this is what I did to get it working.

Add the Play CDN

Looking at the get started guide in Tailwindcss documentation, it states:

Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN is designed for development purposes only, and is not intended for production.

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

First I copied and pasted the section from the <head> tags in the Tailwind into the HTML section of Codepen, but you shouldn’t do this.

I got a warning in Codepen saying the HTML section is only for content inside the body tags. So this needed to go somewhere else.

Pen settings

Instead of putting the above in the HTML section, you need to open the Pen settings, by clicking on the Settings button with the big cog.

Once in the settings, click on the HTML section on the left, then find the Stuff for <head> section and paste it in there.

Then click Save and close.

Away you go

Now you can start writing your HTML in the HTML section and adding the Tailwindcss utility classes. The page will refresh and display your styled content.

Customising the theme

As the Tailwindcss documentation states, you can also customise your theme by adding a style tag with the type="text/tailwindcss" attribute.

This seems to work in either the main HTML section or within the Stuff for <head> section in the settings.

<style type="text/tailwindcss">
  @theme {
    --color-clifford: #da373d;
  }
</style>
<p class="text-clifford">Test</p>

Photo by Sergei Gussev on StockSnap

Creating a custom toggle in TailwindCSS

Tue, 29 Jul 2025 00:00:00 +0000

I’ve only just started using TailwindCSS, (I know late to the party huh), and I wanted to create a custom toggle switch that looked a bit nicer than a standard checkbox. This blog post goes through some of the thought processes and the tools that Tailwindcss v4 has out of the box that you can make use of.

Starting with the Checkbox

As I said, I wanted a checkbox to look nice, but what was really important to me was that it could still be used as a checkbox so it would be usable with a keyboard and work with Livewire, so when the state was updated the page would also update.

<label>
  <input type="checkbox" />
</label>

I also wanted on and off labels to indicate what was changing when the checkbox was checked or unchecked.

<label>
  <input type="checkbox" />
  <span>Off label</span>
  <span>On label</span>
</label>

Basic styles

I have added some basic styles to make the labels appear side by side using flexbox, round the labels edges, and added the background colour of violet-700. The off label has a white background and the on label has a violet background to match the label background colour.

Next we want to hide the checkbox from view, but still keep it in the page and make it visible to screen readers. We can use the sr-only utility for this.

<div class="inline-flex">
  <label
    class="cursor-pointer flex flex-row rounded-full bg-violet-700 px-2 py-2"
  >
    <input type="checkbox" class="sr-only" />
    <span
      class="mr-2 inline-flex cursor-pointer rounded-full bg-white px-4 py-2 text-black"
      >Off label</span
    >
    <span
      class="inline-flex cursor-pointer rounded-full bg-violet-700 px-4 py-2 text-white"
      >On label</span
    >
  </label>
</div>

Using peer

I need the style of the labels to change based on the state of the checkbox. So if the checkbox was checked then the ‘On label’ should be prominent, but if it was unchecked then I wanted the ‘Off label’ to be prominent.

Tailwind has a peer utility that allows you to style based on a sibling’s state. This was perfect for my needs.

We can add peer to the checkbox class:

<input type="checkbox" class="peer sr-only" />

Then we can add the styles for the checked state for the off label using peer-checked: to swap the text colour and background colours so it has a violet background and white text when the checkbox is checked.

<span
  class="mr-2 inline-flex cursor-pointer rounded-full bg-white px-4 py-2 text-black peer-checked:bg-violet-700 peer-checked:text-white"
>
  Off label
</span>

Then we do the opposite for the on label by making the background white and the text black when the checkbox is checked.

<span
  class="inline-flex cursor-pointer rounded-full bg-violet-700 px-4 py-2 text-white peer-checked:bg-white peer-checked:text-black"
>
  On label
</span>

Now when we click to check and uncheck the checkbox, the highlighted label will also update to reflect whether the checkbox is checked or not.

We can also use the keyboard to focus on the checkbox using tab, then use space bar to check and uncheck the checkbox input, changing the label appearance.

Adding an outline with focus-within

It’s always useful to indicate the focus state of an input, especially for keyboard users. But in our case we have hidden the checkbox, except for screen readers so how can we show the element is focused?

Again, Tailwindcss has you covered with the focus-within utility that lets you apply styles to a parent element when the focus state is within the parent.

We can add an amber outline by using focus-within: on the outer label.

<label
  class="cursor-pointer flex flex-row rounded-full bg-violet-700 px-2 py-2 focus-within:outline-4 focus-within:outline-amber-400"
>
  <!-- Input content here -->
</label>

Now when we focus the state by clicking with the mouse or selecting the checkbox with the keyboard then the outline appears.

Adding a transition

To make the transition between the on and off states a bit smoother and animated we can use Tailwind’s transition utility and add it to both spans.

Here we add transition-all duration-700 ease-in-out to tell tailwind to transition all items with a duration of 700ms and using ease-in-out transition timing feature.

<span
  class="mr-2 inline-flex cursor-pointer rounded-full bg-white px-4 py-2 text-black transition-all duration-700 ease-in-out peer-checked:bg-violet-700 peer-checked:text-white"
>
  Off label
</span>

Final example

See the Pen Untitled by CS Rhymes (@chrisrhymes) on CodePen.

Further improvements

This focuses purely on the styling, but I think further work would be needed to make this fully accessible by adding additional aria attributes to indicate to users the current state of the checkbox.

Photo by Candace McDaniel on StockSnap

Five book blurb writing observations

Fri, 06 Jun 2025 00:00:00 +0000

Amazon KDP gives you a basic text editor for your book’s blurb, but here are five observations that I have made from researching other books. All of the examples are taken from Mystery books in the Amazon UK store.

1. Use bold text

Use bold text in your description to highlight important hooks or tropes to catch the readers attention. Highlighting words or lines helps them stand out from paragraphs of blurb text.

You want to ensure that there is a good mix of plain text and bold text. Use too much bold and nothing stands out!

None of this is true by Lisa Jewell

2. Keep those paragraphs short

Break up your blurb into shorter paragraphs to make them easier to read and digest.

See what I did there…

Just like this example, which also uses short, punchy sentences too.

The Waiting by Michael Connelly

3. Use stars alongside text

Use stars * alongside bold text to help separate sections of your blurb. You don’t have the ability to add heading tags higher than h4 in the KDP editor, so you can be a bit creative with the other tools you do have access to.

For example, you could do something like the following to separate the blurb from some reviews.

***Readers loved this book!***

It should have been you by Andrea Mara

4. Highlight character names

Highlight main character names in bold when introducing them. To me, this will grab my attention if I’ve read previous books in the series and already know the characters, but it will also work great for new series, helping to introduce the new characters!

We solve murders by Richard Osman

5. End on a question

Ending on a question leaves the reader only one choice. If they want to know the answer then they need to buy the book!

None of this is true by Lisa Jewell

Trying it out

I have been through the blurbs for my cozy mystery series, The Little-Astwick Mysteries, and rewritten them to try out these techniques. I plan to write a follow up blog post in the future to let you know if there was any immediate impact.

If you have any blurb writing tactics that worked for you, please share them in the comments!

Photo by Suzy Hazelwood on StockSnap

Creating a Kindle formatted book from Google Docs

Tue, 20 May 2025 00:00:00 +0000

I have seen a few posts on Threads recently asking what software people use to format their books. This is one option out of many, but I thought I would share my current workflow to give authors an insight into the pros and cons.

I use Google Docs to write. This is because I find it easy to use, it’s free, has a grammar and spell checker, and it syncs to the cloud and between my various devices. I have been known to do some writing on my mobile phone whilst sat in a coffee shop and the Google Docs app allows me to easily pick up where I have left off on another device.

I then use Kindle Create to format the book ready for uploading to Kindle Direct Publishing.

Find out more about my books

Writing in Google Docs.

You can just get stuck in and start writing in Google Docs, but there are a couple of things that I’d like to mention that make life easier later on.

Headings

Rather than making your chapter titles simple bold text, try and use headings. For chapters, I use ‘Heading 1’. This offers three advantages.

It looks nice. Okay, that’s not really that important.
It gives you an easy way of jumping between chapters using the links in the Document Tabs. I have found this a life saver when reading back through your manuscript and even more so when it comes to editing.
When you import it into Kindle Create, it can partially detect the headings and automatically insert the chapters for you saving you time and your sanity. For this to work, you also need to insert a ‘Page break’ between each chapter.

Indentation

I have had the tendency to insert an empty line between paragraphs of text. This is probably due to the way I write content form my blog in markdown. This is probably fine for non-fiction books, but fiction books tend to have each paragraph indented, making it easier to read.

I recently updated one of my books in Kindle Create and manually indented each paragraph. All I can say is, I’m glad it was a novella. I still need to go through others and do the same reformatting when I have some time.

You get the gist of what I am saying from this TikTok…

To save you having to do this, you can update the settings so Google Docs automatically indents the paragraphs for you.

Indent a paragraph of text.
Click on the Styles dropdown and then hover over Normal text,
Hover over the arrow on the right
Click on “Update ‘Normal text’ to match”

This should mean that each new paragraph going forward will be indented automatically.

Line spacing

I don’t think this makes a difference to Kindle Create, but I like to up the line spacing from the default 1.15 to 1.5. This makes it easier for me to read (and looks like I have written more words than I really have).

Exporting from Google Docs

Once you have your finished manuscript, you are ready to export. Kindle Create only accepts .doc, .docx or .rtf formats, so we need to export to one of the compatible formats.

Click on ‘File’
Hover over ‘Download’
Click on ‘Microsoft Word (.docx)’

Your manuscript will be downloaded into a Word formatted file.

Importing into Kindle Create

Kindle Create can be downloaded from the Amazon website and supports Windows and Mac. Follow the instructions to install the software and then launch it.

When Kindle Create is open, click on the ‘+ Create new’ button, then click ‘Choose’ in the bottom right.
Next we need to decide the format. For this example we are using ‘Reflowable’ as it is a standard text based book we want to create. After selecting ‘Reflowable’, click the ‘Continue’ button.
Enter the book title. You can also enter the author and publisher if you choose to. Then press ‘Choose File (.doc, .docx, .rtf)’.
Select the file we downloaded from Google Docs and choose ‘Open’. It will start the import process. Once it has completed, press the ‘Continue’ button.
A new screen comes up saying ‘Automatic chapter titles’. This is where setting the chapter titles as Heading 1 and inserting the Page breaks earlier helps us out. Press the Get started button.
Oh no! There are no chapter headings detected??? Don’t panic, press ‘Accept Selected’ and then you will see the ‘Body’ section on the left with the chapter titles.
Click on each chapter within Body, and for each you need to click on the chapter text in the editor and then press ‘Chapter title’ within the ‘Elements on page’ section on the right. Go through all chapters and repeat this process.
This is optional, but I also like to select the first paragraph of each chapter and click on the ‘Chapter first paragraph’ button in the ‘Elements on page’ section. This gives the first paragraph of each chapter a large letter.

Make sure you press save

We have done a lot of hard work getting this far. Make sure you regularly press save and keep your changes.

Now we have all the chapter titles selected, we can easily generate a ‘Table of contents’ by clicking on the + (plus) symbol next to ‘Front Matter’ and selecting ‘Table of contents’ from the dropdown. This will give you a preview of the contents with your chapter headings. Press ‘Ok’ to create them.

Front Matter

It’s up to you what front matter you add to your book, but I would recommend adding a title page and copyright as a minimum. If you have a prologue, then you can also add this to the Front Matter section.

Back Matter

Again, it’s up to you what back matter you want to add to your book, but if you have other books on Kindle then you can add ‘Books by this author’ with the titles and blurb, but also a link to the other books so readers can easily click on the links to buy your other books. This is especially useful if your book is in a series and the reader wants to read the next book.

Themes

There are four themes to choose from. Whilst it’s not loads of options, it ensures that it should always look good to readers. Choose a theme that best suits your book. You can preview how the theme looks using the Preview tool.

Preview

Kindle Create has a handy ‘Preview’ tool that lets you preview the book in tablet, phone and kindle views. This allows you to double check your formatting before it has been uploaded to Kindle Direct Publishing (KDP). You can easily make changes in the editor and then open the preview again to ensure it looks as you expect.

Exporting

When you are happy with the content and your formatting, you can press the ‘Export’ button.

You can export to KPF and EPUB formats. I generally use the KPF format as I can use it for both kindle and paperback formats in KDP.

Once the book has exported, you can create your new book in KDP as normal and upload the .kpf file.

Only one last thing to say is good luck with your new book!

Hosting a Laravel app with AWS Beanstalk

Mon, 07 Apr 2025 00:00:00 +0000

There are lots of possible hosting solutions available for Laravel, from Forge, to Vapor to the new Laravel Cloud. I’ll start out by saying that these other solutions are much easier to get up and running than beanstalk, but I thought I’d share some of the “fun” I had getting it up and running.

If you have to use AWS for hosting, and for whatever reason, you can’t make use of Forge or Vapor, then one potential elastic, scalable solution is AWS Beanstalk.

AWS Beanstalk essentially provides you with a number of EC2 (Elastic Cloud Computing) servers that sit behind a load balancer. If demand increases then more instances can be created. If demand drops then the number of instances drops down to save you costs.

Getting started

Let’s assume you have an existing Laravel app you want to deploy, but if you don’t then you can create a new Laravel app following the Laravel documentation and follow along. We also assume you already have an AWS account up and running.

First you need to install the AWS CLI. The installation method varies per operating system, so follow their guidelines. Once this is installed, I’d recommend setting up the AWS Single Sign On (AWS SSO) and create a profile for your account. For the purposes of this guide, let’s assume your profile is called dev-account going forward.

Next we need to install the Elastic Beanstalk CLI. Why this isn’t included as part of the AWS CLI I don’t know? Anyway, follow the instructions to install and set up the AWS EB CLI.

Beanstalk Application

Right, next we want to create an application in Beanstalk. The application is like a project, and each application can have multiple environments, such as production and staging.

Start by changing directory into your project root, then running the eb init command with the project name and the AWS profile you defined earlier. In this example the application will be called my-laravel-app.

eb init my-laravel-app —profile dev-account

This will ask you some questions about your application. When I ran this it saw the package.json file and assumed it was a node.js project. Ensure you say no it isn’t a node project then choose PHP from the list, selecting PHP 8.4 (or the version you wish to use) for your site.

Ensure you allow SSH from your machine to the EC2 instances and specify a name for the ssh key to use. This will create the key in your .ssh directory.

When the setup has finished it will should have created a .elasticbeanstalk/config.yml file with your settings in your project root. This file is added to your .gitignore file so it won’t be committed to your version control.

Beanstalk Environment Preparation

You can proceed to create an environment and deploy your project, but it may not work without some additional configuration. Here is what I added to get my Laravel app to work with AWS Beanstalk.

Adding PHP Extensions

I quickly found out that the AWS Linux OS for PHP 8.4 doesn’t have php-zip which I needed for my project. If you need this PHP extension you can create the following file in .platform/hooks/prebuild/install-php-zip.sh with the following content:

#!/usr/bin/env bash

yum -y install libzip libzip-devel

# Will enable zip extension in /etc/php.ini

pecl upgrade zip

Putting the script in the prebuild folder tells Beanstalk that you need to run this script before the Laravel app is deployed to the EC2 instance and therefore before the composer install is run.

More information on platform hooks is available in the AWS beanstalk documentation.

If there are any additional PHP dependencies you need then you can either add them to this file or created separate script files within the prebuild folder.

PHP Configuration

The next file that we need to add before we can create your environment configures some PHP settings and installs some packages. The default setting for Beanstalk EC2 instances is to use the project root as the document root, but we need to set it to the public folder.

Create a file called .ebextensions/composer.config and paste in the following.

packages:
  yum:
    nfs-utils: []
    jq: []
    amazon-efs-utils: []
    node: []
    npm: []

option_settings:
  aws:elasticbeanstalk:container:php:phpini:
    document_root: /public
    display_errors: "Off"
    composer_options: --optimize-autoloader

This file will install some dependencies for us to use later through the packages list. The amazon-efs-utils is useful if you want to use AWS Elastic File Store (EFS) to store any files. The node and npm dependencies allows you to build your frontend assets.

The option settings then let us override the default settings. I like to add the optimise autoloader setting when doing composer install on a server.

Frontend configuration

The last file we need to add will take care of our frontend npm dependencies. We have configured Elastic Beanstalk to use a PHP instance, so it will automatically run composer install for us and install our PHP dependencies, but it doesn’t install and build our frontend dependencies. We have to do this ourselves.

To tell Beanstalk to install and compile our frontend assets we can create a .platform/hooks/postdeploy/npm-dependencies.sh file with the following config.

#!/usr/bin/env bash

cd /var/www/html

npm install

npm run production

The postdeploy folder tells Beanstalk to run this after our code has been deployed to the EC2 instance(s). Add and commit your new files to your git repo.

Creating the environment

Ok, we are now ready to create an environment. Let’s start with the staging environment, along with a database for our environment.

eb create staging --database --profile dev-account

This command will prompt you for the database type, the username and password. Make sure you write them down somewhere.

A quick note about the database. If you create a database as part of your environment, then if you delete the environment it will delete your database too. You can change the settings to decouple the database, or you can create a separate database and manually link it to your environment.

The environment will take a little while to provision all the resources it needs to get up and running (especially the database). Once it has finished you can then add the environment variables your Laravel app needs. Rather than creating a .env file on the server, you create the variables through the command line or the AWS web console.

The main variables you will need to add are:

APP_KEY
APP_ENV
APP_DEBUG
DB_CONNECTION
DB_DATABASE
DB_HOST
DB_PASSWORD
DB_USERNAME

The AWS tutorial for Laravel and Elastic Beanstalk suggests that you update your config/database.php file to match their predefined database variables, such as RDS_HOSTNAME, as these are automatically injected into your environment, but it’s up to you how you want to proceed.

Once you add and save these variables it will redeploy your environment and your app should now be available to view.

Sometimes it seems that it doesn’t always run the post build scripts when you edit environment variables. This is very annoying as it means that your frontend assets don’t exist. Sometimes it seems fine, but other times it causes errors. You can manually redeploy the environment using the below:

eb deploy staging —profile dev-account

Running artisan scripts

To run artisan scripts, you can ssh into the EC2 instance using the below:

eb ssh staging —profile dev-account

I have found a couple of issues when running artisan scripts with Elastic Beanstalk.

The environment variables don’t exist to the ec2-user
The ec2-user doesn’t have permission to write to the log file

I discovered the first issue when I tried to migrate the database. It stated that the sqlite database doesn’t exist and would I like to create it. I was confused as I had set the environment variables to use mysql and not sqlite.

After a bit of experimenting I discovered you could set the environment variables to your session by running the below command:

export $( /opt/elasticbeanstalk/bin/get-config --output YAML environment | sed 's/: /=/g' | xargs)

This gets the config variables in yaml format, then replaces the : with = to make it the expected format and then exports them to your session. I’ll be honest, it’s very annoying having to do this.

For the second issue of the ec2-user not being able to write to the log file, I have found you can su to the webapp user and then run artisan commands using that user.

An important disclaimer here! I’m not sure this is the best way of doing things so maybe spend some time to find a better solution to these issues.

Storage

We briefly mentioned storage earlier. The EC2 instances are designed to be throw away instances that can be easily replaced as well as being load balanced. This means we can’t store any content that isn’t in your version control as they won’t exist in new instances that are created.

There are a few possible solutions depending on your circumstances, but to summarise some of the options I’ve investigated, you can either use AWS Elastic File System (EFS) and create a mount point on each instance or you can create an S3 bucket and set your filesystem disk to use S3 and add the relevant environment variables needed for S3.

There is some information on using EFS with Elastic Beanstalk on the AWS documentation site.

A little reminder, as per the database, if you create an EFS as part of your Beanstalk environment, then if you delete the environment it will also delete the EFS and all the content within it.

Configuring HTTPS

The default configuration sets up the environment to be accessible on port 80, so to allow https you need to update the load balancer configuration and add a listener for port 443. How you do this depends on the type of load balancer you are using and whether you want to terminate HTTPS at the load balancer of the EC2 instances, so consult the Elastic Beanstalk documentation for how to get this up and running.

Scalability

One of the main benefits of Elastic Beanstalk is the elastic nature of the system. You can either create a configuration file to specify the minimum and maximum number of instances or you can do this through the web console. You may want to do this through the web console so you can specify different values for production and staging environments. You pay for what you use, so you probably don’t really want more than you need on your staging environment.

In the web console, go to your environment and then the configuration section. From here, edit the capacity configuration and set the minimum and maximum instances for your environment and then click the Apply button.

It will redeploy your environment and create any additional instances you have specified to meet the new minimum. When you get more traffic it will increase the number of EC2 instances up to the maximum you have set.

Conclusion

Hopefully you will now have your staging environment all up and running with AWS Elastic Beanstalk. As you can see by the length of this guide, there is quite a lot of configuration to get things up and running, as well as various annoyances along the way.

I normally use Laravel Vapor to host my projects and you can tell it was built to work for Laravel and make the developer experience silky smooth. I am interested to try out Laravel Cloud at some point in the future too as that is all about shipping your app.

Photo by Burst on StockSnap

Testing window.open() in JavaScript with Jest

Sun, 01 Dec 2024 00:00:00 +0000

I recently had to write a test for a React component that opened a new browser window. To open the new window I made use of window.open() in my code. This made the component easy to write, but I had to think a bit differently about how to write the test for this.

More information on the window.open() method is available on mdn web docs.

To set a bit or background, I had a React component that had a simple form with a couple of inputs. When the user completed the inputs and submitted the form it opened a new window to a specified URL with the inputs as URL parameters.

The component to test

Here is a very simplified version of the component as a demonstration. I’d recommend using something like react-hook-form to add validation to your form.

// MyForm.js
import React, { useState } from "react";

const MyForm = ({ baseURL }) => {
  const [name, setName] = useState("");
  const [subject, setSubject] = useState("");

  const onSubmit = () => {
    window.open(
      `${baseURL}?name=${encodeURIComponent(name)}&subject=${encodeURIComponent(
        subject
      )}`,
      "_blank"
    );
  };

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="name">Name</label>
      <input name="name" id="name" onChange={(e) => setName(e.target.value)} />
      <label htmlFor="subject">Subject</label>
      <input
        name="subject"
        id="subject"
        onChange={(e) => setSubject(e.target.value)}
      />
      <input type="submit" value="Submit (opens in new window)" />
    </form>
  );
};

export default MyForm;

Now we have our component, lets think about the test for it.

What I’d normally test

Normally I would test what has been rendered in my component, using assertions such as expect the component to have text content or assert the url is what is expected (using window.location.href), but I quickly realised that approach won’t work in jest for this example.

Window.open opens a new browser window, so it doesn’t affect the component we are testing. We can’t see what is inside the new window or what its url is as it is outside of the scope of the component we are testing.

So how do we test something that is outside of what we can see? We don’t actually need to test that a new window is opened as that would be testing the window interface’s functionality and not our code. Instead, we just need to test that the window.open method is called.

Mocking window.open()

Therefore we need to mock window.open() and test that it was called inside our code.

// Mock window.open
global.open = jest.fn();

Now we can set the values in the inputs, submit our form and then test that the window.open was called. We can use fireEvent to set the values of the inputs and pressing the submit button.

fireEvent.input(screen.getByLabelText("Name"), {
  target: {
    value: "Test Name",
  },
});
fireEvent.input(screen.getByLabelText("Subject"), {
  target: {
    value: "An example subject",
  },
});
fireEvent.submit(
  screen.getByRole("button", { name: "Submit (opens in new window)" })
);

It’s worth having a read through the documentation for the considerations for fireEvent. You may want to use user-event instead depending on your use case.

We want to await for the method to run. We can do that using waitFor().

await waitFor(() => {
  expect(global.open).toHaveBeenCalled();
});

To ensure we are not opening loads of new windows, we can check that we only call window.open once.

await waitFor(() => {
  expect(global.open).toHaveBeenCalledTimes(1);
});

We can also check what arguments the method is called with, passing in the URL we expect as the first argument and the target as the second.

await waitFor(() => {
  expect(global.open).toHaveBeenCalledWith(
    "http://example.com?name=Test%20Name&subject=An%20example%20subject",
    "_blank"
  );
});

The complete test file

Here is the complete test file for your reference.

// MyForm.test.js
import React from "react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import MyForm from "./MyForm";

describe("MyForm test", () => {
  beforeEach(() => {
    // Mock window.open
    global.open = jest.fn();
  });

  it("opens a new window with the correct url", async () => {
    render(<MyForm baseURL="http://example.com" />);

    fireEvent.input(screen.getByLabelText("Name"), {
      target: {
        value: "Test Name",
      },
    });
    fireEvent.input(screen.getByLabelText("Subject"), {
      target: {
        value: "An example subject",
      },
    });
    fireEvent.submit(
      screen.getByRole("button", { name: "Submit (opens in new window)" })
    );

    await waitFor(() => {
      expect(global.open).toHaveBeenCalled();
      expect(global.open).toHaveBeenCalledTimes(1);
      expect(global.open).toHaveBeenCalledWith(
        "http://example.com?name=Test%20Name&subject=An%20example%20subject",
        "_blank"
      );
    });
  });
});

Photo by energepic.com on StockSnap

C.S. Rhymes

Hosting a Next.js site with AWS Elastic Beanstalk

Getting started

Hooks

Procfile

Setting the server type

Creating a beanstalk application

Creating a beanstalk environment

Opening the environment

Deploying updates

Adding environment variables

Creating a links page with Bulma Clean Theme

Forking the LinksPage repo

Editing your site

Create an images folder

Update the _config.yml file

Update the index.md file

Commiting the changes

Setting up GitHub pages hosting

Adding a custom domain

HTML is beautiful

HTML is simple

HTML is future proof

HTML is graceful

HTML is responsive

HTML is beautiful

Fixing a few SEO issues with my author website

www or non-www subdomain

What was the impact?

How was this fixed?

Pitfalls avoided

Permalinks

What was the impact?

How was this fixed?

Potential pitfalls avoided

404 page

What was the impact?

How was this fixed?

Conclusion

Using Tailwindcss with Codepen

Add the Play CDN

Pen settings

Away you go

Customising the theme

Creating a custom toggle in TailwindCSS

Starting with the Checkbox

Basic styles

Using peer

Adding an outline with focus-within

Adding a transition

Final example

Further improvements

Five book blurb writing observations

1. Use bold text

2. Keep those paragraphs short

3. Use stars alongside text

4. Highlight character names

5. End on a question

Trying it out

Creating a Kindle formatted book from Google Docs

Writing in Google Docs.

Headings

Indentation

Line spacing

Exporting from Google Docs

Importing into Kindle Create

Make sure you press save

Contents

Front Matter

Back Matter

Themes

Preview

Exporting

Hosting a Laravel app with AWS Beanstalk

Getting started

Beanstalk Application

Beanstalk Environment Preparation

Adding PHP Extensions

PHP Configuration

Frontend configuration