Create a serverless book library app with HarperDB and Gatsbyjs
Tags: javascript, jamstack, harperdb, gatsby
Published: 2021-06-15 05:37:59

One of the many advantages of trying out `side-projects` is, you never run out of the ideas of trying out something new. For example, recently, I had an opportunity to try out a modern, easy-to-use, fast database, `HarperDB`. As I learned how to set up and use it, I could further explore building a serverless app using it. 

This article will learn how to create a serverless `book library` app using `HarperDB` and `Gatsbyjs`. We will also learn to deploy the app on the `Gatsby Cloud`. I hope you enjoy following along and build the app with me.

# So, What are we going to learn?
We will learn to,

- Setting up `HarperDB`.
- Configure the `Schema and Table` in HarperDB.
- Populate `data` in HarperDB.
- Setting up a `Gatsbyjs` project.
- Use a `Gatsbyjs Plugin` to access HarperDB data at the build time.
- Build the user interfaces for the book library app. It's all with `Reactjs`.
- Deploy the app on the `Gatsby Cloud` to access it publicly.

At any point in time, feel free to refer to the source code of the app from the GitHub repository,

> {% github atapas/flicks %}

Here goes a quick demo of the app that we will build in the next 12-15 minutes.

> {% youtube ErdlYiRVhSA %}

Here is the demo of the library app. Please feel free to access and use.

> [https://flicks.gatsbyjs.io/](https://flicks.gatsbyjs.io/)

## Prerequisites
You need a couple of prerequisites,

- You must have `Node.js` installed. Please make sure you have installed Node.js version >= 12.13.0. You can download and install Node.js [from here](https://nodejs.org/en/download/current/). You can check the version of the existing Node.js installation using the command, `node -v`.
- Knowledge of Reactjs would be helpful as Gatsbyjs is React-based.

# Before we begin, What is `serverless` anyway?
There is a high chance that you may have a couple of doubts as I had about the term `serverless`.
- Does serverless mean there are no servers involved at all in the app development?
- Are we talking about the [Serverless Framework](https://www.serverless.com/) by any chance?

Nope, both of them are not true in the context of this article. A server exists to provide services. It could be e-mail, form, hosting, and even database. By `serverless` it doesn't mean there are no servers involved in the app development. It instead means we as developers do not set up, manage, and maintain these servers. Instead, we leverage the services made available and managed by providers like Google, Amazon, Netlify, Vercel, Gatsby, HarperDB, and many more.

Coming to the second point above, the `Serverless Framework` is a service that helps us to go serverless. However, we will not use it in this article.

# HarperDB
`HarperDB` is a fast, flexible database that allows you to perform rapid application development, distributed computing, SaaS, and many more. To set up HarperDB in a serverless way, we need to configure a cloud instance. But the first thing first, let's create an account with HarperDB.

## Setting Up HarperDB

Please browse to [https://harperdb.io/](https://harperdb.io/) and create an account for free. Please click on the link `Start Free` as shown below. If you have an account already, please sign in using this link, [https://studio.harperdb.io/](https://studio.harperdb.io/)

> ![Create a Free Account](https://cdn.hashnode.com/res/hashnode/image/upload/v1622433378490/RP74kVKnM.png?border=1,CCCCCC&auto=compress)
Figure 1.1: Create a Free Account

As part of the signup process, you need to provide the details like name, email, subdomain name. `HarperDB` will now create a subdomain for you. So please provide the details and sign up for free.

> ![Specify Details to Sign Up](https://cdn.hashnode.com/res/hashnode/image/upload/v1622434396513/BabLj1_rJ.png?border=1,CCCCCC&auto=compress)
Figure 1.2: Specify Details to Sign Up

In the next step, you need to provide an account password. Please provide a strong password and complete the account creation process.

> ![Account Password](https://cdn.hashnode.com/res/hashnode/image/upload/v1622433425677/I6tOJRVAk.png?border=1,CCCCCC&auto=compress)
> Figure 1.3: Specify the Account Password

Now, let's create a HarperDB cloud instance. We will use this cloud instance to create and fetch data for our application. Please click on the section `Create New HarperDB Cloud Instance` to move to the next step. 

> ![Create a HarperDB Cloud Instance](https://cdn.hashnode.com/res/hashnode/image/upload/v1622433435638/7p6IQxNdZ.png?border=1,CCCCCC&auto=compress)
Figure 1.4: Create a HarperDB Cloud Instance

Next, please select the `Create HarperDB Cloud Instance` as shown in the image below.

> ![HarperDB Cloud Instance](https://cdn.hashnode.com/res/hashnode/image/upload/v1622433443441/DvOCNd9BJ.png?border=1,CCCCCC&auto=compress)
> Figure 1.5: Create HarperDB Cloud Instance

Now we have to specify the cloud instance name and credentials. Please provide an instance name of your choice along with the credentials.

> ![Credentials](https://cdn.hashnode.com/res/hashnode/image/upload/v1622434429229/Cus9BrFFQ.png?border=1,CCCCCC&auto=compress)
Figure 1.6: Specify Instance Name and Credentials.

Next, you need to select the RAM size, storage size, and other spec details. Please select all the free options.

> ![7.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622433516588/uSZbwoveZ.png?border=1,CCCCCC&auto=compress)
Figure 1.7: Select the specs

The last step is to confirm and add the HarperDB cloud instance. Again, please review the details and click the `Add Instance` button.
> ![8.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622434445840/i_NYUs4Bj.png?border=1,CCCCCC&auto=compress)
Figure 1.8: Review the instance details and Add

You should see the instance creation getting started.

> ![9.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622434460243/RG6yA8B7u.png?border=1,CCCCCC&auto=compress)
Figure 1.9: Creating Instance is In-Progress

It may take a few minutes. However, you should see the status as `OK` after a successful HarperDB cloud instance creation.

> ![10.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622434475674/L48WYGd9r.png?border=1,CCCCCC&auto=compress)
Figure 1.10: Status OK

A final step. Please go to the `config` tab and copy the API Auth Header Key. Please preserve it somewhere, as we will use it when we configure Gatsbyjs with HarperDB.

> ![HarperDB_config.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622469889870/2LSZSvMgBf.png?border=1,CCCCCC&auto=compress)
Figure 1.11: HarperDB API Auth Header Key

That's all. We have successfully created a HarperDB cloud instance that is ready to use.

## Configure the Schema and Table
We need to create a schema and table to insert a few records into the DB. To do that, load the HarperDB cloud instance from the dashboard. First, create a schema by specifying a schema name. For our app, let's give a schema name as `library`.

> ![11.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622433555806/DyV3g-UdD.png?border=1,CCCCCC&auto=compress)
Figure 2.1: Create a Schema

Next, let's specify a table name. Let's specify `book` as the table name and create. Please note, you have to specify a `hash_attribute` for the table. HarperDB will auto-generate the value for it. You may manually add it if you want to specify its value. In our case, we will let HarperDB create it. Let's specify the `id` column as the hash_attribute for the `book` table.

> ![12.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622434489898/itNE2fdrt.png?border=1,CCCCCC&auto=compress)
Figure 2.2: Create a Table

## Populate data in HarperDB
We will now populate data in HarperDB. We will insert a few records of books into the `book` table using the HarperDB user interface. You can insert one record by specifying a JSON object or multiple records at once by specifying an array of JSON objects. Let us create a book record by specifying these properties and values,

```js
{
  author: [
    'Kyle Simpson'
  ],
  cover: 'https://res.cloudinary.com/atapas/image/upload/v1622356611/book-covers/you_dont_know_js_1_le1xk5.jpg',
  description: 'No matter how much experience you have with JavaScript, odds are you don’t fully understand the language. As part of the series, this compact guide focuses on new features available in ECMAScript 6 (ES6), the latest version of the standard upon which JavaScript is built.',
  isbn: 9781491904244,
  pages: 278,
  published: '2015-12-27T00:00:00.000Z',
  publisher: 'O\'Reilly Media',
  rating: 5,
  subtitle: 'ES6 & Beyond. It covers all aspects of javaScript deep down.',
  title: 'You Don\'t Know JS',
  topic: 'JavaScript',
  website: 'https://github.com/getify/You-Dont-Know-JS/tree/master/es6%20&%20beyond'
}
```
Click on the save icon to save the record.

> ![13.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622434576388/c6N63Mpfn.png?border=1,CCCCCC&auto=compress)
Figure 3.1: Insert a book record

Similarly, you can insert multiple records. So please insert a few more records as the book library must contain more than just one book!

> ![14.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622434591409/P3jIqDL61.png?border=1,CCCCCC&auto=compress)
Figure 3.2: Book Records

> You can make use of the JSON data from my [GitHub Repository](https://github.com/atapas/flicks/blob/main/data/books.json) to create multiple records.

Congratulations 🎉 !!! You have completed the database setup with the required data. Now, we will move our focus towards building the User Interface for the book library app.

# Gatsbyjs(aka Gatsby)
`Gatsby` is a React-based framework that allows you to build fast, secure, and robust websites. You can create markups with data at the build time and deploy the built artifacts to serve your pages much faster. It gives a phenomenal performance and speed improvement over the traditional client-server model. We will use Gatsby to create prebuilt markups using the data record added to the HarperDB.

## Gatsby Plugin for HarperDB
Gatsby's massive plugin ecosystem allows us to pull data from several data sources, avail themes, and many more use-cases. Unfortunately, I couldn't find any existing Gatsby plugin for the HarperDB data source. But, as they say, *necessity is the mother and all inventions*, I thought of creating one!

%[https://twitter.com/tapasadhikary/status/1397940296474714113]

So now we have a Gatsby Plugin for HarperDB (`gatsby-source-harperdb`) that allows you to use the HarperDB as the data source so that a Gatsby project can pull the data at the build time. You can find the source code of the plugin from here,

%[https://github.com/atapas/gatsby-source-harperdb]

It is also available as an official plugin to install from the [Gatsby's plugin page](https://www.gatsbyjs.com/plugins/gatsby-source-harperdb/?=Harper). So please give it a try.


## Setting up a Gatsby Project
Alright, it's time to create our gatsby project. First, install the gatsby command-line interface(CLI) tool. Open a command prompt and use this command to install it globally,

```shell
npm install gatsby-cli -g
```
We will use the latest gatsby version 3.x to bootstrap our project. Gatsby provides many starter projects to get started with the development faster. Now let's create a gatsby project. Try this command from the command prompt,

```shell
gatsby new
```
It will ask you a few questions like the site name, what kind of CSS library support you need, what are plugins you want to install? The image below shows my answers. You can choose to go with the same or anything else suitable for you.

> [![gatsby_new.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622464125774/FQ6drNgux.png?border=1,CCCCCC&auto=compress)](https://cdn.hashnode.com/res/hashnode/image/upload/v1622464125774/FQ6drNgux.png)
Figure 4.1: Creating a Gatsby Project

Please give it a while to complete the installation and set up the project for you. Once done, you should see a folder created with the site name provided by you in the last step. For me, it is `flicks`. Please change to the project directory and try this command from the command line,

```shell
gatsby develop
```
It will run the project in the development mode. First, it will build the project and then host the prebuilt markups from a server locally to access the app. By default, the app will run on the URL, `http://localhost:8000`. Please open a browser window/tab and try the URL. You should see your app up and running,

> ![gatsby_8.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622435003659/6M2PFHfT2.png?border=1,CCCCCC&auto=compress)
Figure 4.2: The Initial App

## Configure HarperDB with our Gatsby App
Let's configure the HarperDB with our Gatsby app. We will use the `gatsby-source-harperdb` plugin. Please install it using the following command,

```shell
npm install gatsby-source-harperdb

# If you are using yarn, try this,
# yarn add gatsby-source-harperdb
```
Now create a file called `.env` at the root of the project folder. Please specify the API auth header key and the instance URL in the .env file. 

```shell
HARPER_DB_SECRET_KEY=API_KEY_VALUE
HARPER_DB_URL=CLOUD_INSTANCE_VALUE
```
Please replace the `API_KEY_VALUE` with the API auth header key we copied before. Also, replace the `CLOUD_INSTANCE_VALUE` with your cloud instance value. The URL ends with `.harperdbcloud.com`.

> Please make sure you add an entry of `.env` in your `.gitignore` file. You may not want to commit and push this file to your GitHub repository.

We need to install the `dotenv` package to read environment variables from the `.env` file. You can install it using this command,

```shell
npm install dotenv
```

Now open the `gatsby-config.js` file at the root of the project folder. It is a file to configure all the gatsby plugins required for the project. You may find a few plugin entries already. We have installed those while creating the project. Add this line at the top of the `gatsby-config.js` file,

```js
require('dotenv').config();
```

Next, please add the configuration for the `gatsby-source-harperdb` in the config file.

```js
plugins: [
     ....
    {
      resolve: `gatsby-source-harperdb`,
      options: {
        secret: process.env.HARPER_DB_SECRET_KEY,
        url: process.env.HARPER_DB_URL,
        payload: {
          "operation": "sql",
          "sql":"SELECT * FROM library.book"
        },
        type: "books"
      },
    },
  ],
```
Please note the `options` in the above configuration,
- We read the API Key from the `.env` file and use it for the `secret` value.
- Similarly, we get the HarperDB cloud instance URL from the .env file and use it in the configuration.
- Next is the `payload` that we use to query HarperDB. Here we are specifying the SQL query to retrieve the data from the `book` table of the `library` schema.
- Last, specify the value of the `type` property. It can be any string of your choice. It is the name under which your data will appear in Gatsby GraphQL queries. For example, if we specify `books` as the type name, Gatsby will create GraphQL queries as `allBooks` and `books`. We will see that in a while.

If you are running the `gatsby develop` already, please stop it(using the `control + c` key combination) and start again.

## Fetch the Book records in the UI
Gatsby source plugins make the data available to query using GraphQL queries. In addition, it provides a GraphQL playground for us to try out the queries before we use them in the app. To Open the GraphQL playground and query the book data from the HarperDB, please open this URL in your browser tab: [http://localhost:8000/___graphql](http://localhost:8000/___graphql). You should see the `allBooks` and `books` types under the explorer.

> ![GraphQL Explorer](https://cdn.hashnode.com/res/hashnode/image/upload/v1622472609825/tV-vJsmPP.png?border=1,CCCCCC&auto=compress)
Figure 5.1: GraphQL Explorer

Now expand the `allBooks` type from the explorer. Then expand the `nodes` node and select the attributes to query. As you select, you will see the query is getting built automatically. Now, execute the query using the `Execute Query` button at the top. You will see the result of the query at the rightmost pane. Please refer to the image below.

> ![GraphQL Query](https://cdn.hashnode.com/res/hashnode/image/upload/v1622472933951/e5SL4rTHA.png?border=1,CCCCCC&auto=compress)
Figure 5.2: GraphQL Query Execution

We will now use this query in our UI code(React components) to build the user interfaces.

## Build the User Interfaces(UI)
Now we will build the user interfaces using this query to show the books in the UI. In the UI, we will first list all the books with details like title, topic, cover, author, subtitle. Then, when users click on any of the books, we take them to a details page to show more details about that book.

### Create the Book Listing Page
Let us create the book listing page. Open the `index.js` file under the `src/pages` folder. Replace the content of the file with the following content,

```js

// 1. Import React, Styled-Components, and gatsby
import * as React from "react";
import styled from "styled-components";
import { useStaticQuery, graphql } from "gatsby";

// 2. Create Styled Components
const Main = styled.div`
    display: flex;
    flex-direction: column;
`;

const Container = styled.div`
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
`;

const Book = styled.div`
    border: 1px solid #4e4e4e;
    border-radius: 4px;
    padding: 0.5rem;
    width: 250px;
    min-height: 450px;
    margin: 1rem;
`;

const ResponsiveImage = styled.img`
    width: 100%;
    height: auto;
`;

const Title = styled.span`
    font-size: 20px;
    font-weight: 500;
`;

// 3. The IndexPage Component
const IndexPage = () => {
    // 4. Query the data using GraphQL query
    const data = useStaticQuery(graphql`
        {
            allBooks {
                nodes {
                    title
                    id
                    author
                    cover
                    rating
                    subtitle
                    topic
                }
            }
        }
    `);
    const books = data.allBooks.nodes;
    books.sort((a, b) => {
        return b.rating - a.rating;
    });

    // 5. The Markup to render with the data
    return (
        <Main>
            <Container>
                {books.map((book, index) => (
                    <Book key={index}>
                        {book.topic}
                        <div>
                            {book.cover && (
                                <ResponsiveImage
                                    src={book.cover}
                                    alt={`${book.title}`}
                                />
                            )}
                        </div>
                        <Title>{book.title}</Title> by{" "}
                        <span>{book.author.join(", ")}</span>
                        <p>{book.subtitle}</p>
                        <p>{book.rating}</p>
                    </Book>
                ))}
            </Container>
        </Main>
    );
};

export default IndexPage;
```
Let us go over the code above and understand. It is a regular React component where,
1. We import `React`, `Styled-Components`, and `gatsby` libraries.
1. Create Styled Components for the main page, container inside it, and each box to show the book information.
1. Then, we start the `IndexPage` component.
1. In the component, we use the GraphQL query to fetch the `books` data. We fetch only the required attributes for the listing page. Please notice we use the `useStaticQuery` hook from gatsby to perform the fetch. Gatsby recommends this hook to fetch data using the GarphQL queries inside a Gatsby component. We also sort the books based on the rating.
1. Last, we have the markup to render using the data.

Now refresh the page where the app is running. You will see a list of books with details like the image below,

> ![Book Listing Page](https://cdn.hashnode.com/res/hashnode/image/upload/v1622474808172/-fjZUBJvm.png?border=1,CCCCCC&auto=compress)
Figure 5.2.1: The Book Listing Page

### Create the Book Details Page
Great! Let us now implement the book details page. It will show a book's details when the user clicks on book information from the listing page. Gatsby provides a super cool feature of creating pages ahead in time(build time) using templates. So, we can create a single template for all the book details as we will show a similar structure for all the books.

Create a folder called `templates` under the `src` folder. Now create a file called `BookDetails.js` under `src\templates` with the following content.

```js

// 1. Import required libraries
import React from "react";
import styled from "styled-components";
import { graphql } from "gatsby";

// Create the Styled Components
const Container = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
`;

const AnchorButton = styled.a`
    display: block;
    width: auto;
    height: 25px;
    background: #00ebff;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: #000000;
    font-weight: bold;
    line-height: 25px;
    text-transform: uppercase;
    &:hover {
        color: #2e2222;
    }
`;

// 3. The BookDetails Component
const BookDetails = ({ data }) => {
    const details = data.books;

    return (
        <Container>
            <h1>{details.title}</h1>
            <p>
                <span>By</span> {}{" "}
                <span style={{ fontSize: "20px" }}>
                    <b>{details.author.join(", ")}</b>
                </span>
            </p>
            <img
                src={details.cover}
                alt={details.title}
                width="40%"
                height="auto"
            />

            Rating: {details.rating}

            <p style={{ fontSize: "20px" }}>
                <span>
                    <b>Pages</b>: {details.pages}
                </span>{" "}
                {" | "}
                <span>
                    <b>Publisher</b>: {details.publisher}
                </span>{" "}
                {" | "}
                <span>
                    <b>ISBN</b>: {details.isbn}
                </span>
            </p>

            <p style={{ fontSize: "25px" }}>{details.description}</p>

            <AnchorButton
                href={details.website}
                target="_blank"
                rel="noreferrer"
            >
                Go to the Website
            </AnchorButton>
        </Container>
    );
};

// 4. Gatsby Page/Template Query
export const query = graphql`
    query ($title: String!) {
        books(title: { eq: $title }) {
            author
            cover
            description
            id
            isbn
            pages
            published
            publisher
            rating
            subtitle
            title
            topic
            website
        }
    }
`;

export default BookDetails;
```
We are doing the followings in the template code above,

1. Import all required libraries for the template to work.
1. Create Styled Components for UI structure to show the book details.
1. Then, we create the `BookDetails` React component and render the book details. Please note, we pass a prop to the component as `{ data }`. It means we are performing destructuring here to extract the `data` from an object. But, from which object?
1. In a gatsby project, pages and templates use the result of a query as the prop. Please note the GraphQL query at the bottom of the source code. Here we are performing a filter query to filter out a book by its title. The result of this query will be passed automatically to the BookDetails component as a prop. We extract the data from that and use it for the rendering.

Now, as we have the template ready, we need to use it to create the pages for each of the books. Let's configure that.

Create a file called `gatsby-node.js` at the root of the project folder with the following content. It is a special file that helps in invoking Gatsby APIs and overrides them to customize things.

```js
const path = require(`path`);
const _ = require("lodash");

exports.createPages = async ({ graphql, actions }) => {
    const { createPage } = actions;
    const result = await graphql(`
        query {
            allBooks {
                edges {
                    node {
                        title
                    }
                }
            }
        }
    `);

    result.data.allBooks.edges.forEach((edge) => {
        createPage({
            path: `/${_.kebabCase(edge.node.title)}/`,
            component: path.resolve(`./src/templates/BookDetails.js`),
            context: {
                // Data passed to context is available
                // in page queries as GraphQL variables.
                title: edge.node.title,
            },
        });
    });
};

```
Here we are using the `createPages` API of Gatsby to create pages based on the query. First, the query fetches all the book titles. Then, it creates a page using the template for each of the titles and passes the title as a context. Each page will be accessed using a unique URL we build with the `path` attribute. Also, if you recall, we use the title in the template to filter the book information.

Please note, we use the `lodash` library to utilize its method for formatting a URL fragment. Usually, a title may have spaces, and the URL doesn't accept that. So we use the `_.kebabCase(edge.node.title)` to replace the spaces with a hyphen(-) character. Please install `lodash` as a dependency.

```shell
npm install lodash
```
Now restart `gatsby develop` once more. Next time when the `gatsby develop` runs, it will create the pages for all the books using the template.

So let us now create a link from each of the books on the book listing page to its respective details page. Please open the `index.js` file. Include these two imports at the top,

```js
// ... Other imports

import _ from "lodash";
import { Link } from "gatsby";
```
Then, wrap the `<Book>` tag using the `Link` like this,

```js
{books.map((book, index) => (
    <Link to={`/${_.kebabCase(book.title)}`}>
        <Book key={index}>
                ... All the code as previous
        </Book>
    </Link>
  ))}
```
Please note the `to` attribute of the `Link`. It links you to the URL fragment created using the title the same way we mapped the pages in the `gatsby-node.js` file. Save your changes and refresh the app in the browser. Now, you will be able to click on the books from the listing page. Click on a book, and you should land on a details page like the one shown below,

> ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622523947978/ISpMelssO.png?border=1,CCCCCC&auto=compress)
Figure 5.2.2: Book Details Page

That's it. We have the book library app ready with basic functionality. Please feel free to enhance the look and feel of the app using styles. You can add features like searching a book, filtering, many more.

# Deploying on Gatsby Cloud
Welcome to the last section of the article. Now we will deploy the library app to the `Gatsby Cloud` with a few quick steps. At this stage, please create a repository on GitHub and push all the code.

Please [Create an account](https://www.gatsbyjs.com/products/cloud/) with Gatsby Cloud and Log in. Please select the free build and hosting plans while creating the account. Next, click on the `Add a site` button.

> ![Add a Site](https://cdn.hashnode.com/res/hashnode/image/upload/v1622434915683/R4nEB7cS7.png?border=1,CCCCCC&auto=compress)
Figure 6.1: Add a Site

Select the `Import from a Git repository` option and click on the `Next` button.

> ![Git Repo](https://cdn.hashnode.com/res/hashnode/image/upload/v1622434930979/_BGgOwtcT.png?border=1,CCCCCC&auto=compress)
Figure 6.2: Select from a Git Repo

Assuming you have pushed your code to the GitHub repository, please select the `GitHub` option.

> ![Select Repository Type](https://cdn.hashnode.com/res/hashnode/image/upload/v1622434938539/9LuOJluGZ.png?border=1,CCCCCC&auto=compress)
Figure 6.3: Select Repository Type

Please provide the repository details and the site name and got to the next step.

> ![Repo Details](https://cdn.hashnode.com/res/hashnode/image/upload/v1622434949080/1LDBtofL2.png?border=1,CCCCCC&auto=compress)
Figure 6.4: Provide Repository Details

We will not use any CMS for our application. Therefore, you can skip the step of selecting the CMS.

> ![Skip CMS](https://cdn.hashnode.com/res/hashnode/image/upload/v1622434958522/y9TydhgFG.png?border=1,CCCCCC&auto=compress)
Figure 6.5: Skip CMS

In the last step, please provide the environment variable details and finish the setup.

> ![ENV Details](https://cdn.hashnode.com/res/hashnode/image/upload/v1622519233508/AOWv8OJte.png?border=1,CCCCCC&auto=compress)
Figure 6.6: Provide Environment Details

Now a build should get triggered automatically. Once the build is successful, the app will be available at `https://<YOUR_SITE_NAME>.gatsbyjs.io`. In my case, it is [flicks.gatsbyjs.io](flicks.gatsbyjs.io).

> ![Trigger Build](https://cdn.hashnode.com/res/hashnode/image/upload/v1622434983592/nWP0ey-vz.png?border=1,CCCCCC&auto=compress)
Figure 6.7: Trigger Build

That's all. We have come to the end of this article. I hope you found it insightful. Thanks for reading and trying out. Please feel free to comment below with the link to your app. Also, feel free to [reach out to me](https://github.com/atapas/flicks/issues) if you face any issues in following the article.

<hr />

I hope you enjoyed this article or found it helpful. Let's connect. You can find me on [Twitter(@tapasadhikary)](https://twitter.com/tapasadhikary), sharing thoughts, tips, and code practices.

You may also like,
- [Why do you need to do Side Projects as A Developer?](https://blog.greenroots.info/why-do-you-need-to-do-side-projects-as-a-developer-ckhn5m5km05teajs1fvjd7u5f)
- [16 side project GitHub repositories you may find helpful](https://blog.greenroots.info/16-side-project-github-repositories-you-may-find-useful-ckk50hic406quhls1dui2d6sd)
- [Build, Test and Publish your NPM, I just did it in few minutes!](https://blog.greenroots.info/build-test-and-publish-your-npm-i-just-did-it-in-few-minutes-ck3dwi1j100vzo4s15qy8ail9)