Create-React-App is a great tool for getting started with React, but at some point you may find yourself needing something more.

Gatsby is one of the most popular choices to move on to. It boasts a number of performance optimizations and a large plugin ecosystem (while still allowing you to use anything from the React ecosystem as well).

In this course, Khaled Garbaya will help you get started with Gatsby.

You'll start by building a single page "Hello World" before moving on to programmatically creating new pages and setting up static and dynamic routing.

Once you've got a grasp on the basics, Khaled will share his process for migrating an existing application built with Create-React-App project over to the Gatsby way of doing things.

You'll also get practice adding and configuring Gatsby build plugins for Tailwind CSS and sourcing data from external APIs.

After this course, you'll be ready to port existing code, or start a new Gatsby project from scratch!

## Gatsby Project Structure

Inside a Gatsby project you may have some of the folowing folders/files:

```sh
|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js
```

### Folders

- `/.cache` Automatically generated. This folder is an internal cache created automatically by Gatsby.

- `/plugins` This folder hosts any project-specific (“local”) plugins that aren’t published as an npm package.

- `/public` Automatically generated. The output of the build process will be exposed inside this folder.

- `/src` This directory will contain all of the code related to what you will see on the frontend of your site (what you see in the browser), like your site header, or a page template. “Src” is a convention for “source code”.

- `/pages` Components under src/pages become pages automatically with paths based on their filename.

- `/templates` Contains templates for programmatically creating pages.

- `html.js` For custom configuration of default .cache/default_html.js.

- `/static` If you put a file into the static folder, it will not be processed by Webpack. Instead it will be copied into the public folder untouched.

### Files

- `gatsby-browser.js`: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.

- `gatsby-config.js`: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc.

- `gatsby-node.js`: This file is where Gatsby expects to find any usage of the Gatsby node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.

- `gatsby-ssr.js`: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.

Most of the folders and files above are optional.

A Gatsby project is mainly an npm project that has `gatsby`, `react` and `react-dom` as npm dependencies.

The equivalent of `index.html` in a Gatsby project is an `index.js` file inside the `src/pages` folder.

Setup The Simplest Gatsby Project

Gatsby pages are created in different ways:

- Automatically turns React components in `src/pages` into pages
- Programatically using the `createPages` API in your site's `gatsby-node.js`
- Using a Plugin That implements the `createPages` API

## How to list all the pages in a Gatsby site

Gatsby will spawn a GraphQL server along with your dev server and you can use that to list all pages.
Navigate to `HOST:PORT/___graphql` e.g `localhost:8000/___graphql` and past the following query.

```graphql
{
  allSitePage {
    edges {
      node {
        path
        component
        pluginCreator {
          name
          pluginFilepath
        }
      }
    }
  }
}
```

In this lesson you will learn how to add React Components inside the `src/pages` folder for Gatsby to create pages from them automatically 

Create Gatsby Static Pages Manually

To create a page programmatically you need to a few things.

### 1. Create a template file

under `src` create a folder called `templates` and inside of that create a file called `pokemon.js`.

#### 2. Use the Gatsby createPage node API

in the root of the project create a `gatsby-node.js` file and add the following code

```js
const path = require(`path`)

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  const templatePath = path.resolve(
    './src/templates/pokemon.js'
  )

  // use the createPage function to create a page.
  // the createPage function accepts an object as a config
  // {
  //   path: // the path to the page, we want it to be `/user`
  //   component: // the path to the component file
  // }
}
```


Create Static Pages Programmatically

Often you want to create a site with client-only portions, which allows you to gate them by authentication or load different content based on URL parameters.

You can create a client-only route page in two steps:

1. Create a main entry point page manually. In our example we would like to have a few client-side pages a `/app/details` page and a `/app/profile` page. Our entry point page should `/app`.

2. Configure Gatsby to navigate to the client only routes.

In your `gatsby-node.js` file

```js
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  // Only update the `/app` page.
  if (page.path.match(/^\/app/)) {
    // page.matchPath is a special key that's used for matching pages
    // with corresponding routes only on the client.
    page.matchPath = '/app/*'
    // Update the page.
    createPage(page)
  }
}
```

Create Client Only Routes (Dynamic Pages)

Throughout this course you will take this Pokedex plain react app and migrate it to a Gatsby App.

The app was create using `create-react-app` and has a few different sections like `Home` and `About` pages,  it has a user specific section that is protected using a login and password to display the user stats.

In the upcoming lessons, you will learn how to extract and reuse a big chunk of the code from this app to build the same app using Gatsby.

Breaking Down a plain React App

When migrating from create-react-app to Gatsby, a good starting point can be identifying simple static pages. One Example can be a `/about` page that has hardcoded text, a contact page that has a form, etc.

Since you are still using React with gatsby you can migrate those pages by creating a `.js` file under `src/pages` and name it the same as it's path for example, `/about` will be `src/pages/about.js`. Once the file is created you can copy paste the same component code from your plain React app into the newly created file.

In this lesson, you will learn how to identify and extract simple static pages from you plain React app and move them to your Gatsby app.

Extract Gatsby Static Pages from a Plain React App

Often in your plain React app you want to render the same component while passing a dynamic parameter in your URL to change the data. Examples of URL params can be IDs for products, users, books, etc...

When building such an app with plain React you will still need javascript to render these pages even though they don't change that much.

With Gatsby you can pull all the necessary data and build all these pages at build time to guarantee a faster page load time.

In this lesson, you will learn how to extract routes with dynamic parameters and convert them into Gatsby static pages programmatically

Convert React Routes with a Dynamic Param to Programmatic Static Pages

Client-only routes will exist on the client only and will not correspond to `html` files in an app’s built assets.

## How to create a client only page?

You can do that in two steps:

1. Create a main entry point page manually. In our example we would like to have a few client side pages a `/app/details` page and a `/app/profile` page. Our entry point page should `/app`.

2. Configure Gatsby to navigate to the client only routes.

In your `gatsby-node.js` file

```js
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  // Only update the `/app` page.
  if (page.path.match(/^\/app/)) {
    // page.matchPath is a special key that's used for matching pages
    // with corresponding routes only on the client.
    page.matchPath = '/app/*'
    // Update the page.
    createPage(page)
  }
}
```

Create Dynamic Pages in Gatsby

Layout components are for sections of your site that you want to share across multiple pages. For example, Gatsby sites will commonly have a layout component with a shared header and footer. Other common things to add to layouts are a sidebar and/or navigation menu. On this page for example, the header at the top is part of gatsbyjs.org’s layout component.

It is recommended to create your layout components alongside the rest of your components (e.g. into `src/components/`).

In our example, we'll move all of the navigation to the layout component like so:

```
import React from 'react'
import { Link } from 'gatsby'
import { logout, isLoggedIn } from '../services/auth'
const Layout = ({ children }) => {
  return (
    <div>
      <h1>Gatsby Pokedex!</h1>
      {isLoggedIn() && (
        <button onClick={() => logout(() => {})}>
          Logout
        </button>
      )}
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/app/profile">Profile</Link>
        </li>
        <li>
          <Link to="/app/stats">Stats</Link>
        </li>
        <li>
          <Link to="pokemons">Pokemons</Link>
        </li>
      </ul>
      {children}
    </div>
  )
}

export default Layout

```

Share Common Markup Between Pages in Gatsby Using Layouts

Sometimes you need to protect some pages on your website and only shown to logged-in users. You can achieve this in Gatsby using a combination of client-only routes or Gatsby "Dynamic" Pages and `reach router`.

It becomes easier if you have already authentication in your plain react app and want to move it to Gatsby. In this lesson, you will learn how to reuse the authentication code you have in your existing plain React app in your Gatsby App

Migrate Authentication From a Plain React App to a Gatsby App

A Gatsby plugin is a Node package that uses the Gatsby APIs under the hood.

You can use a plugin to source data into your site, transform content or enhance the output of your site like adding google analytics etc...

Gatsby plugins can be categorized into 3 types:

- A Gatsby Source plugin (e.g: gatsby-source-contentful pulls data from Contentful)
- A Gatsby Transformer Plugin (e.g: gatsby-transformer-remark convert markdown text to html)
- A Gatsby Plugin (e.g: gatsby-plugin-google-analytics adds Google analytics in your site)

## How to install and configure a plugin

1. Install a plugin you can run the command `npm install plugin-name` e.g `npm install gatsby-plugin-postcss`.

2. Add the plugin to your `gatsby-config.js` file

In this lesson, you learn how to use gatsby-plugin-postcss to add tailwindcss support to your project

Using a Gatsby Plugin

In order to fetch data at build time, you can use a source plugin or source data yourself.
In our case we'll be using the `gatsby-source-graphql` plugin. It allow us to connect arbitrary GraphQL APIs to Gatsby’s GraphQL, in this case Contentful.

In this lesson, you will learn how to load data from an external service and query it in you rgatsby project using `GraphQL`

Fetch and Query Data at Build Time in Gatsby

Gatsby is capable of generating content at build time as well as making calls to external services at runtime, you can make hybrid pages that take advantage of the benefits of static content as well as dynamic content. You can gather data ahead of time while the site builds so that when a user loads your page the data is already available. Then, for data that is of a more dynamic nature, you can request data from another service like an API using the classic React way

in this lesson, you will learn how to load a chunk of the pokemon data at build time and then load more at client runtime when the app is running

Eject create-react-app and Use Gatsby for Advanced React App Development

Instructor

Credits

What you'll learn

Credits

Course Content