DEV Community: Derya A. Antonelli

Automate Vercel Preview Deployments with GitHub actions: A Step-by-Step Guide

Derya A. Antonelli — Mon, 28 Oct 2024 11:25:59 +0000

Introduction

Vercel Preview Deployments allow you to stage changes in a live environment before merging them to a production branch. This tutorial will guide you through configuring GitHub Actions to deploy pull requests (PRs) on Vercel automatically. Once deployed successfully, the Vercel bot will post the preview URL as a comment in the PR.

Prerequisites

Basic familiarity with Continuous Integration using GitHub Actions

Step-by-Step Guide

1. Create the GitHub Action Workflow

Let’s start by creating workflow file: .github/workflows/preview.yaml

name: GitHub Actions Vercel Preview Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

on:
  pull_request:

jobs:
  Deploy-Preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: amondnet/vercel-action@v25.2.0
        with:
         vercel-token: ${{ secrets.VERCEL_TOKEN }}
         vercel-org-id: ${{ secrets.VERCEL_ORG_ID}}
         vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID}}
         github-comment: 'true'
         github-token: ${{ secrets.GITHUB_TOKEN }}
         scope: ${{ secrets.VERCEL_ORG_ID}}

2. Set Up Vercel CLI and Login

If you don’t have a Vercel account yet, you can create new one here.

npm i -g vercel
vercel login

3. Create new Vercel project

In your project directory, run vercel link to create a new project on Vercel. Answer the prompts based on your settings. If you're linking the project for the first time, your answer may be no to Link to existing project prompt:

? Set up “~/repos/demo-vercel-ci”? yes
? Which scope should contain your project? my projects
? Link to existing project? no
? What’s your project’s name? demo-vercel-ci
? In which directory is your code located? ./

After linking, a .vercel folder will be automatically added to your project's root directory and included in your .gitignore file.

project-root/
├── .github/
│   └── workflows/
│       └── preview.yaml
├── .vercel/
│   ├── project.json
│   └── README.txt
├── .gitignore

3. Configure GitHub Secrets

Next, we will configure the secrets required for the workflow. Inside the .vercel folder save the save the projectId and orgId from the project.json.

VERCEL_TOKEN=
VERCEL_ORG_ID=
VERCEL_PROJECT_ID=

To generate a Vercel token, navigate to the Account Settings page under your personal account dropdown on Vercel.

Create a new token, and save it as shown only once.

Let’s add repository secrets to GitHub. Go to Settings > Secrets and Variables > Actions > Repository Secrets and add secrets as shown below:

4. Set Workflow Permissions

To allow the Vercel bot to comment on PRs, go to https://github.com/OWNER/REPO/settings/actions. Under Workflow Permissions, select Read and Write permissions.

5. Push your changes

Commit and push your changes to open a pull request. GitHub Actions will then automatically deploy the preview to Vercel.

Source code

You can download the source code here

Resources

Introducing FixLog, a property maintenance logger

Derya A. Antonelli — Sun, 13 Oct 2024 16:02:44 +0000

This is a submission for the The Pinata Challenge

What I Built

FixLog is a simulation of a property maintenance logger tool that helps users log maintenance issues in their rental properties. Users can log in with a demo account as a renter and report property issues by filling out an issue form where they can upload images to help property managers track what's going on.

Demo

Check out live demo here!

My Code

The full project is available on GitHub: fixlog.

More Details

For a quick start, I leveraged Pinata’s starter project, which came with a bunch of useful functions to upload, fetch, and preview media files.
I used Pinata SDK in my Next.js API routes to upload group image files to IPFS.
Pinata Gateway: The files are retrieved using the Pinata gateway, leveraging URL queries to optimise images on the fly!

Thank you for reading and feel free to leave comments below :)

How to render RAW format of excerpt from WPGraphQL plugin using React

Derya A. Antonelli — Fri, 27 Aug 2021 08:17:42 +0000

Welcome to my second post from "How to?" series. Some of you might be experiencing issues with rendering RAW format of excerpt if you're reading this article. I'll explain the reasons why this is the case, some of the solutions to sort this out and my step-by-step guidance to render excerpt using dangerouslySetInnerHTML in React.

Prerequisites

A WordPress instance with WPGraphQL plugin.
New to WordPress? WPGraphQL offers an introduction to WordPress for beginners here.
A React app. You can use this built-in toolchain by React to create a single-page app.

Problem: excerpt(format: RAW) in the query returns null in React while it is working fine in WPGrapghQL editor.

This is your query:

query GetExcerpt {
  posts(where: {}, first: 1) {
    edges {
      node {
        excerpt(format: RAW)
      }
    }
  }
}

When you run the query, this is how response looks on WPGraphQL window:

{
  "data": {
    "posts": {
      "edges": [
        {
          "node": {
            "excerpt": "\"In this tutorial, we are simply scratching the surface on what's available with this new and amazing service.\""
          }
        }
      ]
    }
  }

Let's check out how our query returns data when we make this request from our React app:

{
  "data": {
    "posts": {
      "edges": [
        {
          "node": {
            "excerpt": null
          }
        }
      ]
    }
  }

We have a situation where our query works well in GraphQL plugin window, returning "excerpt": "\"In this tutorial, we are simply scratching the surface on what's available with this new and amazing service.\"" while the same query results in "excerpt": null in our React app.

The main reason why this is happening is because user (in this case you) needs authentication in order to access the RAW content. Because the query was done in admin area, it worked well in the GraphQL window. However, not all values are publicly visible on remote requests.

GraphQL plugin offers these visibility options:

Administrative content: Types and properties are kept visible only to registered users for security reasons. Unauthorized users need to set user authentication & authorization to access data depending on the situation.
Public content: This content is visible to not-registered users.

Solutions
One of these three solutions might help you get this sorted.

Authenticate the query in your app.
Override private flag in admin settings which is described here.
Change query format to default and use dangerouslySetInnerHTML to display content.

Let's take the easiest way and implement step 3.

Firstly, let's remove format option from query:

query GetExcerpt {
  posts(where: {}, first: 1) {
    edges {
      node {
        excerpt
      }
    }
  }
}

This query will return this data:

  "data": {
    "posts": {
      "edges": [
        {
          "node": {
            "excerpt": "<p>&#8220;In this tutorial, we are simply scratching the surface on what&#8217;s available with this new and amazing service.&#8221;</p>\n"
          }
        }
      ]
    }
  }

Excerpt value is an HTML formatted string. In order to render HTML directly, we'll use dangerouslySetInnerHTML property by React.

<div dangerouslySetInnerHTML={{ __html: node.excerpt }}></div>

Now data will render without HTML tags.

Important note:
As the name suggests, dangerouslySetInnerHTML comes with its own risk as input is rendered without sanitization and your page will be vulnerable to cross-site scripting (XSS) attacks. This might be a case with unsafe inputs.

How to fetch data with static rendering in next.js

Derya A. Antonelli — Mon, 16 Aug 2021 08:48:24 +0000

Welcome to my first post on How to? series. In this article, I'm going to show step-by-step tutorials to getting Next.js to render your fetched content on a statically generated page. For doing this, we'll use getStaticProps() function which will be covered in later sections.

At the end of tutorial, our page will look like this:

You can access the finished project here.

Prerequisites

A WordPress instance with WPGraphQL plugin.

In these examples, I utilized WordPress headless CMS (content-management system) for managing blog contents and WPGraphQL API for fetching data. If you are interested in learning about how to configure Wordpress CMS from the scratch, I suggest you check out Rob Kendal's Configuring WordPress as a headless CMS with Next.js article series. For this exercise, you are free to to fetch content from any headless CMS of your choice.

Step 1: Creating a Next.js project

We'll start by creating a new project by using project create tool by Next.js. Open your terminal, and run the following command:

npx create-next-app nextjs-blog

Then, run this command:

cd nextjs-blog

cd stands for "change directory", so we are simply changing our current directory to the project folder we just created.

This step is optional for VS code users. When you run the command below, your project folder will automatically open on VS Code:

code .

In order to run our project on the development server, run this command:

npm run dev

Now your page will run on port 3000. This is how it looks:

Step 2: Remove files

Now open your project on any code editor you like (I prefer VS Code) and remove these files:

/pages/api
/pages

Alternatively, I generally find integrated terminal of VS Code very handy in managing the file operations. On VS Code, navigate to View > Terminal menu command to open your terminal. There's no need to change directory as it'll directly start in the root of the project. Then, type this command:

rm -r pages/api

Now folder structure will look like this:

Step 3: Add files

Add /lib folder in the root of the project.
Add /lib/api.js file.
Add /.env.local file in the root of the project.

Step 4: Saving local environment

We have created /.env.local file for managing our application environment constants. These constants generally consist of URLs, API endpoints, and API keys. In our case, we will keep our URL in our local environment file. In /.env.local, type your unique domain name of your WordPress instance with GraphQL endpoint:

WP_API_URL=http://www.your-custom-website.com/graphql

Important Note
Make sure that you restart the development server after making changes in the /.env.local file.

Step 5: Fetching data

Now that we have got our WP_API_URL variable covered, we can start writing our functions for fetching data. Navigate to /lib/api.js and add this line:

const API_URL = process.env.WP_API_URL;

async function fetchAPI(query, { variables } = {}) {
  const headers = { 'Content-Type': 'application/json' };

  const res = await fetch(API_URL, {
    method: 'POST',
    headers,
    body: JSON.stringify({ query, variables }),
  });

  const json = await res.json();
  if (json.errors) {
    console.log(json.errors);
    console.log('error details', query, variables);
    throw new Error('Failed to fetch API');
  }
  return json.data;
}

We've created this function to fetch the blog contents with GraphQL query parameter. You can consider this function as a reusable structure that can be utilized throughout different fetch requests.

Then, it's time to ask GraphQL to fetch our content by adding this function:

export async function getRecentPosts() {
  const data = await fetchAPI(`query getRecentPosts {
  posts(where: {orderby: {field: DATE, order: DESC}}, first: 6) {
    edges {
      node {
        id
        title
        slug
        featuredImage {
          node {
            altText
            mediaItemUrl
          }
        }
      }
    }
  }
}
`);

  return data?.posts;
}

Step 6: Change index file

Now we will perform some changes in pages/index.js, which is the entry page. Remove everything between <main></main> elements before pasting the code below, also remove <footer></footer>.

        <section>
          <div className={styles.articlesContainer}>
            <h1 className={styles.articleTitle}>latest articles</h1>
            <div className={styles.articleGrid}>
              {edges.map(({ node }) => (
                <div className={styles.article} key={node.id}>
                  <img
                    src={node.featuredImage.node?.mediaItemUrl}
                    alt={node.featuredImage.node?.altText}
                    className={styles.articleThumb}
                  />
                  <h2 className={styles.articleContent}>{node.title}</h2>
                </div>
              ))}
            </div>
          </div>
        </section>

We import fetch function on the top of the page, which we'll utilize to make a request for fetching blog contents.

import { getRecentPosts } from '../lib/api';

Add this parameter to the Home function component.

{ recentPosts: { edges } }

This is how our Home component looks like now. Parameters will be covered in the next section.

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { getRecentPosts } from '../lib/api';

export default function Home({ recentPosts: { edges } }) {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <section>
          <div className={styles.articlesContainer}>
            <h1 className={styles.articleTitle}>latest articles</h1>
            <div className={styles.articleGrid}>
              {edges.map(({ node }) => (
                <div className={styles.article} key={node.id}>
                  <img
                    src={node.featuredImage.node?.mediaItemUrl}
                    alt={node.featuredImage.node?.altText}
                    className={styles.articleThumb}
                  />
                  <h2 className={styles.articleContent}>{node.title}</h2>
                </div>
              ))}
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}

Now it is time to add the Next.js function at the bottom of /pages/index.js:

export async function getStaticProps() {
  const recentPosts = await getRecentPosts();
  return {
    props: {
      recentPosts,
    },
  };
}

What role getStaticProps() function play here?

Next.js has one very important concept: pre-rendering.
That means, instead of having client-side run JavaScript and generate HTML such as in React, Next.JS generates HTML in advance and sends each generated page to client-side. Every page has been associated with a JavaScript code executed to make page interactive after being loaded by the browser. This is a process called hydration. You can make a simple experiment to see how this works: turn off JavaScript on your browser, run a Next.js project, and see the magic. HTML will still be rendered on your browser, however, it'll not be interactive until JavaScript is turned on.

Static generation, on the other hand, is one of the methods of pre-rendering that generates HTML at build time. Using getStaticProps() function, we have generated a static page with data dependencies, in this case, our blog contents. We simply asked Next.js to fetch the data with async getStaticProps() function. Then, Next.js produced a statically generated HTML passing the props of fetched data to the parameters of Home component, and sent it to the client-side. That's it! Next.js will make sure that data is fetched before the HTML is rendered, and all these happened in build-time.

Image is taken from official Next.js website

One important note

Please make sure you use getStaticProps() function in a file located under /pages folder as it works only in a page.

Finally, our /pages/index.js page will look like this:

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { getRecentPosts } from '../lib/api';

export default function Home({ recentPosts: { edges } }) {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <section>
          <div className={styles.articlesContainer}>
            <h1 className={styles.articleTitle}>latest articles</h1>
            <div className={styles.articleGrid}>
              {edges.map(({ node }) => (
                <div className={styles.article} key={node.id}>
                  <img
                    src={node.featuredImage.node?.mediaItemUrl}
                    alt={node.featuredImage.node?.altText}
                    className={styles.articleThumb}
                  />
                  <h2 className={styles.articleContent}>{node.title}</h2>
                </div>
              ))}
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}

export async function getStaticProps() {
  const recentPosts = await getRecentPosts();
  return {
    props: {
      recentPosts,
    },
  };
}

Step 7: Change style files

Open /styles/globals.css, delete all content, and paste this code:

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%; /* 1 rem = 10px; 10px/16px = 62.5% */
}

body {
  font-size: 2.5rem;
  box-sizing: border-box;
  line-height: 1.5;
}

Then, navigate to /styles/Home.module.css, delete all content, and paste this code:

.articleTitle {
  font-size: 3rem;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.12em;
}

.articleContent {
  font-size: 2.5rem;
  padding: 0 6.5rem;
  text-align: center;
  font-weight: 400;
}

.articlesContainer {
    padding: 6.5rem 4rem;
}

.articleGrid {
    margin-top: 6.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 6.5rem;
    column-gap: 3rem;
}

.articleThumb {
    width: 100%;
    height: 28rem;
    margin-bottom: 3rem;
}

And done! You've generated a static page with external data dependencies.

I hope you find this article helpful. Thank you for reading.

My step by step guide in solving coding problems

Derya A. Antonelli — Tue, 01 Sep 2020 09:21:04 +0000

We, developers, either paid or unpaid, either students or interns, face challenges every day, one of them is solving problems. When I say problems, you might think about those mighty interview questions that require algorithms or just positioning a div or maybe starting your own project. With some problems you may have a deadline, with others may be unlimited time to present a solution. But in the end, one thing in common: they are problems.

Let me give a short introduction about myself. I am a Front-End Developer coding my portfolio page in order to dive into the job searching. I am self-taught, self-teaching, self-coding or whatever. I have encountered numerous problems no matter what the size of the code is. In this boring post, I'd like to share some methods I find useful to give you some idea.

1. Understanding what the problem is

"Understanding is the solution to every problem." B. J. Armstrong

Now let's assume I am trying to centre a div and whatever random solutions I generate does not make it work.

Random solutions
Yes, this was what I used to do on the initial stage of my coding journey. Just making random changes by random reasoning, without giving a second thought, by changing style properties without understanding what is REALLY going on there.

Does random reasoning really work?
Yes, sometimes it works but next time I encountered a similar issue, I would spend hours, then again, and so on. However, I believe that random success is not true success, it is just a temporary victory. What defines success is, reaching a solution based on understanding - this may apply even to our everyday relations with others.

Let's go back to div
My old version would do random reasoning. What my current version would do if encountered this problem? Firstly, I would open the notepad application on my computer and start to write down step by step. So, let's begin.

Div is not working
Good start. At least I am aware of what is NOT going on there. Defining problem is actually the first step of reaching a solution. Now, let's start to be more clear, aiming at finding out the right question like, what does div NOT do?

Div is not working because it does not centre
Very well done! The second step is achieved. Now I narrow down the problem. Let's go deeper and deeper. But, why this div does not work? I open the notebook, start to write down:

1. It does not work because there should be a typo somewhere.

2. It does not work because I do not know how div works.

2. Ok, problem understood, let's write down to-do list step by step

To-do List for number 1
(It does not work because there may be a typo somewhere.)

Check if there is a syntax error with code. Maybe I just missed a semicolon somewhere, or just a curling brace is accidentally removed. But how can I debug my code?
- Use Chrome tools.

Now I have done what Number 1 asked for. There is no typo in code, now at least I eliminated 1st possibility and will not distract myself with this topic anymore. Otherwise, if I found a bug, the problem would be solved and taking the rest of the steps would not be required anymore.

To-do List for Number 2
(It does not work because I do not know how div works.)

Search what is a div and how it functions
- Go to MDN documents and find out.
Now turn back to code and see if there are any semantic errors, like treating the div as an inline element although I just found out that it is a block element!
- Yes, I just found out where the mistake is!
- No, I could not fix the bug.

At this step, if I found a bug, that means methods worked. If the result has not changed, now let's find out new methods.

1. Div still does not work because I still could not figure out how div functions.

This is perfectly fine! Now it is time to get help from others.

To-do List

Go to discussion topics, read the posts carefully and find out the questions raised by others. I would try to look at more recent posts because technologies change very fast.

At this point, I'll probably find other developers struggling like me, that means I'm not alone! After this point, I will encounter two ways:

I found out an answer and compared and applied that with my code. Now div can centre.
No, this method did not work.

No worries, now it is time to get in touch with other developers. To do this in a correct way:

Show my code snippet,
Share methods I tried,
Share what I want to do.

That's it! Tech is a great community and surely there will be someone reaching out for help.

However, sometimes things might not work out as expected and no matter what I do, I do not seem to solve issues. In that case, it is crucial to take a step back and refresh my mind to look at the problem with brand new eyes. Because mostly in those moments I spent hours trying to work it out without having any idea of what actually I am doing. Therefore, solving a problem requires two things: a positive mental state and taking the right steps.

That's it from me! Thank you for your time reading this article. If you have any other methods that work well in solving problems, you're welcome to bring it onto the discussion topic below.

Collection vs Collections in Java

Derya A. Antonelli — Wed, 29 Jan 2020 14:42:47 +0000

Collection Framework

The Collection is the top-level interface of the Java Collection Framework.
List, Queue and Set are the main sub interfaces of this framework. Collection interface is a member of java.util.package. There are several methods in Collection interface for adding/removing elements, getting the size of an array, iteration, or check if an array is empty.

Image source: javatpoint/collections

I'd like to present an informal overview of some of the classes of Collection.

ArrayList: Uses dynamic array to store elements. Duplicates are allowed in this list. It is also index-based, which is a perfect match for those who want to insert data in order, retrieve based on its index, and access randomly.
For instance, you can create a program that implements a simple mobile phone, which is able to store, modify, remove and query contact names and hold the contacts in ArrayList. You may, as well, create a playlist and add/remove albums.
Please bear in mind that removal of an element changes the array order.
LinkedList: Uses doubly linked list to store elements. In basic terms, let's say you are a group of friends who want to form a chain in a LinkedList, so that you might accept new friends and remove existing ones faster(Wow, this is rude). The rule is simple; you will hold the address reference of your left and/or right side friends depending on where you are. Any newcomers are welcome, and existing ones are free to leave whenever they desire. When someone leaves the chain, left and right elements delete his/her address and link to the previous and/or next friends. No one in this chain needs to move on to fill the space left by previous member(s)! That means, the operation will be quicker than the one in an ArrayList, which sounds cool. (This really matters if you are thousands of friends.) You can also ask the iterator if there's someone in your right or left, and move on!
HashSet: Uses hashing to store the elements. Duplicates are not welcome, insertion order is not maintained, null value is allowed. Here immutability is of great importance because if you prefer non-primitive data types in the array, modification of an object/object class may lead to unwanted results. In order to store your objects in HashSet, you need to override equals() and hashCode() methods. For instance, you implement a student class with name and school number class members. In order to insert each student to HashSet, first of all, HashSet needs to know your equality criteria before insertion. In other terms, you define which students are equal and which are not. In this way, HashSet will not add duplicates that are equal to the list. Each student's location is calculated through HashCode() method. Searching for a student on this list is very effective and fast.

An example of how to override HashCode() is:

@Override public int hashCode() { return this.name.hashCode() +11; }

4.LinkedHashSet: In addition to the features inherited from HashSet class, you can keep the insertion order.

The classes are not limited to the above. You can check Javadoc to see all implementing classes.

Collections

Java Collections class, on the other hand, is a support tool which includes a variety of useful methods that work with collections of Java. Do you want to rotate, sort, reverse the elements in your array? You are on the right address.
If your collection elements are List type, there are static methods provided by Collections class for sorting. (For Set type items, you can use TreeSet for this purpose).

Let's assume you have a Theatre class with Seat inner class. You create an ArrayList with Seats.

List myList = new ArrayList<>(theatre.getSeats());

You can rotate the elements in the list:

Collections.rotate(myList, 4);

Or you can reverse them:

Collections.reverse(myList);

You can see further methods here.

Thanks for reading. See you until my next post!
Derya