Hands-On Web Development with React and GatsbyJS

Here, we shall learn about the GraphQL language and experiment with our first queries.

   •  See what GraphQL is and how we can use it in our app

   •  Introduce the GraphQL playground

   •  Write out first GraphQL queries

We will start learning how we can use GraphQL within our Gatsby app.

   •  Import GraphQL and add our query to our index file

   •  Pass that data into our component, and check out the data in the console

   •  Update some of our content to use our data

Page queries are great for pages but what about components? We shall learn how to work with StaticQuery to solve that problem.

   •  Attempt to use a page query inside a component

   •  Learn what the Static Query API is

   •  Use Static Query to retrieve data directly from a component

This video will talk about what we learned in the last video, and introduce you to the wonderful world of hooks.

   •  Compare the StaticQuery component to the useStaticQuery hook

   •  Configure seo.js with our useStaticQuery hook

   •  Update seo.js to consume data from our GraphQL query

We have taken a brief look at Gatsby plugins, but now it is time to dive deeper, and begin by focusing on the plugins that retrieve our data.

   •  Learn what a source plugin is and what it does

   •  Write a query to retrieve filesystem data

   •  Update our config to retrieve more filesystem data

Next up are the transformer plugins. We will learn about the important role these plugins play in our apps.

   •  See the role of the transformer plugin

   •  Install our first transformer plugin and update our config

   •  Write a GraphQL query to get the content from our markdown file

We shall take an in-depth look at the plugins Gatsby has available for our applications.

   •  Introduce the Gatsby plugin library

   •  Explore other plugin options

   •  Install some more plugins for us to use in our app

Tracking and analytics is an important part of any good website. We shall set up the foundation for your production site.

   •  Learn why tracking is an important part of any production site and how you can utilize it

   •  Set up a Google Analytics account

   •  Update our config and test that the tracking is working

Everyone wants more visitors coming to their site. We shall add an eye-catching plugin to our app, that may earn you more traffic when sharing links to your site.

   •  Learn why social cards are used

   •  Install the gatsby-remark-social-cards plugin and update our config

   •  Make some more changes to our seo.js to include social card metadata

Gatsby has a number of plugins that work with markdown, so we will start by adding some to our app. Then we will take a look at the best way to structure our markdown files in our app.

   •  Install some plugins to support markdown files

   •  Look at the markdown examples

   •  Add an additional markdown file

There are a few things you will need to set up in a Gatsby app, to programmatically create pages, and creating a template, is where we will start.

   •  Create our first template

   •  Set up the basic skeleton, that will be the blueprint for our posts

   •  Import and pass in the components we will need for our template, and temporarily add the hardcoded props

We are deep into the inner workings our app now and we will be working on the code, which is essential to programmatic page creation.

   •  Learn what Gatsby Node APIs are

   •  Implement the createPage API and add a GraphQL query

   •  Map over our data to programmatically create pages

We shall add the second of two Gatsby APIs needed to programmatically create pages from markdown files, finish working on our gatsby-node file, and test out our app.

   •  Add the onCreateNode API and update our query

   •  Create previous and next variables for easier navigation on the client

   •  Complete create page and check out our new programmatically generated pages

We have got the template and also have added the code, to pull in the data from our markdown files. Now, it is time to add that data to our post template.

   •  Write a pageQuery in our template to pull in data from our markdown files

   •  Replace hardcoded content with the results from our data

   •  Update our template to display our posts content using innerHTML

Importing image files is easy, but doing it the regular way limits your ability to optimise. By importing images with GraphQL, you’ll have more control.

   •  Import an image, the regular way

   •  Install the image plugins and write a GraphQL query, to allow us access our images

   •  Update our index file to consume the image from our data

Instead of using a regular image tag, we shall use the image component from Gatsby Image, which will enhance our image optimization.

   •  Install Gatsby Image - an image component

   •  Learn why Gatsby Image is an important tool for image optimization

   •  Updating our index file to use the image component

If you try to add images to markdown files, unfortunately, that would not show up on your pages. Thankfully, there is a Gatsby plugin to help us out with this.

   •  Add images to markdown files

   •  Install a plugin, that will allow us to successfully display images in markdown files

   •  Update our config and set some options for our plugin

Adding videos to your Gatsby application is just as simple as adding images, thanks to the gatsby-remark-responsive-iframe plugin.

   •  Install the gatsby-remark-responsive-iframe, that will wrap any videos we install into a container

   •  Create a new post and markdown file

   •  Add an iframe with a YouTube link to our file, and test it out in the browser

Using markdown files is not so easy, so in this section, we shall take a look at an alternative and begin by covering the different CMS options that are available.

   •  Learn what a CMS is and the different types of CMSs

   •  Explore the pros and cons of traditional and headless CMSs

   •  Get to know how Contentful is different from its competitors

Before we start using Contentful, we shall need to setup an account, and design our first content model, so we can start adding posts.

   •  Create a Contentful account

   •  Add fields to our content model

   •  Add some content to our space

Now, we have some Contentful content ready to go, but before we can even start updating our code, we need to set up some configuration, to allow our app to talk to Contentful.

   •  Install the necessary plugins in Contentful data to work with Gatsby

   •  Add our Contentful spaceId and accessToken

   •  Implement a .env file to make our app more secure

We have created our account and connected it to our app. It is time to update gatsby-node, so we can pull in our posts from Contentful.

   •  Visit the playground to inspect our new query

   •  Remove content we no longer need in our app

   •  Make the necessary changes in gatsby-node

Our data is ready and available to us, but we have got some work ahead of us, before we see any of it render. We shall need to make some changes to our index file and our template.

   •  Update our index file to render content from Contentful

   •  Make some minor changes to render most of our fields from Contentful

   •  Use @contentful/rich-text-types, @contentful/rich-text-react-renderer, and documentToReact, to render our rich text

Not everyone knows how to deploy their own application. Thankfully, there are a number of great options available to us that make the process easy.

   •  Looking at our deployment options

   •  Learn why we are using Netlify

   •  Discuss the options to add pathPrefix

In order for you to deploy your production account, you will need to connect to your own repository. After we set up a Netlify account, we shall work on getting the starter-blog repository into your own GitHub account.

   •  Create your Netlify account

   •  Set up an empty repository in GitHub

   •  Update the remote, to point at your own repository

Now that your Netlify account has been created and your repository is ready to go, it is time to connect the two, deploy your site, and check out your app in production.

   •  Connect your repository to Netlify

   •  Deploy your app

   •  Check out your production site

So, the initial Netlify deployment process was incredibly easy, but what about subsequent ones? We shall wrap up a few items we could not complete without our production URL. Then, we will make a change to our app, so we can see how easy future deployments are with Netlify.

   •  Edit URLs to point to your production site

   •  Add a link from our posts to our home page

   •  Deploy our changes

For most of us, the current configuration may be all that we need, but for some, particularly those of you working on a Gatsby project in large teams, Gatsby Preview may be the tool that you need to round out everything.

   •  Explore Gatsby Preview

   •  Create a trial account

   •  Witness the power of live updates in action