DEV Community: C.S. Rhymes

Hosting a Next.js site with AWS Elastic Beanstalk

C.S. Rhymes — 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

HTML is beautiful

C.S. Rhymes — 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

C.S. Rhymes — 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.

Creating a custom toggle in TailwindCSS

C.S. Rhymes — 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 usingpeer-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

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

Testing window.open() in JavaScript with Jest

C.S. Rhymes — 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

Adding social icons to the Bulma Clean Theme footer

C.S. Rhymes — Tue, 03 Sep 2024 00:00:00 +0000

Version 1.1.0 of Bulma clean theme has been released. It has a small update that allows you to easily add social media links to the footer of your site.

Font Awesome update

It sounds like a small feature update, but I wanted to create a blog post about it as it required updating to Font Awesome v6 to get the latest social media icons.

When upgrading to v1.1.0 of the theme, please ensure you take a read through the changes in Font Awesome and see if your site is affected by any of the changes.

Font Awesome 6 - What’s changed?

Adding social links to the footer

To add social media links to the footer you need to add a social key to your _config.yml and add the relevant social network names with links to your profiles.

For example:

social:
  facebook: https://www.facebook.com/
  instagram: https://www.instagram.com/
  threads: https://www.threads.net/
  tiktok: https://www.tiktok.com/
  x: https://www.x.com/
  youtube: https://www.youtube.com/

For more information take a look at the theme documentation.

Building a landing page for your book

C.S. Rhymes — Sat, 15 Jun 2024 00:00:00 +0000

This post follows on from my last post about using your website to promote your ebooks. The first step of the article explains that you need to make a website, but didn’t go into too much detail. This post aims at explaining how you can build a landing page for your book with Bulma Clean Theme.

I’ve recently added a new promo page layout which can be used to build a landing page for your book. You can see a demo page here.

To make it easier to get started I have created a repository that you can fork to get started. Don’t worry if you don’t understand the jargon right now, we will walk through the set up step by step.

Creating a GitHub account.

If you don’t have a GitHub account then you can sign up for one for free. From the github.com homepage, press the Sign up button on the top right and follow the instructions.

Forking the repository

Rather than starting from scratch, I have create a starter repository that you can use to build from.

Go to the example-promo-page starter repository and click on the Fork button towards the top right of the page.

Give your fork a name and press Create fork.

Making changes

With GitHub you normally clone the code, edit your content on your computer and then use git to commit your changes and push them back up to GitHub. Don’t worry. To simplify the process, we are going to use the ‘Edit in github.dev’ editor.

To start the GitHub.dev editor, press . whilst viewing your fork in GitHub. More information is available on the GitHub docs.

You should see an editor appear with the list of files on the left of the screen.

Edit the configuration

The site wide settings are stored in the _config.yml file. Edit the following.

title - set this to your author pen name
description - set this as a description of your website.
base_url - set this to ""

Add images

Go to the img folder and add an image for your avatar. A square cropped image about 400px wide by 400px high should work well here. In this tutorial we will call the image author.jpg. Drag and drop the author image into the img folder.

Now add an image for your book cover. An image cropped to a 800px wide by 1277px high. This is a 2 by 3 image ratio that seems to work well for book covers. Once you have your cropped image you can drag and drop this into the img folder too. Let’s call this image book-cover.jpg for this tutorial.

Update the index.md page

The index.md page is your homepage. There is a section called front matter that is between the two sets of ---. These are the settings and configuration for the page. Below the second —-- is the page content that is used for the about section.

Update the title and subtitle for your book. Use the title for your book name and then the subtitle as your author pen name.
Update the hero_image to the path to your book cover image file that you added to the img folder. As we named it book-cover.jpg, we need to set this to /img/book-cover.jpg.
Update the hero_image_alt text to the name of your book.
Update the hero_link to the link to where you sell your book, such as the amazon store page.
Update the snippet text. This should be a short description of your book.
Update the about_image to our author image, so we need to set it to /img/author.jpg.
Edit the content of the page (below the second ---) and write about yourself and your books. This content is written in markdown format.

For full instructions on this page take a look through the documentation for creating a promo page.

Reviews

To add a few reviews, edit the _data/reviews/book1.yml file. More information is available on the reviews documentation page.

To add a newsletter form, edit the _includes/newsletter.html file. This file has a placeholder form that doesn’t do anything. Copy the code from your form provider for your mailing list, such as Mailchimp, and paste it over the form in the newsletter.html file.

Saving changes

Ensure that you have saved all your changes on each individual file by using cmd + s for Mac or ctrl + s for Windows.

Next, go to the source control tab on the left menu. You should see a list of the files that have been changed. Add a message into the top input box, something like ‘Initial setup’ and then press the Commit & Push button. This will commit your changes to your GitHub repository.

Deploying your site

We are now ready to deploy your site. It’s up to you where you host your site but I would recommend a service that integrates with GitHub which will automatically deploy your changes each time you Commit & Push to GitHub. One such service is netlify, but there are a range of options available. Take a look at the Jekyll deployment documentation for more information.

Domain Name

Hopefully you now have a working promo page for your new book. The next thing to do is get your DNS set up. How you do this depends on your choice of hosting, so take a look at the service you have chosen for getting the domain name set up.

Alternatively, work with a web developer to help get this configured for you.

What’s next?

As stated at the beginning of this article, the promo page is powered by Bulma Clean Theme and has all the built in functionality.

It has a blog page and a demo post that you can use to start blogging. Take a read through the Jekyll Posts documentation to get started with blogging.

You can also customise the colour scheme to suit your branding requirements.

Take a read through the Bulma Clean Theme documentation to see all the options available.

How to promote your ebooks with your website?

C.S. Rhymes — Thu, 06 Jun 2024 00:00:00 +0000

I’m a web developer by trade and a part-time author, so here are a few things that I have done to help promote my books and ebooks using my website and my tech know how from my day job.

Build a website

If you don’t have a website, then start by building one. Easy huh?

At the very least, start with a single landing page so you have a presence on the internet when people search for your name or book title. From here you can direct people to where your book is sold and your social media sites so people can be kept up to date.

I built a website, this website in fact, partly to promote my books, partly to promote my work.

This site is built using Bulma-Clean-Theme, a Jekyll theme that includes product listing pages that you can use to promote your books. If you are interested in development then this may be a way for you to go, but if you aren’t then take a look at site builders or something in between such as WordPress.

The biggest benefit to me of using Jekyll is that I can host it for free with GitHub pages or Netlify, whereas site builders normally come at a monthly cost. There is also no hassle with maintaining a web server as it is a static site. This means the HTML pages are generated into static HTML files and deployed somewhere, in my case GitHub Pages. The way I see it, if you are able to save some money on your website, then you have more to spend elsewhere.

Do what works for you. Pick a solution that is easiest for you to maintain and update, that way, you won’t be put off from making regular updates to your site and it will become part of your routine. Updating little and often, rather than overhauling everything every couple of years, is generally better as return visitors will be encouraged to come back more often and see what is new.

Register a domain name

Once you have your site up and running you need to register a domain name for your website and point it at your new website. Ensure that you own the domain name and not a third party, such as a developer or an agency.

You also want to ensure that you can update your domain name settings so you can point it somewhere else in future, such as to a different website host, if you want to move your website. You don’t want to be stuck and have to buy a new domain in future and have to start all over again.

Your domain should be concise and easy to type in the address bar. This makes it easier for return visitors to check back at a later date without having to rely on a search engine.

Create a blog

I’ve found that a good way of getting visitors to your new site is to create a blog. Like this one! Most of the traffic to my website comes from the blog posts. Once people land on your site they can look around and see what else is on your site.

You can always link to your books from your blog post (see what I did there) which will help visitors to your blog post find your books.

I have heard people say they want a blog, but then I ask them what are they going to write about. They create a single post and then never use it again. I’d suggest writing a list of possible blog post topics and pick the one that you are most excited to write about. If you are excited to write about it then others will be excited to read about it.

Every time you have a new idea for a blog post, ensure you write it down somewhere, otherwise when it actually comes to writing the post, you will be sat in front of an empty screen whilst you try to remember what your great idea was. I use the notes app on my phone to keep my list.

Add interesting titles and meta description tags to your pages

Spend some time thinking about the title and meta description for your page. These appear in the <title> tag and <meta name=“description”> tag in the <head> part of the HTML. This is normally used by search engines results so this is what people that find your site see, so it needs to encourage people to click on that result instead of one of the other links.

Take a look at some best practices for descriptions on the Google Search documentation.

The tile is also used when sharing your link on social media sites. You can go one step further for social media and add additional tags specific to Facebook and X (formerly Twitter), known as OpenGraph.

I use the Jekyll SEO tag plugin to automatically generate the meta tags for my site, but there are also plugins for WordPress to help you generate these tags.

Tell Google and other search engines

You may be lucky and a search engine may stumble upon your website, but why not give it a head start and tell search engines it exists. This can be done through Google Search Console. You provide the url of your site and then verify that you own it, either through adding a meta tag to the code, uploading a file, through Google Tag manager or Google Analytics, or by adding a DNS record. Sounds complicated, but it’s definitely worth doing.

Once you have verified you own the site, you can then submit your sitemap. The sitemap tells Google about all of your site’s pages so it knows they exist and can then crawl the pages and then display them in search results.

So what is a sitemap? It’s an XML file in a particular format that provides a list of your websites pages. Jekyll and WordPress have plugins to create a sitemap for you so you don’t have to manually write out a load of XML and keep it updated.

Each time you add a new page, such as when a new book page or a new blog post is added, it is added to your sitemap and Google should then index the page next time it reads your sitemap.

Add your website address to your social media profiles

People looking at your posts and profile will want to know more about you, so provide them with a link in your profile back to your website. This is especially useful if the social media site shows your public profile to search engines. Each link back to your site helps boost its rankings in search engines.

Share your blog posts on social media

When you have spent so much time writing a blog post, ensure you share it with others. One thing that caught me out, but is probably obvious to most users these days, is that some social sites don’t allow links. Instagram is one example of this. So maybe concentrate on X (formerly Twitter), Facebook, LinkedIn and Threads for sharing links.

Sharing to other sites

I first got real traction for my blog posts after sharing to another site, who then promoted my blog post for me. In my case, the posts I tend to write are about my day job as a web developer using Laravel and JavaScript. I discovered Laravel News, which allows you to submit your links to their site.

Approved links then get published to a Community Links section on their site, but even more importantly, they also share the links on their social media profiles too, as well as sharing the links in a weekly email to their large subscriber base.

Remember to pick sites that are relevant to your subject matter to share to, so don’t submit non Laravel related blog posts to Laravel News.

I am still looking for a site that allows authors to share their blog posts with other authors and readers. If you are aware of one then please let me know!

Share your blog’s RSS feed

Most blogs allow you to generate an XML feed that can be read by other sites to provide links back to your site. Again, for Jekyll, there is a plugin that lets you create a feed for your posts and WordPress has it as a default feature.

As a developer, I found dev.to, which allows you to import posts from your website’s feed. The added bonus of this is that it sets a tag telling search engines that the post was originally created on your website. This is called a canonical link and helps tell search engines where the content originally came from.

Medium.com also allows you to import posts from my website’s RSS feed, again with a canonical link pointing back to your website.

Tell people about your site and your books

Last but not least, tell people in real life. I have to admit I am terrible at this. I have found that your website and blog will quietly sit there unused unless you go out of your way to tell people about it.

You should be proud of what you do and want others to read about it.

Add your website address to your business cards, email signature, wherever you can think of.

Hope that helps

Hopefully there are lots of ideas there to get you started and give your website and blog a boost to help give your books some more visibility.

If you have found this article useful then check out “How NOT to make a Website” by C.S. Rhymes for more information on what not to do when building a website.

Using the GOV.UK Design System with Laravel

C.S. Rhymes — Wed, 29 May 2024 00:00:00 +0000

I recently worked on a project using the GOV.UK Design System with a Laravel project. The GOV.UK frontend provides layouts and accessible HTML components with their own CSS and JavaScript. The two packages worked really well together, so I thought I would provide a quick example of how to get it setup.

Things to consider

Before you use the GOV.UK frontend you must consider the following:

You’re welcome to use the template even if your service isn’t considered part of GOV.UK, but your site or service must not:

identify itself as being part of GOV.UK

use the crown or GOV.UK logotype in the header

use the GDS Transport typeface

suggest that it’s an official UK government website if it’s not

GOV UK Frontend Readme

Creating a new project

First we create a new Laravel project, let’s call it gov-uk-laravel-demo:

composer create-project laravel/laravel gov-uk-laravel-demo

Install npm dependencies

Then we change into the directory and install our npm dependencies.

cd gov-uk-laravel-demo
npm install
npm install govuk-frontend --save
npm install sass vite-plugin-static-copy —dev

Importing the styles

Rename resources/css/app.css to resources/scss/app.scss and add the following content.

$govuk-assets-path: "/build/assets/";

@import "node_modules/govuk-frontend/dist/govuk/all";

The sass variable is updating the default path from /assets/ as we are using vite, which puts everything inside a build folder.

Importing the JavaScript

In resources/js/app.js, update to the following to initialise the govuk-frontend JavaScript.

import "./bootstrap";

import { initAll } from "govuk-frontend";

initAll();

Configuring vite and building

Update vite.config.js to build our scss files (previously css) and copy the fonts and images to the public/build/assets folder using the viteStaticCopy plugin.

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import { viteStaticCopy } from "vite-plugin-static-copy";

export default defineConfig({
  plugins: [
    laravel({
      input: ["resources/scss/app.scss", "resources/js/app.js"],
      refresh: true,
    }),
    viteStaticCopy({
      targets: [
        {
          src: "node_modules/govuk-frontend/dist/govuk/assets/",
          dest: "",
        },
      ],
    }),
  ],
});

Then run npm run build to build the css, js and copy the relevant assets.

Creating a page

Copy and paste the default page template HTML from the documentation page into the welcome.blade.php file.

Remove the script tags at the bottom of the page

<script type="module" src="/javascripts/govuk-frontend.min.js"></script>
<script type="module">
  import { initAll } from "/javascripts/govuk-frontend.min.js";
  initAll();
</script>

Then replace these two lines in the head:

<link rel="manifest" href="/assets/manifest.json" />
<link rel="stylesheet" href="/stylesheets/govuk-frontend.min.css" />

With this:

@vite(['resources/scss/app.scss', 'resources/js/app.js'])

Then run php artisan serve and head to http://localhost:8000 to view our new page.

What next

From here you can start building your app by creating a layout blade component that other pages can reuse, then create reusable components following the HTML examples in the GOV.UK Design System.

Photo by NegativeSpace on StockSnap

Customising Laravel Sail services using the Laravel Build server

C.S. Rhymes — Tue, 21 May 2024 12:00:07 +0000

Laravel offers a quick and easy command to create a new Laravel project that uses Laravel Sail using the Laravel build server. But what if you want to customise what services are installed by default?

The default script

To create a default Laravel build using Docker with Laravel Sail on macOS you can run the following command:

curl -s “https://laravel.build/example-app” | bash

This will create a new Laravel app in the folder called ‘example-app’ with the following services installed by default:

MySQL
Redis
Meilisearch
Mailpit
Selenium

Check out the Laravel Documentation for more information and for how to get started with other operating systems.

Why customise?

The default list of services is probably fine for most use cases, but for one project I was building an API without any web interface. I wanted to streamline the services to speed up the initial set up and remove the services I wasn’t planning on using in the app.

In this case I didn’t need Meilisearch, Mailpit or Selenium in my app. I didn’t need Selenium as I had no interface to test with Laravel Dusk. It also didn’t have a search or the need to send any emails.

Removing services after the install

One way I found to manually remove the services, is to run the default script and then before you run sail up, then manually edit the docker-composer.yml file, removing the services you don’t need. However, this means you have still downloaded docker images that you don’t need, taking time and taking up storage space on your machine.

Removing unneeded Sail services by editing the script

We can modify the default script by adding a with query parameter with a comma separated list of the services we need.

From our example above we only want MySQL and Redis to be setup so we can achieve this by using the following script.

curl -s “https://laravel.build/example-app?with=mysql,redis” | bash

Now when we open up our docker-compose.yml file we can see our PHP container (laravel.test), along with MySQL and Redis. The other services are no longer there as desired.

Adding additional services at install time

We can also add additional services by adding them to the with query parameter comma separated list. For example, the below script will add Memcached to the default services installed.

curl -s “https://laravel.build/example-app?with=mysql,redis,meilisearch,mailpit,selenium,memcached” | bash

Adding services after install

If you want to add an additional service after you have run the script, such as Mailpit to preview emails, then you can use the sail:add artisan command from your project root to add a service.

php artisan sail:add

This will provide a list of available services to choose from. Select from the list and it will add it for you.

How it works

I took a look at the Laravel sail server repo in GitHub to figure out how to customise the services installed. It allows you to set the ‘with’ and the ‘php’ query parameters to define the services and the php version required.

If you do provide a with query parameter then it will use that otherwise it defaults to mysql,redis,meilisearch,mailpit,selenium.

It also validates the list and ensures that the service you specify is within the list of available services. For example, if you try to add nginx to the list of services then it will return a validation error message.

curl -s "https://laravel.build/test-build?with=mysql,redis,nginx" | bash
bash: line 1: syntax error near unexpected token `('
bash: line 1: `Invalid service name. Please provide one or more of the supported services (mysql, pgsql, mariadb, redis, memcached, meilisearch, typesense, minio, mailpit, selenium, soketi) or "none".'

Photo by Wyncliffe on StockSnap

Getting started with React Hook Form

C.S. Rhymes — Fri, 10 May 2024 18:00:07 +0000

I normally develop forms in Laravel, using Livewire where possible. Laravel has some great form validation tools built in that I’m really used to working with and Livewire offers easy to use state management. For this project though, I had to build the form in a React project.

I looked for a package that would provide the validation and state management that I was used to but for React. After a bit of searching I found the React Hook Form package that seemed to offer exactly what I was after. The tagline on their website reads:

Performant, flexible and extensible forms with easy-to-use validation.

It was easy to install using npm:

npm install react-hook-form

Then I could start using it in my form.

The example form

The example form has a text input that is used to enter an email address. The form will submit and just console log out the data for this demo.

import { useForm, SubmitHandler } from "react-hook-form";

interface MyFormInputs {
  Email: string;
}

const MyForm = () => {
  const { handleSubmit, register } = useForm<MyFormInputs>({});
  const onSubmit: SubmitHandler<MyFormInputs> = (data) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label for="Email">Email</label>
      <input name="Email" type="text" {...register("Email")} id="Email" />
      <input type="submit" value="Submit" />
    </form>
  );
};

There is a lot going on here, but let’s start with the interface MyFormInputs. This is where you define the fields for your form, and what type they are. In our example we have Email which is a string.

Once we define our interface, we can then pass it into the useForm so that knows what fields are in your form.

In this example we are passing in an empty object into useForm, but there are some handy options that can be defined here if you want to, such as setting default values. Here we could set a default value for our email field.

const { handleSubmit } = useForm<MyFormInputs>({
  defaultValues: {
    Email: "test@example.com",
  },
});

Take a look at the API documentation for useForm for more information.

When the form is submitted it will call the handleSubmit method from useForm, which will then call our custom onSubmit method that console logs the data. If we press the submit button we will get an object with the key ‘Email’ and the data we typed into the input.

Controlled components

I already had some form components in my project that I wanted to reuse as it would save me a lot of time and reduce risk of duplicating code. React Hook Form allows you to use a Controller component that you can use to render your controlled inputs.

In the code below I am wrapping the TextInput component inside the render method of the Controller. I can then pass in the value and the onChange method to the controlled input and React Hook Form manages the state changes for me.

import { useForm, Controller, SubmitHandler } from "react-hook-form";

interface MyFormInputs {
  Email: string;
}

const MyForm = () => {
  const { handleSubmit, control } = useForm<MyFormInputs>({});
  const onSubmit: SubmitHandler<MyFormInputs> = (data) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="TextField"
        control={control}
        render={({ field: { onChange, value } }) => (
          <TextInput
            name="email"
            onChange={onChange}
            value={value}
            label="Email"
          />
        )}
      />
      <input type="submit" value="Submit" />
    </form>
  );
};

We set the name of the controller to the name of our field ‘Email’ and pass in the control from the useForm. Once we have wired it all up it will act the same as the standard HTML input from the previous example.

Validation rules

Now we want to add some validation rules to our field. We want the field to be required and we want it to be a valid email. The Controller component allows us to pass in rules object with our validation rules.

In the code below, we are adding the rules object with the required rule and the pattern for the email.

<Controller
  name="TextField"
  control={control}
  rules={{
    required: true,
    pattern:
      /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
  }}
  render={({ field: { onChange, value } }) => (
    <TextInput name="email" onChange={onChange} value={value} label="Email" />
  )}
/>

In Laravel there are many validation rules that we can choose from that allow us to validate our input, such as a built in rule for email. Here we have to define the pattern ourselves, which is fine, just a little less convenient.

React Hook Form has less options, but they should cover most of your needs for client side validation. I would recommend doing server side validation on the server receiving the form data anyway.

Now if we submit the form with no value, or without a valid email address it will no longer submit the form. The handleSubmit method checks the inputs against the rules and fails the validation.

But right now we don’t have any feedback for the user to tell them the validation has failed.

Validation messages

The useForm hook has a form state object, which contains an errors object. We can use this to display our errors to the user. We need to update our code so we can use this errors object.

const {
  handleSubmit,
  control,
  formState: { errors },
} = useForm<MyFormInputs>({});

Now we can update our input component. The TextInput component has a boolean flag for isErrored, which when true makes the border a red colour. It also has an errorText method that allows us to pass in the error message.

The isErrored can be checked to see if the errors object has the Email key. If it does, pass in true, which makes the border red.

The errorText needs us to do a bit more work first. Laravel has a lot of predefined error messages that we can use, but with React Hook Form we need to define our own.

This is done by updating the items in the rules object to be an object with value and message keys.

<Controller
  name="TextField"
  control={control}
  rules={{
    required: { value: true, message: "The email address is required." },
    pattern: {
      value:
        /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
      message: "The email address is invalid.",
    },
  }}
  render={({ field: { onChange, value } }) => (
    <TextInput
      name="email"
      onChange={onChange}
      value={value}
      label="Email"
      isErrored={errors.Email ? true : false}
      errorText={errors.Email ? errors.Email.message : null}
    />
  )}
/>

Now when we press submit, it validates the inputs as before, but now the TextInput will have a red border and the error message we defined will display alongside the input.

If we don’t put any value in and press submit, it will display ‘The email address is required.’ and if we put in an invalid email address, such as with spaces, then it will display ‘The email address is invalid.’.

Error summary

Imagine we have a form with several inputs. When we press submit we may not see the validation error as it could be at the top of the form and out of the current view.

We could display a summary of errors at the top of the form and scroll up to it. We need a way of knowing when the validation has failed. React Hook Form has this covered for us too.

We can define a method for when the validation fails, which we will call onSubmitFailed. I’m not going to provide the code here, just giving you an idea of how it could work.

const onSubmitFailed = () => {
  // Scroll to top of form
  // Display error summary
};

Then when we call handleSubmit, we can pass our new method in as the second argument. This callback will run when the validation fails and there are errors.

<form onSubmit={handleSubmit(onSubmit, onSubmitFailed)}>

Conclusion

We have gone from creating a simple form, to managing the state in our controlled components, to showing an error state and validation messages, to showing a summary of all the error messages.

This library is very handy and has lots of really useful features. The documentation seems really great with examples and full API documentation.

Photo by Matt Bango on StockSnap

Using when with the Laravel Http Client

C.S. Rhymes — Sun, 28 Jan 2024 18:00:07 +0000

Here’s a little tip I discovered that I haven’t seen documented anywhere. You can use when() and unless() with the Laravel Http client.

Here is an example method that uses the Laravel Http client.

use Illuminate\Support\Facades\Http;

public function getUser(int $id): array
{
    $response = Http::baseUrl('https://example.com/api')
        ->get("user/{$id}")
        ->throw()
        ->json();

    return $response;
}

Now imagine that we wanted to pass a token in that is sent as a header.

use Illuminate\Support\Facades\Http;

public function getUser(int $id, string $token): array
{
    $response = Http::baseUrl('https://example.com/api')
        ->withHeader('X-Token', $token)
        ->get("user/{$id}")
        ->throw()
        ->json();

    return $response;
}

The Http client makes this very easy by using the ->withHeader() method.

But what happens if the token is optional for some calls? Some requests need it and others don’t?

Well, we could copy the whole method and duplicate all our code, or we could make use of ->when().

If you look into the PendingRequest class, you’ll see that it makes use of the Illuminate\Support\Traits\Conditionable trait. This trait gives it access to both when() and unless().

Here we set the token to be an optional parameter. When it is passed in, the when() resolves as true and then adds the closure.

use Illuminate\Support\Facades\Http;
use Illuminate\Http\Client\PendingRequest;

public function getUser(int $id, ?string $token = null): array
{
    $response = Http::baseUrl('https://example.com/api')
        ->when($token, function (PendingRequest $request) {
            $request->withHeader('X-Token', $token);
        })
        ->get("user/{$id}")
        ->throw()
        ->json();

    return $response;
}

You can also set a default method if you need to which runs when the when() resolves to false. An example could be setting a default token in the header if one is not provided.

use Illuminate\Support\Facades\Http;
use Illuminate\Http\Client\PendingRequest;

public function getUser(int $id, ?string $token = null): array
{
    $response = Http::baseUrl('https://example.com/api')
        ->when($token, function (PendingRequest $request) {
            $request->withHeader('X-Token', $token);
        }, function (PendingRequest $request) {
            $request->withHeader('X-Token', 'default-value');
        })
        ->get("user/{$id}")
        ->throw()
        ->json();

    return $response;
}

Photo by FOCA Stock on StockSnap

DEV Community: 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

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

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

Testing window.open() in JavaScript with Jest

The component to test

What I’d normally test

Mocking window.open()

The complete test file

Adding social icons to the Bulma Clean Theme footer

Font Awesome update

Adding social links to the footer

Building a landing page for your book

Creating a GitHub account.

Forking the repository

Making changes

Edit the configuration

Add images

Update the index.md page

Reviews

Newsletter

Saving changes

Deploying your site

Domain Name

What’s next?

How to promote your ebooks with your website?

Build a website

Register a domain name

Create a blog

Add interesting titles and meta description tags to your pages

Tell Google and other search engines

Add your website address to your social media profiles

Share your blog posts on social media

Sharing to other sites

Share your blog’s RSS feed

Tell people about your site and your books

Hope that helps

Using the GOV.UK Design System with Laravel

Things to consider

Creating a new project

Install npm dependencies

Importing the styles

Importing the JavaScript

Configuring vite and building

Creating a page

What next