DEV Community: Tim Veletta

Array vs Set vs Object vs Map

Tim Veletta — Fri, 18 Aug 2023 00:00:00 +0000

JavaScript provides a variety of data structures for storing data. However, developers often tend to use Arrays and Objects to solve most problems without considering whether they are the appropriate data structure. The use of Sets instead of Arrays and Maps instead of Objects can provide numerous benefits. This document provides a guide on how to use Set and Map, as well as the reasons why they should be considered over Arrays and Objects.

Array and Set

Consider a list of unique user IDs that gets appended to by some external operation. It would be more efficient to manage this list using a Set rather than an Array since a Set doesn't allow duplicate items. Below is an example of how Set works:

const userIds = [1, 2, 3, 4, 4, 7];
const userIdSet = new Set(userIds);

console.log(userIds); // [1, 2, 3, 4, 4, 7]
console.log(userIdSet); // Set(5) { 1, 2, 3, 4, 7 }

Adding Items

Adding a new item to an Array can be done using push to add items to the end of the Array or unshift to add them to the start of the Array. In terms of performance, using push appends an element to the end of the Array with constant time complexity or **O(1)**. If unshift is used, an element with an index of 0 is added and all the other elements are shifted by 1, resulting in linear time complexity or O(n).

In contrast, Set only allows the add function to add an element to the end of the Set, providing it with constant time complexity.

userIds.push(12);
userIds.unshift(17);

userIdSet.add(12);
userIdSet.add(17);

console.log(userIds); // [17, 1, 2, 3, 4, 4, 7, 12]
console.log(userIdSet); // Set { 1, 2, 3, 4, 7, 12, 17 }

Accessing Items

Accessing values in Arrays and Sets differs greatly due to how they are stored in memory. Arrays are indexed collections , which means that they are stored sequentially by index. In contrast, Sets are keyed collections that use a hash table internally to store data using keys.

Therefore, Array elements can be accessed by index with O(1) time complexity. However, if we want to find an ID within the Array, we would have to iterate over the Array using find or findIndex, resulting in a time complexity of O(n). If we want to know if the Array contains a certain ID value, we can use the includes function, which also iterates through all the items of the Array.

For Sets, we only have access to the has function, which produces the same result as the includes function in Arrays. However, because it is a keyed collection, the has function has a constant time complexity or O(1).

console.log(userIds[6]); // 7
console.log(userIds.findIndex((id) => id === 7)); // 6

console.log(userIds.includes(7)); // true
console.log(userIdSet.has(7)); // true

Removing Items

Removing an item from an Array can be done using filter to filter out the matching items or splice to remove the matching item by index. The former method only iterates through the items once with a time complexity of O(n), while the latter method iterates through the items twice with a time complexity of O(n²).

For a Set, we can simply use the delete function to remove the matching item, providing it with a time complexity of O(1) due to it being a keyed collection.

function removeUserByIdSplice(id) {
    userIds.splice(
        userIds.findIndex((userId) => userId === id),
        1
    );
}

function removeUserByIdFilter(id) {
    userIds = userIds.filter((userId) => userId !== id);
}

function removeUserByIdSet(id) {
    userIdSet.delete(id);
}

When Should You Use an Array Over a Set?

Although there are numerous reasons to use a Set over an Array, sometimes having duplicate items in a list is desirable. Additionally, Arrays have many useful functions, such as filter, map, sort, and reduce, which allow us to perform operations on our collections.

Because a Set is iterable, it allows you to use the for..of construct or spread operator (…) to perform Array-like functions. Thus, you can easily convert a Set to an Array to make use of the additional functions an Array provides.

// from set to array
console.log([...userIdSet]); // [1, 2, 3, 4, 7, 12, 17]

Object and Map

While Arrays and Sets are used to manage lists of data, Objects and Maps are used to manage key-value pairs. Objects are another example of a data structure that developers often overuse when they should consider using a Map instead. One of the main cases where you would want to consider using a Map over an Object is when keys are being added or deleted frequently.

You can easily instantiate a new Map based on an Object using the following code:

const usersObject = {
    tim: { id: 12, city: 'Perth' },
};
const usersMap = new Map(Object.entries(usersObject));

console.log(usersObject); // { tim: { id: 12, city: 'Perth' } }
console.log(usersMap); // Map(1) { 'tim' => { id: 12, city: 'Perth' } }

Adding Key-Value Pairs

Adding to an Object or a Map has constant time complexity. However, there is a bit of a gotcha with the Map code below. If we run this in JavaScript, it wouldn't complain. However, we might notice that henry doesn't get added in the way we expect. Instead, it gets added as an object property to the Map, and hence it cannot be accessed using the Map get function.

usersObject['henry'] = { id: 17, city: 'Melbourne' };
usersMap['henry'] = { id: 17, city: 'Melbourne' }; // 🚩

console.log(usersObject); // { tim: { id: 12, city: 'Perth' }, henry: { id: 17, city: 'Melbourne' } }
console.log(usersMap); // Map { 'tim' => { id: 12, city: 'Perth' }, henry: { id: 17, city: 'Melbourne' } }

console.log(usersMap.henry); // { id: 17, city: 'Melbourne' }
console.log(usersMap.get('henry')); // undefined

Instead, we must use the set function to add a key-value pair to a Map.

usersMap.set('henry', { id: 17, city: 'Melbourne' });

console.log(usersMap); // Map { 'tim' => { id: 12, city: 'Perth' }, 'henry' => { id: 17, city: 'Melbourne' } }

If we try to do something similar to an Object in TypeScript, we encounter issues with the usersObject because it infers the type when it is instantiated. To work around this, we need to define the type as { [key: string]: { id: number, city: string } }.

// TypeScript
const usersObject = {
    tim: { id: 12, city: 'Perth' },
};
const usersMap = new Map(Object.entries(usersObject));

// 🚩 Property 'henry' does not exist on type '{ tim: { id: number; city: string; }; }'.
usersObject['henry'] = { id: 17, city: 'Melbourne' };
usersMap.set('henry', { id: 17, city: 'Melbourne' });

Accessing Key-Value Pairs

Again, accessing key-value pairs has a constant time complexity for both Objects and Maps. The get function is used to access a value from within a Map.

console.log(usersObject.henry); // { id: 17, city: 'Melbourne' }
console.log(usersMap.get('henry')); // { id: 17, city: 'Melbourne' }

Removing Key-Value Pairs

The delete operator is one of my least understood operators in JavaScript, so I tend to avoid it. I came across this brilliant article on Understanding delete that I highly recommend. Instead, when removing a property from an Object, I prefer to use the spread operator, as shown below.

delete usersObject.henry; // OR const { henry, ...newUsersObject } = usersObject;
usersMap.delete('henry');

console.log(usersObject); // { tim: { id: 12, city: 'Perth' } }
console.log(usersMap); // Map { 'tim' => { id: 12, city: 'Perth' } }

Thankfully, Maps have it easy using the delete function.

If we are using TypeScript, we would encounter the following error when trying to use the delete function on an Object because it is inferring that tim is a required property of the usersObject.

// TypeScript
const usersObject = {
    tim: { id: 12, city: 'Perth' },
};

// 🚩 The operand of a 'delete' operator must be optional.
delete usersObject['tim'];

Other reasons to consider using a Map

One of the interesting properties of a Map is that you're not restricted to using string values as keys, unlike with Objects. Therefore, you could have some additional metadata included in your keys.

const userLocationMap = new Map();

const tim = { id: 12, firstName: 'Tim', lastName: 'Veletta' };
const henry = { id: 17, firstName: 'Henry', lastName: 'Jones' };

userLocationMap.set(tim, 'Perth');
userLocationMap.set(henry, 'Melbourne');

console.log(userLocationMap); // Map { { id: 12, firstName: 'Tim', lastName: 'Veletta' } => 'Perth', { id: 17, firstName: 'Henry', lastName: 'Jones' } => 'Melbourne' }

userLocationMap.get(tim); // 'Perth'
userLocationMap.get(henry); // 'Melbourne'

Another property of a Map that could be useful is that the order of elements is preserved based on the order of insertion. This is also true for Objects in later versions of the JavaScript standard. However, it is not guaranteed, so developers cannot rely on it. Like Sets, Maps are iterable, meaning they can use the for..of construct to iterate over the elements in the Map. Alternatively, the forEach function can be used to do this.

for (let userLocation of userLocationMap) {
    console.log(userLocation); // [{ id: 12, firstName: 'Tim', lastName: 'Veletta' }, 'Perth'] [{ id: 17, firstName: 'Henry', lastName: 'Jones' }, 'Melbourne']
}

userLocationMap.forEach((location, user) => {
    console.log(`${user.firstName} lives in ${location}`); // Tim lives in Perth Henry lives in Melbourne
});

Each of these operations has a time complexity of O(n) because we are only iterating over the items once. However, trying to do the same thing with Objects requires converting the Object to a list using either Object.keys, Object.values, or Object.entries, which, in itself, is an O(n) operation. If you then need to do something with each of the values, you end up iterating over the items again, resulting in a time complexity of O(n²).

Map also has a handy size property, so you can always find out how many items are present. With an Object, you have to convert it to a list and get the length property from there.

Congratulations on making it this far! I hope you have learned more about Sets and Maps and will consider using them more in the future. Below are a few resources that were used in creating this post if you want to learn more.

MDN - Objects vs Maps

Time Complexities Of Common Array Operations In JavaScript

Time Complexity of Objects and Arrays

The easiest way to send emails with Resend

Tim Veletta — Thu, 06 Jul 2023 00:00:00 +0000

If you're looking for an easy way to send emails from your Node.js or Next.js applications, Resend might be the answer. Resend is focused on the developer experience, making it easy for you to send emails. They are also the creators of React Email, an open-source library that simplifies creating formatted emails for sending.

To get started with Resend, sign up and verify the domain you want to send emails from. Domain verification is simple with Resend, thanks to their focus on reducing friction which you can read about on their blog. You can then add Resend to your project with:

npm install resend

After adding Resend, initialize it with:

const resend = new Resend(process.env.RESEND_API_KEY);

The RESEND_API_KEY can be created on the "API Keys" page in Resend. You can now send emails with:

const data = await resend.emails.send({
    from: 'contact@timveletta.com', // must verify the from domain
    to: 'timothy.veletta@gmail.com',
    subject: 'Resend is easy!',
    html: '<p>You should try it</p>',
});

If you're using Vercel Functions, add your API Key to the Environment Variables on Vercel, deploy your app, and hit your API endpoint. You can also check the "Emails" page in Resend to see what emails it has sent.

I'm currently using Resend to notify me of people using the contact form on this website but I'm planning to use it and React Email on some other projects. You can view my contact form function on Github.

Why I use SaaS products instead of cloud providers

Tim Veletta — Fri, 17 Mar 2023 00:00:00 +0000

For the past couple of years, I’ve been all in on AWS, I work with it every day and choose to use it for a number of my own projects on the side but lately, I have started to change. One of the main reasons for this is the time investment involved in keeping up to date with AWS services and learning new ones that help me achieve what I want. Also the documentation for each of these services can be a bit hit-or-miss and in a large number of cases there is a SaaS product out there that does a better job, in a better way.

In this article I’m going to give a couple of examples of SaaS products I’d rather use than the comparable AWS service as an example of the types of products I would use to get a new side project off the ground and into production. A large number of my projects involve a few common elements including:

Hosted front-end built with NextJS
Serverless compute
Data store
Authentication
CI/CD

So I feel like it would be important to cover these elements below along with a few others that help make my job a bit easier and more enjoyable.

Hosted Front-End

Here the choice is easy; Vercel makes it so easy to connect a Github repository, deploy an application and manage the hosting. It also helps that NextJS is developed by Vercel but that doesn’t mean you cant easily deploy your Svelte, Vue or Astro sites there.

If you were to try and tackle this in AWS you would have to configure Route53 to point to a Cloudfront distribution which would then point to an S3 bucket but even then you would only be able to manage static or client-rendered sites. I've shown an example of how to do this in my post on Scaffolding your AWS single page application infrastructure with CDK

The general direction for React and other web frameworks is that they are moving more towards a server-rendered model where the server fetches the necessary data to render the page before sending it to the client. Doing it this way allows for faster initial loading of sites, a better user-experience and improved SEO ranking.

Serverless Compute

Again, the logical choice for this is Vercel for many of the aforementioned reasons. Vercel Serverless Functions work much the same as AWS Lambda functions including automated scaling, multiple runtimes and the ability to be run at the edge.

NextJS makes it easy to write Serverless Functions since its something that is baked into your project from the start with the /api directory but you can still take advantage of them even if you’re not using NextJS.

Although I’m opting to use Vercel for my serverless compute, I’m still a huge fan of AWS Lambda; its more because I’m using Vercel for my hosting that it makes sense for me to also use Serverless Functions because then I don’t have to mess around with AWS permissions and managing everything through Cloudformation, CDK, Terraform etc.

Data Store

Honestly, I’ve never really gone deep on databases and have only ever used the solution that made it easy for me to get up and running with the least amount of pain. In the past I’ve used Firebase, Mongo and AWS DynamoDB (I really like Single Table Design) because of their flexibility and ease of use but they’ve all had their pain points.

PlanetScale is the first database related service that I’m actually excited to use and learn more about. I really like their branching feature that allows you to manage your database like you would code including a Pull Request like flow to release changes to your database.

I’m also a huge fan of using Prisma as an Object-relational mapping (ORM) tool to manage my database schema and interactions from my serverless functions. The combination of Prisma and PlanetScale is super

Authentication

You could go any number of directions for authentication including Auth0 and Okta as an alternative to AWS Cognito as many others have done but I’ve been using Clerk recently and have had nothing but good experiences.

Clerk makes it very easy to add user sign up and authentication flows to your application including a large number of social connections. Clerk also integrates well with NextJS including helpers for both your front-end and serverless functions.

CI/CD

Finally, because I’m using Github to manage my code repositories, it makes sense to use Github Actions for CI/CD as opposed to AWS CodeBuild and CodePipeline. The big advantage Github Actions has is its integrations and community workflows which make it easy to leverage common, repeatable patterns that have been created by the community.

One such example of a community workflow is aws-actions/configure-aws-credentials which is used to configure your Github Actions to access AWS as seen in my article on Pushing Content to AWS S3 from Github Actions.

What about IaC?

Something that is notably missing from my recommendations above is an Infrastructure as Code (IaC) tool such as Terraform or AWS CloudFormation to manage your deployed resources in a scalable and repeatable way. Technically, my CI/CD is managed using IaC with Github Actions Workflows and my database schema is managed via Prisma but in the case of Vercel, Clerk and PlanetScale its click-ops all the way.

Again, this comes down to time, learning difficulty and relying on the service providers to provide the service they advertise which in most cases is using AWS under-the-hood anyways.

What about the cost?

Each of the services I’ve listed above have generous free tiers, something that AWS only offers within your first 12 months. The free tiers are as follows:

Vercel offers free use for personal or non-commercial projects with up to 100GB of bandwidth so its perfect for putting together a proof of concept. After that its $20 per user / month for up to 1TB of bandwidth.
PlanetScale free tier allows for up to 5GB of database storage and 1 billion row reads per month. Its then $29 per month for 10GB of storage and $599 for 100GB of storage.
Clerk allows up to 5,000 monthly active users (MAUs) on its free tier however it must include the Clerk branding. The remaining pricing structure confused me a bit; its $25 per month to remove the branding but allows for only 1,000 MAUs + $0.02 per additional user meaning to hit your original 5,000 MAUs it will cost $105 per month. Frustratingly, multi-factor authentication (MFA) is only available to you on the $99 per month plan so you’ll be paying $179 per month for your 5,000 MAUs.
Github Actions offers 2,000 minutes and 500GB on its free tier and then $4 per user / month for up to 3,000 minutes and 1GB of storage.

Each of the free tiers are enough to get a proof-of-concept off the ground and test the market and if I ever get to the point where I’m worrying about exceeding 100GB of bandwidth on Vercel, 5GB of database storage on PlanetScale or even 1,000 MAUs on Clerk, I’m probably doing something right.

If there ever comes a time where using one of these services becomes cost-prohibitive, replacing them with the equivalent AWS services might be worth my time.

Bonus Advice

While I’m plugging services and products that I recommend, I should finish with one project I’ve extremely excited to be using and that is Create T3 App. This community project is a great starting point for building a full-stack, typesafe application using NextJS, TRPC, Prisma and Tailwind.

The documentation around Create T3 App is amazing and by using the aforementioned SaaS products; you can get a full-stack application deployed in a short time so you can spend more time developing features that matter to your users.

How to use Vercel Edge Config in your Functions

Tim Veletta — Tue, 31 Jan 2023 00:00:00 +0000

I recently had to chance to use Vercel Edge Config for a project where I needed to manage a small amount of key-value data and didn't want to go down the path of setting up database infrastructure to manage it. If you're like me and haven't heard about Edge Config, its "a key-value data store (...) [that] enables you to read data at the edge without querying an external database".

This comes in useful for things such as setting up feature flags without requiring a redeployment, A/B testing or, in my case, managing API authorisation tokens. You can find out more about my particular use case in my previous post on Tracking progress on my 2023 goals.

Before I get into how to use Edge Config, there are some important things that are important to know:

The store is associated with your Vercel account as opposed to a particular project. This means you can share Edge Config between multiple projects or manage access on a project-by-project basis.
Edge Config is very small. Plan limits range from 8 KB of storage for Hobby accounts to 512 KB for Enterprise
It should only be used for data that is read frequently and written to infrequently. This is because write operations can take up to 10 seconds to propagate globally so there is no guarantee of consistent reads.
As of writing, the feature is currently in beta.

Getting Started

To get started with Vercel Edge Config, you first need to enable Edge Config on your account by logging into your Vercel account and going to the "Edge Config" tab. From there it will prompt you to create your first store.

On creation, it will give you an example key-value pair which we are going to use for the rest of this article. Next, you will need to connect your project to the store. This can be done in the "Projects" menu. When you connect your project to the store, it will set the EDGE_CONFIG environment variable which is a token that is used to authenticate with your Edge Config.

Reading from Edge Config

Reading from Edge Config is fairly easy if you're also using Vercel Functions. First, you will need to install @vercel/edge-config as a dependency in your project.

Then its just a case of using the getAll function passing in a list of variables you would like to receive. If you omit the list, it will return all variables in the Edge Config. The @vercel/edge-config package makes use of the EDGE_CONFIG environment variable we created in the previous step so if you're having issues authenticating, that is the first place to look.

import { getAll } from '@vercel/edge-config';

const { greeting } = await getAll(['greeting']);

Writing to Edge Config

The easiest way to update the Edge Config is through the Vercel Dashboard however you'll often need to update it through your Vercel Functions. The easiest way to do this is to make a PATCH request to your Edge Config URL which will look something like this:

https://api.vercel.com/v1/edge-config/your_edge_config_id_here/items

The body of your request should be a list of items which include:

operation - either create, update, delete or upsert which creates the item if it doesn't exist and updates it if it does
key - the key of the item you want to perform the operation on
value - the value of the item which can only be a string, number, object, null or an array of the previous types

To make the request, you will also need to create a Vercel API Access Token using these instructions and add it to your project environment variables as VERCEL_ACCESS_TOKEN (or any other descriptive name) so we can use it in the request headers. Note that if when you update your project environment variables, they won't take effect until you redeploy your app.

Another important thing to note is that you must also specify 'content-type': 'application/json' in your headers or you'll get an error message saying "Unsupported Media Type".

Upon making the request; you can check the status parameter in the result to see if all the operations you performed were successful as shown in the following example.

const result = await fetch(
    'https://api.vercel.com/v1/edge-config/your_edge_config_id_here/items',
    {
        method: 'PATCH',
        headers: {
            Authorization: `Bearer ${process.env.VERCEL_ACCESS_TOKEN}`,
            'content-type': 'application/json',
        },
        body: JSON.stringify({
            items: [
                {
                    operation: 'update',
                    key: 'greeting',
                    value: 'hello vercel',
                },
            ],
        }),
    }
);
const json = await result.json();
if (json.status !== 'ok') {
    console.error('Failed to update edge config', json);
}

If you're already using Vercel to host your site, I'd highly recommend giving Edge Config a try if you need a small amount of key-value storage without having to set up your own database infrastructure.

Tracking progress on my 2023 goals

Tim Veletta — Fri, 27 Jan 2023 00:00:00 +0000

tl;dr I built a dashboard that tracks my goals for 2023 which you can view here

Each year I tend to set myself some goals; usually not very specific ones such as listen to more music, play more games or get fitter. Each year, the vague definition of the goal leads it to becoming something that fades in and out of my consciousness during the year and it becomes something that is measured by gut feel. If I've learnt anything from the company I work for, Mechanical Rock, its that you should measure what matters which means setting specific, measurable goals.

In setting some goals for this year, I thought it might also be a good experience to build a dashboard that tracks the progress on my goals throughout the year, more for my own use but also for some sense of public accountability. My goals for 2023 are as follows:

Write 24 blog posts - I enjoy writing however I tend to push it down the list of priorities even though I have a long list of things to write about. I chose 24 because it feels manageable to break it down to 2 blog posts per month and I can track it easily within my own site.
Read 24 books - again, something I enjoy but gets pushed down the list of priorities and again, 2 books per month feels manageable. Its something I assumed I could easily track using my Goodreads account but since they deprecated their API it was not so easy as I'll explain below.
Play all the board games in my collection - I have a collection of 100 board games at time of writing (as shown below) and there are a number of games that I haven't got to the table in quite some time. I would like to play all 100 games plus any new ones I acquire over the course of the year and I can track this through a site called Board Game Geek.
Cycle over 1,200km - as much as I enjoy it, I haven't found as much time for cycling in the past year because of other sporting commitments but now that those have finished, I would like to get back into it. 1,200km sounds like a lot but breaking it down, its 100km a month or cycling to work and home 3 days a month which I can track using Strava.

By integrating each of the services I mentioned above, I was able to build a dashboard that tracks my progress on each of my goals which is available here. I'm going to dive a bit further into how I integrated each of the services in the rest of this post.

Fetching number of blog posts written

Because my website uses Astro, this was fairly straightforward. The snippet below gets all the Markdown files in my /blog directory and filters them based on whether they were released in 2023.

const postsThisYear = (await Astro.glob('./blog/*.{md,mdx}')).filter(
    (post) => new Date(post.frontmatter.pubDate).getFullYear() === 2023
).length;

Finding out how many books I've read from Goodreads

As I mentioned before, Goodreads deprecated their API and as far as I found, there was nothing to replace it so the next best solution was scraping some data from my Goodreads profile.

First, I made my profile public and started a reading challenge which generates a new page to track your progress against your reading challenge.

I then created a Vercel function which opens that page, parses the HTML result using node-html-parser, searches the page for the challenge progress text and gets the first number in there which will be the number of books I've read so far in 2023.

const result = await fetch(
    'https://www.goodreads.com/user_challenges/41139180'
);
const html = await result.text();
const root = parse(html);

const progressText = root.querySelector('.progressText').text;

const numBooksRead = parseInt(progressText.match(/\d+/)[0]);

Tracking the games I've played with Board Game Geek

Fortunately for me, Board Game Geek has an API where the request parameters are reasonably well documented so I knew I had to make 2 requests, one to get all the games in my collection and another to get all the games I've played this year.

Again, I created a Vercel function to manage this and started by fetching all the games that I "Own". Unfortunately, the API response is entirely in XML so I imported the DOMParser from jsdom to do most of the heavy lifting around navigating the XML and settled on the function below.

async function fetchCollection() {
    const result = await fetch(
        'https://boardgamegeek.com/xmlapi2/collection?username=timmahh&own=1&brief&subtype=boardgame&excludesubtype=boardgameexpansion'
    );
    if (result.status === 202) {
        await new Promise((resolve) => setTimeout(resolve, 2000));
        return fetchCollection();
    }
    const xml = await result.text();
    const parser = new DOMParser();
    const doc = parser.parseFromString(xml, 'text/xml');
    const items = doc.querySelectorAll('item');
    return Array.from(items).map(
        (item) => item.querySelector('name').textContent
    );
}

One thing to note, sometimes the BGG API returns with a status code of 202 which means it has queued your request and that you should make another request after a short delay.

Fetching the games I've played this year is largely similar, just with a different API endpoint so I won't show it here. Once I had both my collection and plays, it was just a case of iterating through the games in my collection and checking if my list of plays includes that game.

const gamesPlayed = collection.filter((game) => plays.includes(game)).length;

Working out how far I've cycled with Strava

For my final goal, I was able to use the Strava API to get my cycling stats however, the way they manage authorisation made this more difficult than I would have liked.

Following the instructions on their Getting Started page I created an application and authorised my Strava data to be accessed by my application. From there I was able to get my access and refresh tokens to authenticate with the API however I needed somewhere to store these.

I really didn't want to go down the path of setting up a whole database just to store 3 values so I used Vercel Edge Config to manage my tokens. Edge Config is a key-value data store that allows you to read data at the edge with negligible latency and is easily accessed from your Vercel functions. I would like to do another blog post in the future specifically on Edge Config because the documentation around it wasn't great and I feel like having a working example would have helped me greatly.

Once I had solved the issue of authentication and authorisation; the /athletes/{id}/stats endpoint returns a value for ytd_ride_totals which is exactly what I need.

Getting the page to update

Because my site is built with Astro and set up as a static site on Vercel; having the page update was my final consideration. I really don't need "to-the-second" updates each time someone accesses the page because there normally isn't much of a change from one day to the next.

In this case, it made sense to have the page update once per day so I set up a Github Action to run on a schedule that pings my Vercel deploy hook which triggers a build as shown below.

name: ⏰ Scheduled Build

on:
  schedule:
    - cron: '0 0 * * *'

jobs:
  build:
    name: 🔫 Trigger site build
    runs-on: ubuntu-latest
    steps:
      - name: ♻️ Request to Vercel Deploy Hook
        run: curl -X POST -d {} ${{ secrets.VERCEL_DEPLOY_HOOK }}

So there you have it, a bit of an insight into how I'm tracking my goals for 2023. I can't wait to see whether the visualisation of my goals has any effect on how I progress against them. Thanks for reading!

UPDATED: Deploying a static site to AWS using GitHub Actions

Tim Veletta — Sun, 16 Aug 2020 13:32:54 +0000

It has been just under a year since I wrote my initial blog post about deploying static sites to AWS via GitHub Actions and a number of things have changed since then. Github Actions has now been generally available for some time and although number of the referenced actions have changed, the main principles remain the same. In this post I'll explain my process for deploying static sites to AWS using Github Actions in greater detail and whats changed since the initial version of the article.

If you're just interested in the build template, it is posted in its entirety at the end of the article.

Assumed infrastructure

The template assumes you are using a privately hosted S3 static site and serving the content using CloudFront. You could just as easily use a public S3 static site and omit the Invalidate Cloudfront CDN step.

Breaking down the build template

One of the more conventional approaches to continuous integration builds is breaking it down into 3 distinct steps, test, build and deploy. Doing so allows us to easily pinpoint at a glance where things have gone wrong when the build fails. In my previous build template, I had combined the build and deploy steps because at that point it was unclear how to share assets between jobs. However this changed upon discovering the actions/upload-artifact and actions/download-artifact actions.

The `test` job

The test job is fairly straightforward, it simply checks out the code, installs the dependencies and runs the tests. Not much to see here.

 test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Install dependencies
        run: npm ci

      - name: Run developer tests
        run: npm test

The `build` job

This is one of the differences from the previous article, I am splitting up the build and deploy jobs since I now know how to manage build artifacts between steps. In this step, I again check out the code and install dependencies then follow it by building the site. Next, I upload the build artifact to GitHub using the actions/upload-artifact action specifying the build folder as our source and naming it frontend-artifact. This name will be used later on as well as showing in the GitHub interface.

  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Install dependencies
        run: npm ci

      - name: Build frontend
        run: npm run build

      - uses: actions/upload-artifact@v2
        with:
          name: frontend-artifact
          path: build

The `deploy` job

The deploy job is the other big difference from the previous article since it now uses the aws-actions/configure-aws-credentials action to authenticate with AWS and then perform operations. Firstly, I set 2 conditions for running the deploy job; that we only run on the master branch and not on other branches, and we only run after successfully running the test and build jobs. This is simply because I only want to deploy code I am happy to merge into the main branch which has passed all the tests and successfully builds.

I start by downloading the frontend-artifact that I uploaded in the build step, then I configure my access to AWS using GitHub secrets (see Keeping your secrets safe in the previous article) before uploading the code to S3 and invalidating the CloudFront cache so that it knows about the most recent version of the site.

deploy:
    needs: [test, build]
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/master'

    steps:
      - uses: actions/download-artifact@v2
        with:
          name: frontend-artifact

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: <<YOUR REGION HERE>>

      - name: Deploy to S3 Bucket
        run: aws s3 sync ./ s3://<<YOUR S3 BUCKET NAME HERE>>

      - name: Invalidate Cloudfront CDN
        run: aws cloudfront create-invalidation --distribution-id=$CLOUDFRONT_DISTRIBUTION_ID --paths '/*'
        env:
          CLOUDFRONT_DISTRIBUTION_ID: <<YOUR CLOUDFRONT DISTRIBUTION ID HERE>>

Putting it all together

So thats all the individual build jobs and a bit of a breakdown of each, the full template is below. There are 2 points worth mentioning about the full template; we are running it on each push and pull request so that we are informed of any issues sooner and the test and build steps run concurrently despite having to install dependencies each time. The reason for this is simply to get quick feedback and this way I don't have to deal with any form of hand off between each of the stages.

I hope you've found this post useful and now have an idea of how easy it is to deploy you static sites to AWS using GitHub Actions.

name: Frontend CI

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Install dependencies
        run: npm ci

      - name: Run developer tests
        run: npm test

  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Install dependencies
        run: npm ci

      - name: Build frontend
        run: npm run build

      - uses: actions/upload-artifact@v2
        with:
          name: frontend-artifact
          path: build

  deploy:
    needs: [test, build]
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/master'

    steps:
      - uses: actions/download-artifact@v2
        with:
          name: frontend-artifact

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: <<YOUR REGION HERE>>

      - name: Deploy to S3 Bucket
        run: aws s3 sync ./ s3://<<YOUR S3 BUCKET NAME HERE>>

      - name: Invalidate Cloudfront CDN
        run: aws cloudfront create-invalidation --distribution-id=$CLOUDFRONT_DISTRIBUTION_ID --paths '/*'
        env:
          CLOUDFRONT_DISTRIBUTION_ID: <<YOUR CLOUDFRONT DISTRIBUTION ID HERE>>