DEV Community: Maciek Grzybek

Ramka - Create your profile pic

Maciek Grzybek — Fri, 09 Dec 2022 10:16:07 +0000

Hey all 👋
I just wanted to share a small personal project of mine - Ramka - https://ramka.maciekgrzybek.dev/

It's a simple tool where you can add a frame with text to your profile picture, just like on Linkedin. The difference is, you can fully customize the gradient colour, text and text colour. It ain't much, but it's honest work 😉

Why I made it? Some time ago, my friend Tom Walsh, created a custom frame for me in Photoshop and since then, a lot of people asked me about it in personal messages. So I decided to create a solution for this problem 😉

I wanted to give credit to Tom Walsh for this idea and also thanks to Denis Kharchenko for helping me out with the UI.

Enjoy and share if you like it Cheers! 😉

Animate on scroll with Svelte Inview - Little Bits

Maciek Grzybek — Sat, 05 Mar 2022 13:56:18 +0000

Little Bits is a series of short articles explaining quick solutions to common dev problems. No unnecessary descriptions or code snippets. No bullshit.

In this episode, I want to show you how you can animate elements in your Svelte app on scroll.

Problem

When user is scrolling your Svelte app/website, we want to animate the entering elements to get that extra fancy feel.

The best solution is to use Intersection Observer, but we can also use a nice abstraction built on top of it - svelte-inview. This is a small library I created some time ago that greatly simplify usage of the IO API. Let's see how we can do this.

Solution

Create an app with Vite

Let's use Vite to create a simple Svelte App:



npm create vite@latest my-svelte-app -- --template svelte

cd my-svelte-app

npm i

npm run dev

Add scaffolding

Let's add some simple app with basic styling. Paste that code in your App.svelte file:



<script>
  import AnimatedElement from './lib/AnimatedElement.svelte';
</script>

<main>
  <div class="hero">
    <h1>Hello Svelte Inview</h1>
    <p>Scroll down to animate the elements</p>
  </div>
  <div class="full-height">
    <AnimatedElement />
  </div>
  <div class="full-height">
    <AnimatedElement />
  </div>
</main>

<style>
  :root {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  main {
    text-align: center;
    padding: 0 1em;
    margin: 0 auto;
  }

  h1 {
    margin-bottom: 0.5rem;
  }

  p {
    margin-top: 0;
  }

  .hero {
    height: calc(100vh - 16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .full-height {
    height: 100vh;
    display: flex;
    justify-content: center;
  }
</style>

You probably notice that we import the AnimatedElement component - we will create it in the next step.

Add `AnimatedElement` component

Create a file called AnimatedElement.svelte and add this code:



<script lang="ts">
  import { fade } from 'svelte/transition';
  import { inview } from 'svelte-inview';

  let isInView;
</script>

<div
  class="wrapper"
  use:inview={{ unobserveOnEnter: true, rootMargin: '-20%' }}
  on:change={({ detail }) => {
    isInView = detail.inView;
  }}
>
  {#if isInView}
    <div in:fade class="box">
      <h3>Appears from nowhere</h3>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error,
        adipisci nihil iste.
      </p>
    </div>
  {/if}
</div>

<style>
  .wrapper {
    margin-top: 30px;
  }

  .box {
    width: 300px;
    border: 1px solid rgb(221, 221, 221);
    padding: 25px;
    border-radius: 10px;
  }
</style>

What is going on here?
First we import the inview action and animation from svelte.

Then we assign the action to the wrapper with some options:

unobserveOnEnter: true - this means that once element is on the screen and animated, it won't be animated again
`rootMargin: '-20%' - this means that element will be considered "on screen" once it'll reach 20% of the monitor - better explanation here

Next step is to handle the element entry - we assign the inView flag from the action to our local variable - isInView. This allows us to determine if element should be animated.

Then we check if isInView is true, if it is we animate the element into view by adding the in:fade action.

Useful links

svelte-inview action -
explanation of Intersection Observer API - which is used by svelte-inview internally
more about svelte actions
more about in/out animations in svelte

Ultimate guide to sorting in Javascript and Typescript

Maciek Grzybek — Wed, 18 Aug 2021 07:22:57 +0000

Background vector created by freepik - www.freepik.com

This post was originally published on Leocode Blog.

Introduction

Surely in your coder/software engineer/developer/professional keyboard basher career, you came across a situation when you had to sort some kind of data or UI elements. In most cases, it's pretty straightforward, but sometimes it can be a real pain. In this article, I'll try to explain how sorting works in the TypeScript and JavaScript world, show you some real-life examples and speak briefly about few popular libraries that can make sorting much easier.

Basic sorting

Let's start with the most basic example and sort the array of strings:

const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort();
// -> ['Bravo', 'Lima', 'Tango', 'Zulu']

That's the simplest way to alphabetically sort an array of strings in ascending order. What if we want to sort it from Z to A instead? We need to pass a compare function:

const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort((a, b) => {
  if (b > a) return 1;
  if (b < a) return -1;
  return 0;
}); 
// -> ['Zulu', 'Tango', 'Lima', 'Bravo']

This might look confusing at first (been there) but trust me, it's actually making a lot of sense when you get it.

How the compare function works

The compare function takes two arguments - the current element and the next element. It has to return a number that will define how the elements have to be sorted. The general rule is:

if you return a number greater than 0 - element b will go to the beginning (will receive a lower index number than element a)
if you return a number smaller than 0 - element a will go to the beginning (will receive a lower index number than b)
if you return 0 - elements will remain at the same position

With a simple number sorting, we can even go a step further and simplify the compare method:

// Ascending order
const arr = [1, -6, 8, 20, 3, 3];
arr.sort((a, b) => a - b);
// -> [-6, 1, 3, 3, 8, 20]

// Descending order
const arr = [1, -6, 8, 20, 3, 3];
arr.sort((a, b) => b - a);
// -> [20, 8, 3, 3, 1, -6]

Let's analyze the first two array elements comparison:

in the first example, we do 1 - (-6) which evaluates to 7 - meaning element b should be before element a ( -6 should be before 1)
in the second example, we do -6 - 1 which evaluates to -7 - meaning element a should be before element b ( 1 should be before -6)

Then the sort method continues that for other numbers. How exactly? That depends on the browser. As it turns out different browsers are using different algorithms to do that. The API and the output are the same, but under the hood, they are sorting things in a slightly different manner. If you want proof, try the code below in Firefox and Chrome consoles, and look at what's being returned - it's not the same.

const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort((a, b) => {
  console.log(`Comparing ${a} to ${b}`);
  if (b > a) return 1;
  if (b < a) return -1;
  return 0;
});

If you want to dig even deeper - check out this great explanation of different sorting algorithms.

TIP

Worth having in mind: sort is a mutable method, which means it mutates the original array. If you want to create a new array, you can spread it and then sort it like this:

const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
[...word].sort()

Sorting with `localeCompare` method

In previous examples, we simply compared the strings and return the correct value to sort the strings in the array. But there's another, awesome way to do that, plus it gives us additional superpowers! I'm talking about the localeCompare method. What is it, you ask? Similar to examples before, the function will return a number as a result of comparing the strings, but it allows us to take the locale into consideration. This is especially useful with languages that have special characters, as they might have a different position in the alphabet. Let's see some examples, so it can all make more sense.

const words = ['Tango', 'Zulu', 'Bravo', 'Lima'];
words.sort((a,b) => a.localeCompare(b, 'en'));
// -> ['Bravo', 'Lima', 'Tango', 'Zulu']

Like I've mentioned before the localeCompare return a numeric value, so if a is before b in the alphabet, it yields a negative value. If b is before a - it yields a positive value. If they are the same - it yields 0. And we already know what does that mean for the sort method from the How the compare function works section.

But where are the superpowers, you ask? Let's take a look.

Locale

If you are dealing with multiple languages in your app/website, it's important to pass the locale of the current language when you use sorting, as some characters have a different position in the alphabet.

'ö'.localeCompare('z', 'de'); 
// returns a negative value: in German, ö sorts before z

'ö'.localeCompare('z', 'sv'); 
// returns a positive value: in Swedish, ö sorts after z

Options

localeCompare has also a third argument, which is options. There are a few of them, but I'll show you two, in my opinion, most needed on a daily basis. If you want to read more about them all, I highly recommend the MDN and Tech on the net.

Casing

You can pass a caseFirst property to the options. If you set it up as upper it will sort the uppercase words first (when they are starting with the same letter). If you pass lower - it will sort the lowercase ones first.

const words = ['Tango', 'tango', 'Bravo', 'lima', 'Lima'];

words.sort((a,b) => a.localeCompare(b, 'en', {caseFirst: 'upper'}));
// -> [ 'Bravo', 'Lima', 'lima', 'Tango', 'tango' ]

words.sort((a,b) => a.localeCompare(b, 'en', {caseFirst: 'lower'}));
// -> [ 'Bravo', 'lima', 'Lima', 'tango', 'Tango' ]

Numeric values

Let's say we want to sort the numeric strings - if we won't pass the numeric: true property, they will be treated as strings and sorted like them - "101" will go before "2" because 1 is smaller than 2. Check the examples below for a better understanding.

const words = ['4','1001', '30', '200'];

words.sort((a,b) => a.localeCompare(b, 'en'));
// -> [ '1001', '200', '30', '4' ]

words.sort((a,b) => a.localeCompare(b, 'en', {numeric: true}));
// -> [ '4', '30', '200', '1001' ]

Real-life examples

We've covered the theory (which I hope will give you a better understanding of how sorting works), now let's focus on real-life examples. I want to show you a few that will use just the native sort method and also a few that will use external libraries like [lodash](https://lodash.com/). Let's go!

Sorting an array of objects

Let's say we have an array of objects (each object will represent one dog) and we want to alphabetically sort these objects by the breed property. Let's see how we can do that.

// Define the interface for our objects
interface Dog {
    breed: string;
    name: string;
}

const dogs: Dog[] = [
  { breed: 'German Shepard', name: 'Rex' },
  { breed: 'Spaniel', name: 'Marley' },
  { breed: 'Bulldog', name: 'Thanos' }
];

// Sort based on `breed` property.
// We don't have to explicitly type `a` and `b` arguments - Typescipt will infer them from the `dogs` array
dogs.sort((a,b) => {
  if (b.breed < a.breed) return 1;
  if (b.breed > a.breed) return -1;
  return 0;
});

// -> 
// [
//   {breed: 'Bulldog', name: 'Thanos'}, 
//   {breed: 'German Shepard', name: 'Rex'},
//   {breed: 'Spaniel', name: 'Marley'}
// ]

As you can see, this is very similar to regular string sorting, the only difference is that we are comparing specific properties of the objects.

TIP

It all depends on your preferences (and probably your team standards) but you can make the sorting function even shorter:

dogs.sort((a, b) => (b.breed < a.breed ? 1 : b.breed > a.breed ? -1 : 0));

Sorting based on different values

So we covered that, but what if we'll have two bulldogs on our list? We can sort them by breed first and then by name.

const dogs = [
  { breed: 'German Shepard', name: 'Rex' },
  { breed: 'Spaniel', name: 'Marley' },
  { breed: 'Bulldog', name: 'Thanos' },
  { breed: 'Bulldog', name: 'Atreus' }
];

// Fist sort based on `breed` then if they are the same, sort by `name` property
dogs.sort((a,b) => {
  if (b.breed < a.breed) return 1;
  if (b.breed > a.breed) return -1;
  else {
      if (b.name < a.name) return 1;
      if (b.name > a.name) return -1;
      return 0
  }
})

// -> 
// [
//   {breed: 'Bulldog', name: 'Atreus'}, 
//   {breed: 'Bulldog', name: 'Thanos'}, 
//   {breed: 'German Shepard', name: 'Rex'},
//   {breed: 'Spaniel', name: 'Marley'}
// ]

As you can see we just add another "branch" in here - if the compared values are the same, we add another else path that handles comparing another property on the object - name in this case.

TIP

Sometimes your sorting functions might get fairly complicated so it makes sense to extract them to their own methods and pass them to sort.

// Define the interface for our objects
interface Dog {
    breed: string;
    name: string;
}

// It's a good idea to pass the types to arguments, otherwise TS will treat them as type of `any`
const sortDogsByBreedAndName = (a: Dog,b: Dog) => {
  if (b.breed < a.breed) return 1;
  if (b.breed > a.breed) return -1;
  else {
      if (b.name < a.name) return 1;
      if (b.name > a.name) return -1;
      return 0
  }
};

dogs.sort(sortDogsByBreedAndName)

Sorting based on another array

Getting back to our beloved dogs, imagine we want to sort them by breed but not alphabetically. Let's say we have a specific list of breeds that needs to be used as a reference for the sorting logic. Take a look below as it might be easier to understand with the code example:

// This array shows the order of sorting the dogs - Spaniel should be first
// and German Shepard should be last
const breedsOrder = ['Spaniel', 'Pug', 'Bulldog', 'Poodle', 'German Shepard'];
const dogs = [
  { breed: 'German Shepard', name: 'Rex' },
  { breed: 'Spaniel', name: 'Marley' },
  { breed: 'Bulldog', name: 'Thanos' },
  { breed: 'Pug', name: 'Bean' },
  { breed: 'Poodle', name: 'Axel' }
];

dogs.sort((a,b) => breedsOrder.indexOf(a.breed) - breedsOrder.indexOf(b.breed));

// ->
// [
//   { breed: 'Spaniel', name: 'Marley' },
//   { breed: 'Pug', name: 'Bean' },
//   { breed: 'Bulldog', name: 'Thanos' },
//   { breed: 'Poodle', name: 'Axel' },
//   { breed: 'German Shepard', name: 'Rex' }
// ]

What happened here? The array.indexOf method returns a number - position of the passed argument in the array. In this situation, if we compare the index of 'German Shepard' (4) and 'Spaniel' (0) we will receive -4 which means that 'Spaniel' should go first in our sorting method.

External libraries

Apart from your vanilla JS/TS solutions, there are lots of external libraries that expose a nice API to makes sorting easier. Below I will show you examples from two of them - [lodash](https://lodash.com/) and [fast-sort](https://github.com/snovakovic/fast-sort)

lodash

Lodash is a very popular JavaScript utility library. It has all kind of various methods that helps a lot with you daily developer tasks. It also lets you use few sorting helper functions.

sortBy

This method allows you to sort arrays of objects. The output is exactly the same as in the Sorting based on the different values section before. As a first argument, you pass the array to sort and the second one is an array of object properties that we want to sort by (in the example below - sort first by breed, then by name if breeds are the same).

import { sortBy } from 'lodash';

const dogs = [
  { breed: 'German Shepard', name: 'Rex' },
  { breed: 'Spaniel', name: 'Marley' },
  { breed: 'Bulldog', name: 'Thanos' },
  { breed: 'Bulldog', name: 'Atreus' }
];

sortBy(dogs, ['breed', 'name']);
// -> 
// [
//   {breed: 'Bulldog', name: 'Atreus'}
//   {breed: 'Bulldog', name: 'Thanos'}, 
//   {breed: 'German Shepard', name: 'Rex'},
//   {breed: 'Spaniel', name: 'Marley'}
// ]

orderBy

This method is almost identical to sortBy except that it allows specifying the sort orders of the iterates. So if we want to sort by breed in ascending manner, but then by name in descending one, we can do something like this:

import { orderBy } from 'lodash';

const dogs = [
  { breed: 'German Shepard', name: 'Rex' },
  { breed: 'Spaniel', name: 'Marley' },
  { breed: 'Bulldog', name: 'Thanos' },
  { breed: 'Bulldog', name: 'Atreus' }
];

orderBy(dogs, ['breed', 'name'], ['asc', 'desc']);
// -> 
// [
//   {breed: 'Bulldog', name: 'Thanos'}
//   {breed: 'Bulldog', name: 'Atreus'}, 
//   {breed: 'German Shepard', name: 'Rex'},
//   {breed: 'Spaniel', name: 'Marley'}
// ]

fast-sort

This is and easy to use and flexible sorting library with TypeScript support. It has a little bit different approach than lodash when it comes to the API. Let's see how we can solve the same sorting problem as we had before:

const dogs = [
  { breed: 'German Shepard', name: 'Rex' },
  { breed: 'Spaniel', name: 'Marley' },
  { breed: 'Bulldog', name: 'Thanos' },
  { breed: 'Bulldog', name: 'Atreus' }
];

// Sort ascending by breed then by name
sort(dogs).asc([
  dog => dog.breed,
  dog => dog.name
]);
// -> 
// [
//   {breed: 'Bulldog', name: 'Atreus'}
//   {breed: 'Bulldog', name: 'Thanos'}, 
//   {breed: 'German Shepard', name: 'Rex'},
//   {breed: 'Spaniel', name: 'Marley'}
// ]

// Sort ascending by breed then descending by name
sort(dogs).by([
  { asc: dog => dog.breed },
  { desc: dog => dog.name }
]);

// -> 
// [
//   {breed: 'Bulldog', name: 'Thanos'}
//   {breed: 'Bulldog', name: 'Atreus'}, 
//   {breed: 'German Shepard', name: 'Rex'},
//   {breed: 'Spaniel', name: 'Marley'}
//

Both of the mentioned libraries have of course much more options and possibilities. Also there are plenty of other libraries that solve the same or similar problems, just to name a few - match-sorter, sort-array or relevancy. I encourage you to check their documentation and have a play - trust me, sometimes they can be a live-saver.

Summary

I hope this article will give you more confidence when it comes to sorting in Javascript and Typescript. We went from basics, through more complicated examples and finished on external libraries that can take some of the work from our shoulders. I think you are now ready to... sort it out... (dad joke-level pun intended).

Promise.allSettled explained - Little Bits

Maciek Grzybek — Mon, 09 Aug 2021 13:32:13 +0000

Little Bits is a series of short articles explaining quick solutions to common dev problems. No unnecessary descriptions or code snippets. No bullshit.

In this episode, I want to show you a really powerful tool for working with Promises - allSetled method.

Problem

Imagine that you have two fetch methods, that are getting some data from external APIs. When both of them returns that data, you combine it and pass it down to your client. Methods are parallel and you use Promise.all method. When one of them fails, you fail the whole service and return an error - a pretty common scenario. Let's see how that might look like:

const fetchMeSomeData = fetch('/url');
const fetchMeSomeOtherData = fetch('/other-url');

const [data, otherData] = await Promise.all([fetchMeSomeData, fetchMeSomeOtherData]);

return mapTheResponse(data, otherData)
// Manipulate the `data` and `otherData` and return to the client

Now imagine your PM comes to you and says "That's all good, but we want to change the behaviour. If the otherData call will fail, we want to map the response only based on data - we can ignore the otherData". How we can achieve this?

Solution

We can use the Promise.allSettled method, which gives us better control over the flow.

const fetchMeSomeData = fetch('/url');
const fetchMeSomeOtherData = fetch('/other-url');

const [data, otherData] = await Promise.allSettled([fetchMeSomeData, fetchMeSomeOtherData])

if(otherData.status === 'rejected') return mapTheResponseWithoutOtherData(data.value);
if(data.status === 'rejected') throw new Error('Not enough data');

return mapTheResponse(data.value, otherData.value);

As you can see, this gives us more options when it comes to controlling the behaviour of our fetch methods. We can ignore the failed fetchMeSomeOtherData method and focus only on the response from fetchMeSomeData.

Summary

This handy method was release in the ES2020 edition, so it's relatively new to the JS/TS ecosystem, but as you can see, it's very powerful and allows us to have much more control over our code flow. If you want to learn more about it, check out the MDN page.

Testing Next.js pages - Little Bits

Maciek Grzybek — Wed, 26 May 2021 09:20:26 +0000

Why?

Next.js is a super cool React framework, that gives you an amazing developer experience. In this episode, I'll show you how to test the Next pages with few useful libraries. This setup will allow us to create integration tests with mocking calls to the API. You can check the working example here.

Setup

First of all, set up your Next app with Typescript and React Testing Library. I explained how to do it in one of the previous episodes.

When it's done, install rest of the needed dependencies:

MSW - API mocking tool
Next Page Tester - DOM integration testing tool for Next.js
Axios - you can use any fetching library, but we will go with this one

npm i msw next-page-tester -D
npm i axios

App

Create a simple homepage in pages/index.tsx. It will make a server-side call to the Stars Wars API to get the list of films and print them out.

import React from 'react';
import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import axios from 'axios';

export interface Film {
  title: string;
  director: string;
  release_date: string;
}

export interface FilmsResponse {
  results: Film[];
}

export default function Home({
  data,
  notFound,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  if (notFound) {
    return <div>Something went wrong, please try again</div>;
  }

  return (
    <div>
      <main>
        <ul>
          {data.results.map(({ title, release_date, director }) => (
            <li key={title}>
              <h2>{title}</h2>
              <span>Release date: {release_date}</span>
              <span>Director: {director}</span>
            </li>
          ))}
        </ul>
      </main>
    </div>
  );
}

export const getServerSideProps: GetServerSideProps<{
  data?: FilmsResponse;
  notFound?: boolean;
}> = async () => {
  try {
    const { data } = await axios.get<FilmsResponse>(
      'https://swapi.dev/api/films/'
    );
    if (!data.results) {
      return {
        props: { notFound: true },
      };
    }

    return {
      props: { data },
    };
  } catch (error) {
    return {
      props: { notFound: true },
    };
  }
};

Preparing mocks

In the test environment, we don't really want to hit the actual API so we will mock it with msw.

First of all, let's create a list of mocked films in __mocks__/mocks.ts

import { FilmsResponse } from '../pages';

export const mockedFilms: FilmsResponse = {
  results: [
    {
      title: 'A New Hope',
      release_date: '1977-05-25',
      director: 'George Lucas',
    },
    {
      title: 'The Empire Strikes Back',
      release_date: '1980-05-17',
      director: 'Richard Marquand',
    },
  ],
};

Next, let's create server handlers (we define what msw should return when our app hit a specific URL). Let's create a new file test-utils/server-handlers.ts

import { rest } from 'msw';

import { API_URL } from '../config'; //'https://swapi.dev/api/films'
import { mockedFilms } from '../__mocks__/mocks';

const handlers = [
  rest.get(API_URL, (_req, res, ctx) => {
    return res(ctx.json(mockedFilms));
  }),
];

export { handlers };

Short explanation:

rest.get(API_URL - when app send a GET request to the [https://swapi.dev/api/films](https://swapi.dev/api/films) endpoint
return res(ctx.json(mockedFilms)) - return the list of mocked films

Now, let's create a mock server that will run for our tests. Create a new file in test-utils folder names server.ts

import { rest } from 'msw';
import { setupServer } from 'msw/node';
import { handlers } from './server-handlers';

const server = setupServer(...handlers);
export { server, rest };

Then, in jest.setup.ts file, add the code that will be responsible for running the server:

import { server } from './test-utils/server';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

If you want to learn more about msw tool check out their documentation, it's really good. Also, as usual, I recommend reading one of the Kent Dodds's blog post about mocking. It explains the topic really well.

Writing tests

Now, this is a really simple app, but I just want to show an example of how we can nicely test its behaviour. In this scenario, we only want to see if the films are printed on the screen and if it shows an error message when API returns something else than data. For that, we will use jest, react-testing-library and next-page-tester.

import { screen, waitFor } from '@testing-library/react';
import { getPage } from 'next-page-tester';

import { mockedFilms } from '../__mocks__/mocks';
import { server, rest } from '../test-utils/server';
import { API_URL } from '../config';

test('displays the list of films', async () => {
  const { render } = await getPage({ route: '/' });

  render();

  await waitFor(() => {
    mockedFilms.results.forEach(({ title, release_date, director }) => {
      expect(
        screen.getByRole('heading', { level: 2, name: title })
      ).toBeInTheDocument();
      expect(
        screen.getByText(`Release date: ${release_date}`)
      ).toBeInTheDocument();
      expect(screen.getByText(`Director: ${director}`)).toBeInTheDocument();
    });
  });
});

test('shows the error message when receive an error from the API', async () => {
  server.use(rest.get(API_URL, async (_req, res, ctx) => res(ctx.status(404))));

  const { render } = await getPage({ route: '/' });

  render();

  await waitFor(() => {
    expect(
      screen.getByText('Something went wrong, please try again')
    ).toBeInTheDocument();
  });
});

As you can see, mocking the Next pages is really simple with next-page-tester tool. You can just simply pass the path as an argument, and it will render the whole page that's ready for testing. Check out the projects GitHub page for more details.

Also, notice how we overwrite the API server handler (instead of an actual data, we want to return a 404 status code when the app hits the API):

server.use(rest.get(API_URL, async (_req, res, ctx) => res(ctx.status(404))));

Summary

As you can see, testing Next pages can be super fun and easy. These integrations tests are great for testing a general user journey, and are perfect addition to regular unit tests, where we can test more detailed scenarios.

Testing UI - Next JS, Typescript, Jest and React Testing Library

Maciek Grzybek — Tue, 10 Nov 2020 13:35:25 +0000

Intro

As you know, React is just JavaScript. That means it can be tested just like any other JS application. There are lots of testing libraries and test runners out there, but I find that the best setup is Jest + React Testing Library. I use it on a daily basis at work and on my side projects. Worth mentioning that this is also a stack recommended by the React Team itself.

The thing I love about RTL is the fact that it's focused on testing how your application behaves, not how it's implemented. That gives you higher confidence that the user won't be surprised by some weird bugs etc. If you want to learn more about this approach, I strongly recommend these two articles by Kent C. Dodds

Testing implementation details is about why testing implementation details is a recipe for disaster,
Avoid the test user is talking about who do you really need to test for.

Now let's see how we can use all that knowledge in a working example.

What we are going to test?

For the purpose of this tutorial, I've created a simple shopping cart with NextJS. You can see the live demo here or if you want to see the code behind it check the repo.

Functionally, the cart is pretty standard, the user will be able to change the number of items, place an order, remove items from the cart or add a promo code. We're not going to be worried about adding new items to the cart, closing cart etc as we want to focus strictly on the cart behaviour.

Let's treat our cart as a widget with some nested components inside. When thinking about what we want to test, I usually go from the most nested component, up to the root and write down all the things that can happen while using the product.

Not all the components have to have their own spec file. For example, Promo and Prices components are purely presentational, they just render whatever props are passed to them. In that case, we don't have to write specific tests.

For this tutorial, we will create two spec files, Product.spec.tsx and Cart.spec.tsx. That should cover all our scenarios.

Having our user's experience in mind let's write test cases (empty for now, we will add the body later).

//Product.spec.tsx
test('shows the correct name', () => {});
test('shows the correct color', () => {});
test('shows the correct price', () => {});
test('shows the correct quantity', () => {});
test('shows the discounted price', () => {});
test('does not show the discounted price', () => {});
test('disables the decrease button when the quantity equals 1', () => {});

//Cart.spec.tsx
test('shows the correct products', () => {});
test('shows the correct order price', () => {});
test('shows the correct delivery price', () => {});
test('shows the correct total price', () => {});
test('allows to apply a valid promo code', () => {});
test('allows to insert new promo code', () => {});
test('does not allow to apply invalid promo code', () => {});
test('updates the prices accordingly when valid promo code is applied', () => {});

We could probably come up with even more test cases but these here are covering the main functionalities of our app.

Writing code

Product component

Let's start with the Product component. First of all, we'll create a default props object that will be passed to the rendered component. For the data source in our project, we are using a mock file. We can use the same data in our tests.

//Product.spec.tsx
import  React  from  'react';
import { render } from  '@testing-library/react';
import  Product, { Props } from  './Product';
import  { mockData }  from  '../../../mock-data';

const  DEFAULT_PROPS:  Props  = {
    product: mockData.products[0],
    handleRemove:  jest.fn(),
    handleAdd:  jest.fn(),
    handleSubtract:  jest.fn(),
};

Most basic tests

Now, let's tackle the first four tests together, as they are very similar - they just check if the passed props are currently rendered on the screen.

//Product.spec.tsx
test('shows the correct name', () => {
    render(<Product {...DEFAULT_PROPS} />);
    expect(screen.getByText(DEFAULT_PROPS.product.name)).toBeInTheDocument();
});

test('shows the correct color', () => {
    render(<Product {...DEFAULT_PROPS} />);
    expect(screen.getByText(DEFAULT_PROPS.product.color)).toBeInTheDocument();});

test('shows the correct price', () => {
    render(<Product {...DEFAULT_PROPS} />);
    expect(screen.getByText(DEFAULT_PROPS.product.price.toString(), { exact: false })).toBeInTheDocument();
});

test('shows the correct quantity', () => {
    render(<Product {...DEFAULT_PROPS} />);
    expect(screen.getByText(DEFAULT_PROPS.product.quantity.toString())).toBeInTheDocument();
});

As you can see, we pass the Product component with DEFAULT_PROPS to the rtl's render method. As you probably guessed, this method will render our component (check the docs for more info).
For better re-usability we can extract the render method like this:

//Product.spec.tsx
const  renderComponent  = (props = {}) => {
    return {
        ...render(<Product {...DEFAULT_PROPS} {...props} />),
        props: {
            ...DEFAULT_PROPS,
            ...props,
        },
    };
};

test('shows the correct name', () => {
    renderComponent();
    expect(screen.getByText(DEFAULT_PROPS.product.name)).toBeInTheDocument();
});

test('shows the correct color', () => {
    renderComponent();
    expect(screen.getByText(DEFAULT_PROPS.product.color)).toBeInTheDocument();
});

test('shows the correct price', () => {
    renderComponent();
    expect(screen.getByText(DEFAULT_PROPS.product.price.toString(), { exact:  false })).toBeInTheDocument();
});

test('shows the correct quantity', () => {
    renderComponent();
    expect(screen.getByText(DEFAULT_PROPS.product.quantity.toString())).toBeInTheDocument();
});

This way:

we don't have to pass the component every time,
we have an access to the props that were used for rendering,
we can pass custom props and overwrite the default ones

Test each

Let's move on to the next test:

//Product.spec.tsx
test.each`
    discount | price     | promoAvailable | expectedDiscountPrice
    ${20}    | ${29.99}  | ${true}        | ${23.99}
    ${25}    | ${56.72}  | ${true}        | ${42.54}
    ${15}    | ${121.55} | ${true}        | ${103.32}
    ${20}    | ${29.99}  | ${false}       | ${23.99}
    ${25}    | ${56.72}  | ${false}       | ${42.54}
    ${15}    | ${121.55} | ${false}       | ${103.32}
`(
    'shows or does not show the discounted price',
    ({ discount, price, promoAvailable, expectedDiscountPrice }) => {
    renderComponent({
        discount,
        product: { ...DEFAULT_PROPS.product, price, promoAvailable },
    });

    if (promoAvailable) {
        expect(screen.getByText(`$ ${expectedDiscountPrice}`)).toBeInTheDocument();
        screen.getByText(`${price}`);
    } else {
        expect(screen.queryByText(`$${expectedDiscountPrice}`)).toBeNull();
        screen.getByText(`$ ${price}`);
    }
);

In this test, we are making sure that promotion is applied correctly to a product and that the discounted price is calculated correctly. You can see on the walkthrough gif, that when the user adds the correct promo code, some of the products are getting their price lowered. It's a straightforward scenario:

if the product can have promo applied to it, we want to check if the old and new price is being rendered
if the product can't have promo applied to it, we want to check if the regular price is being rendered and the discounted priced is NOT being rendered

To make sure we cover a few cases, we will use test.each function.
Every row of the table that we passed to this method, will be a separate chunk of data used in the same assertions test.

Function mocking

The last thing we want to cover in this component is testing the callback passed as props. This is an example for our developer user.

//Product.spec.tsx
describe('fires callback on button click', () => {
    test('add button', () => {
        renderComponent();
        userEvent.click(screen.getByRole('button', { name: /\\+/i }));
        expect(DEFAULT_PROPS.handleAdd).toBeCalled();
        expect(DEFAULT_PROPS.handleAdd).toBeCalledTimes(1);
        expect(DEFAULT_PROPS.handleAdd).toBeCalledWith(DEFAULT_PROPS.product.id);
    });

    test('subtract button', () => {
        renderComponent({
            product: {
                ...DEFAULT_PROPS.product,
                quantity:  2,
            },
        });
        userEvent.click(screen.getByRole('button', { name: /\\-/i }));
        expect(DEFAULT_PROPS.handleSubtract).toBeCalled();
        expect(DEFAULT_PROPS.handleSubtract).toBeCalledTimes(1);
        expect(DEFAULT_PROPS.handleSubtract).toBeCalledWith(
            DEFAULT_PROPS.product.id
        );
    });

    test('remove button', () => {
        renderComponent();
        userEvent.click(screen.getByRole('button', { name: /\\x/i }));
        expect(DEFAULT_PROPS.handleRemove).toBeCalled();
        expect(DEFAULT_PROPS.handleRemove).toBeCalledTimes(1);
        expect(DEFAULT_PROPS.handleRemove).toBeCalledWith(DEFAULT_PROPS.product.id);
    });
});

All three tests have almost identical structure and assertions. We could probably use test.each again in this situation, but wheres in the previous test we had the same element with different data, here we have different behaviours that just happened to have the same test function body, so it's a good practice to test them separately.

Let's break down the code:

we render the component
we use userEvent library to simulate click event
we make 3 assertions:
- has the callback function been called?
- has the function been called only once?
- has the function been called with correct product id?

Worth mentioning that, we can check the callback this way because we assign jest.fn() to it in the DEFAULT_PROPS.

Cart component

We can start in a similar way as we did with the Product component. Let's create a DEFAULT_PROPS and renderComponent function.

//Cart.spec.tsx
import React from  'react';
import { render, screen }  from  '@testing-library/react';
import Cart, { Props }  from  './Cart';
import { mockData }  from  '../../mock-data';

const DEFAULT_PROPS: Props = {
    ...mockData,
    removeProduct: jest.fn(),
    addProduct: jest.fn(),
    subtractProduct:  jest.fn(),
    freeDeliveryPrice:  500,
};

const renderComponent = (props = {}) =>  {
    return {
        ...render(<Cart {...DEFAULT_PROPS} {...props} />),
        props: {
            ...DEFAULT_PROPS,
            ...props,
        },
    };
};

Let's start with the basics and check if products are rendered. We already know that Product component is displaying correct info, so here we can just ensure that the Cart is actually rendering the products. For each product, let's test if its name is shown.

//Cart.spec.tsx
test('shows the correct products', () => {
    renderComponent();
    DEFAULT_PROPS.products.forEach(({ name }) => {
        expect(screen.getByText(name)).toBeInTheDocument();
    });
});

In our UI we have three main prices - order price (sum of products prices), delivery price and a total price (order + delivery prices). Let's make sure they are calculated and displayed correctly.

Price testing

test('shows the correct order price', () => {
    renderComponent();
    const  expectedPrice = 354.65;

    expect(screen.getByText(new RegExp(`${expectedPrice}`, 'i'))).toBeInTheDocument();
});

We can calculate the price and check if it exists in the document.

//Cart.spec.tsx
describe('shows the correct delivery price', () => {

  test('when free delivery price was not exceed', () => {
    renderComponent();
    expect(screen.getByText(/30.00/i)).toBeInTheDocument();
  });

  test('when free delivery price was exceed', () => {
    renderComponent({
      products: [
        ...DEFAULT_PROPS.products,
        {
          id: '5',
          name: 'Blazer',
          color: 'yellow',
          price: 150,
          image: 'images/air-force.png',
          promoAvailable: true,
          quantity: 1,
        },
      ],
    });
    expect(screen.getByText(/free/i)).toBeInTheDocument();
  });
});

In our app, the delivery price can have to values - $30 or Free. It is free if the order price exceeds the freeDeliveryPrice value (we default it to 500 in Cart component). First, we test the situation when the order value is less than 500, in the second we add an additional product to increase the order price and we expect to deliver value to change.

//Cart.spec.tsx
describe('shows the correct total price', () => {

  test('when free delivery price was not exceed', () => {
    renderComponent();
    const expectedPrice = 384.65;

      expect(screen.getByText(/in total:/i)).toHaveTextContent(
        new RegExp(`${expectedPrice}`, 'i')
      );
  });

  test('when free delivery price was exceed', () => {
    const { props } = renderComponent({
      products: [
        ...DEFAULT_PROPS.products,
        {
          id: '5',
          name: 'Blazer',
          color: 'yellow',
          price: 150,
          image: 'images/air-force.png',
          promoAvailable: true,
          quantity: 1,
        },
      ],
    });
    const expectedPrice = 504.65;

    expect(screen.getByText(/in total:/i)).toHaveTextContent(
      new RegExp(`${expectedPrice}`, 'i')
    );
  });

We're doing a similar thing in this test. In both cases, we calculate the expected total price beforehand (with and without the delivery price) and then we query the UI to see if the correct value is rendered.

Promo codes

The last functionality we want to test is adding promotion codes. If the user will input the correct code (they are defined in mocked data), the prices will be reduced accordingly. We already tested that in the Product component, so this time we can focus on order and total price. Specifically, we want to check 3 things:

can we apply a valid code
can we apply an invalid code
are the prices are updated accordingly

//Cart.spec.tsx
test('allows to apply a valid promo code', () => {
  renderComponent();
  const { name, discount } = DEFAULT_PROPS.promoCodes[0];

  userEvent.type(screen.getByRole('textbox'), name);
  userEvent.click(screen.getByRole('button', { name: /apply/i }));

  expect(screen.getByText(/discount applied: /i)).toHaveTextContent(
    discount.toString()
  );
});

test('does not allow to apply invalid promo code', () => {
  renderComponent();

  userEvent.type(screen.getByRole('textbox'), 'INVALID_PROMO_CODE');
  userEvent.click(screen.getByRole('button', { name: /apply/i }));

  expect(screen.getByRole('alert')).toMatchInlineSnapshot();
});

test('updates the prices accordingly when valid promo code is applied', () => {
  renderComponent();

  const { name } = DEFAULT_PROPS.promoCodes[0];

  userEvent.type(screen.getByRole('textbox'), name);
  userEvent.click(screen.getByRole('button', { name: /apply/i }));

  const orderPrice = 314.21;

  expect(
    screen.getByText(new RegExp(`${orderPrice}`, 'i'))
  ).toBeInTheDocument();
  expect(screen.getByText(/in total:/i)).toHaveTextContent(
    new RegExp(`${orderPrice + 30}`, 'i')
  );
});

First of all, we want to input the promoCode and submit it. We can use userEvent library to do both of those tasks.

In the first case, we want to check if the code is correctly applied by querying for the success text and checking its discount value.

In the second test, we're inserting an incorrect code and then check for the alert rendered in the UI. This time we want to use this very cool jest assertion - toMatchInlineSnapshot. I'm not a big fan of snapshot testing, but in this case, it's a perfect match. The alert text can be considered as an implementation detail, so we don't want to hardcode its value. Notice that, after the first run the snapshot will be generated right in the test. If someone is going to change the text of the alert message, the test will catch it and you will have the option to decide if it's correct by updating the snapshot.

The third test is pretty much the copy of previous tests. We just look for an updated order and total price value.

To sum up

As you can see, testing React applications with Jest and RTL it's really cool and not that complicated. Thanks to them we got a lot of great tools to make sure our applications works as it's expected. Like I've mentioned at the beginning, because of the approach to not to test the implementation details, specs give us a lot of confidence before shipping the app/website/product.

Hope this short article gives you some more understanding of Rect testing and will help you with your future projects. Last one thing at the end, and I can't stress this enough, when in doubt always check Kent's materials about testing. They are great and will definitely help you to answer most of the questions and concerns you have when writing tests.

Setup Next.js with Typescript , Jest and React Testing Library

Maciek Grzybek — Fri, 25 Sep 2020 15:13:23 +0000

Why?

Next.js is a super cool React framework, that gives you an amazing developer experience. In this episode, I'll show you how to set it up with Typescript, Jest and React Testing Library.

Setup

To set up the project we'll need to follow these steps:

to create Next app, from your terminal run

npx create-next-app

install typescript as well as react and node types

npm install typescript @types/react @types/node -D

install jest, react testing library, babel-jest, @testing-library/jest-dom and types for jest

npm i jest @testing-library/react @types/jest babel-jest @testing-library/jest-dom @testing-library/user-event @testing-library/dom -D

create config files for typescript and babel

touch tsconfig.json
touch .babelrc

add to the babel config file

{
  "presets": ["next/babel"]
}

create jest.config.js and jest.setup.ts files

// jest.config.js
module.exports = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
};

// jest.setup.ts
import '@testing-library/jest-dom';

start the app so next can configure typescript

npm run dev

BONUS

If you're going to use CSS modules, make sure you also include these steps:

install identity-obj-proxy package

npm i identity-obj-proxy -D

update jest.config.js file to look like this

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
  moduleNameMapper: {
    '\\.(scss|sass|css)$': 'identity-obj-proxy',
  },
};

Now we are good to go, you can start changing your component from .js to .tsx and building your awesome app.

Repetitive tests with jest - Little Bits

Maciek Grzybek — Fri, 21 Aug 2020 15:50:13 +0000

Little Bits is a series of short articles explaining quick solutions to common dev problems. No unnecessary descriptions or code snippets. No bullshit.

In this short article, I want to show you how you can run repetitive test cases with Jest. This is specifically useful when testing helpers and utility methods.

Useful links:

[Jest]https://jestjs.io/docs/en/api#1-testeachtablename-fn-timeout

The problem

Let's say we have a simple method for some kind of string manipulation. The function takes an original string and adds another one to it. We can also define if we want the new string to be added at the end or the beginning, as well as change it to be uppercased.

const addToString = (word, addition, placement, upperCase) => {
  let stringToReturn;

  if (placement === 'end') {
    stringToReturn = `${word}${addition}`;
  } else {
    stringToReturn = `${addition}${word}`;
  }

  return upperCase ? stringToReturn.toUpperCase() : stringToReturn;
};

To test it we could so something like that:

test('changes string node to node_js', () => {
    expect(addToString('node', 'js_')).toBe('js_node');
});

test('changes string node to _jsnode', () => {
    expect(addToString('node', '_js', 'end')).toBe('node_js');
});

...

And so on with other possible scenarios.

How to solve it

Instead, we can use amazing jest method test.each:

test.each`
  originalWord | addition | placement    | uppercase    | expected
  ${'node'}    | ${'js_'} | ${undefined} | ${undefined} | ${'js_node'}
  ${'node'}    | ${'js_'} | ${'end'}     | ${undefined} | ${'nodejs_'}
  ${'node'}    | ${'js_'} | ${null}      | ${true}      | ${'JS_NODE'}
  ${'node'}    | ${'js_'} | ${'end'}     | ${true}      | ${'NODEJS_'}
`(
  'changes string $originalWord to $expected - uppercase -> $uppercase',
  ({ originalWord, addition, placement, uppercase, expected }) => {
    expect(addToString(originalWord, addition, placement, uppercase)).toBe(expected);
  }
);
....

Summary

As you can imagine, this works really well with bigger methods that have lots of different permutations as you can pass tens of different test scenarios while handling only one assertion. I hope that this article will help you with writing amazing tests.

I've created React lazy loading component

Maciek Grzybek — Thu, 16 Apr 2020 07:45:15 +0000

React Laz-Y

Few weeks ago I've built a simple component that utilize React Lazy API and browser Intersection Observer API. In simple words, React Laz-Y allows you to lazy load your component when it appears in the browser's viewport. Thanks to that you don't have to load components that user won't see on the first render, React Laz-y will detect the scroll position for you and inject the correct code when it's actually needed.

Where and how?

You can check it on npm website or on my GitHub account
Usage should be pretty straightforward and everything is explained in the docs.

I hope you'll find this useful 🙂

Next.js vs Gatsby.js - Thread

Maciek Grzybek — Wed, 02 Oct 2019 16:10:42 +0000

What do you guys think?

P.S. I don't want to start a war here :) I'm just honestly interested what are the opinions in our industry :)

Build and deploy to NPM your React component with Neutrino.js - Little Bits

Maciek Grzybek — Fri, 06 Sep 2019 15:45:56 +0000

Little Bits is a series of short articles explaining quick solutions to common dev problems. No unnecessary descriptions or code snippets. No bullshit.

In this short article, I want to show you how you can easily set up your dev environment for building React component and then how you can deploy it to NPM so other developers can start using it.

Useful links:

Plan

Create a project - yarn or npx
Build a component or use the default one
Run build
Prepare package.json file
Deploy to NPM

1. Create a project - yarn or npx

yarn create @neutrinojs/project my-not-really-exciting-component

npx @neutrinojs/create-project my-not-really-exciting-component

After that Neutrino will ask you about your project. Select Components -> React components. In the next step choose the testing library (I usually go for Jest) and linting style (Airbnb or StandardJS). Neutrino will install all the dependencies and set up the boilerplate.

2. Build a component or use the default one

Neutrino supplies us with a simple HelloWorld component. We will use it in this step, but obviously, in a real-world scenario, build something awesome.
TIP: Add readme.md file with directions for installing, configuring, and using your code.
To run the dev environment run:

yarn start

npm start

That will open localhost:5000 with your project.

3. Run build

If you're happy with your component run:

yarn run build

npm run build

Your project is optimized and ready for production.

4. Prepare package.json file

Before deploying our super component, we need to add some details to package.json. Here's a sample, minimal configuration:

{
  "name": "my-not-really-exciting-component",
  "version": "1.0.0",
  "description": "My component, not really exicitng.",
  "main": "build/HelloWorld.js",
  "author": "Your Name <your_email@gmail.com>",
  "repository": {
    "type" : "git",
    "url" : "https://github.com/yourprofile/my-not-really-exciting-component"
  },
 "keywords": [
    "react",
    "javascript",
    "component"
  ],
  "license": "MIT",
  "scripts": {
    "build": "neutrino build",
    "start": "neutrino start",
    "lint": "neutrino lint",
    "test": "neutrino test"
  },
  "devDependencies": {
    "@neutrinojs/airbnb": "^8.3.0",
    "@neutrinojs/jest": "^8.3.0",
    "@neutrinojs/react-components": "^8.3.0",
    "neutrino": "^8.3.0",
    "prop-types": "^15.7.2",
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  }
}

5. Deploy to NPM

Create an account on npm. After that, from your terminal simply run:

npm publish

Summary

That's it, you've managed to successfully deploy your react component to the NPM registry. Now anyone else can start using it in their projects and you just need to prepare for all the dev fame coming your way 😎.

Make your website live with Serverless framework - Little Bits

Maciek Grzybek — Wed, 07 Aug 2019 14:36:00 +0000

Little Bits is a series of short articles explaining quick solutions to common dev problems. No unnecessary descriptions or code snippets. No bullshit.

What we are going to do?

Deploy GatsbyJS project to AWS S3 bucket, with live URL to view the website.

What tools we are going to use?

Plan

Create AWS account.
Setup credentials
- Install the Serverless framework globally.
- Create an IAM User and Access Key
- Setup AWS credentials on your machine.
Create GatsbyJS starter project.
Install the Serverless project and serverless-finch plugin.
Setup configuration for the plugin.
Deploy the website.

1. Create AWS account.

Pretty self-explanatory. To start using AWS, you need to create an account.
NOTE: You'll have to add your credit card details, but don't worry, AWS have free tiers and you'll probably won't go over them. Unless you'll use some massive AI calculations, and stick with the S3, you're sorted.

2. Setup credentials

Install Serverless framework globally.

From your terminal run:

npm install -g serverless

or, if you're using Mac:

sudo npm install -g serverless

Create an IAM User and Access Key

Login to your AWS account and go to the Identity & Access Management (IAM) section. Create a new user with Admin permissions.

Setup AWS credentials on your machine

Get your access key and secret key from IAM account and run the command from your terminal:

serverless config credentials --provider aws --key <your-access-key> --secret <your-secret-key>

Watch this awesome, short video from Serverless if you're stuck.

3. Create gatsby starter project.

From the terminal run:

gatsby new my-awesome-website https://github.com/gatsbyjs/gatsby-starter-default

Of course, it doesn't have to be GatsbyJS project, you can use whatever you want.

4. Install the Serverless project and serverless-finch plugin.

In terminal go to your new website folder:

cd my-awesome-website

Now simply run:

serverless

and follow the prompts. Remember to choose AWS Node.js environment.
Now install the serverless-finch plugin. To do it, run:

npm install --save serverless-finch

5. Setup configuration for the plugin.

To set up the plugin, update your serverless.yml file with:

plugins:
  - serverless-finch
custom:
  client:
    bucketName: unique-s3-bucketname #Bucket will be created automatically.
    distributionFolder: public
    #You can find more config options on the plugin's GitHub page.

Your serverless.yml file should look something like that(after removing all the comments from the installation process):

service: awesome-name
app: awesome-name-app
org: your-name

provider:
  name: aws
  runtime: nodejs10.x
plugins:
  - serverless-finch
custom:
  client:
    bucketName: unique-s3-bucketname #Bucket will be created automatically.
    distributionFolder: public
    #You can find more config options on plugins github page.
functions:
  hello:
    handler: handler.hello

6. Deploy the website.

From the terminal run the build process for your website:

npm run build

After that run the deployment command:

serverless client deploy

and follow the prompts. At the end of the proccess, you'll receive an URL for your shiny new website.

Summary

That's it, you've managed to successfully deploy your static website to AWS S3 Bucket. Now you can try and add a custom domain name, connect your website to CloudFront or whatever else is needed.
If you liked this article, and you think that short, compact form is cool (or if you don't 😃) let me know in the comments section.

DEV Community: Maciek Grzybek

Ramka - Create your profile pic

Animate on scroll with Svelte Inview - Little Bits

Little Bits is a series of short articles explaining quick solutions to common dev problems. No unnecessary descriptions or code snippets. No bullshit.

Problem

Solution

Create an app with Vite

Add scaffolding

Add AnimatedElement component

Useful links

Ultimate guide to sorting in Javascript and Typescript

Introduction

Basic sorting

How the compare function works

TIP

Sorting with localeCompare method

Locale

Options

Casing

Numeric values

Real-life examples

Sorting an array of objects

TIP

Sorting based on different values

TIP

Sorting based on another array

External libraries

lodash

sortBy

orderBy

fast-sort

Summary

Promise.allSettled explained - Little Bits

Little Bits is a series of short articles explaining quick solutions to common dev problems. No unnecessary descriptions or code snippets. No bullshit.

Problem

Solution

Summary

Testing Next.js pages - Little Bits

Why?

Setup

App

Preparing mocks

Writing tests

Summary

Testing UI - Next JS, Typescript, Jest and React Testing Library

Intro

What we are going to test?

Writing code

Product component

Most basic tests

Test each

Function mocking

Cart component

Price testing

Promo codes

To sum up

Setup Next.js with Typescript , Jest and React Testing Library

Why?

Setup

BONUS

Repetitive tests with jest - Little Bits

Little Bits is a series of short articles explaining quick solutions to common dev problems. No unnecessary descriptions or code snippets. No bullshit.

Useful links:

The problem

How to solve it

Summary

I've created React lazy loading component

React Laz-Y

Where and how?

Next.js vs Gatsby.js - Thread

Build and deploy to NPM your React component with Neutrino.js - Little Bits

Little Bits is a series of short articles explaining quick solutions to common dev problems. No unnecessary descriptions or code snippets. No bullshit.

Useful links:

Plan

1. Create a project - yarn or npx

2. Build a component or use the default one

3. Run build

4. Prepare package.json file

5. Deploy to NPM

Summary

Add `AnimatedElement` component

Sorting with `localeCompare` method