DEV Community

loading...
Cover image for #100daysofGatsby - Sprint 1

#100daysofGatsby - Sprint 1

imkarthikeyan profile image Karthikeyan Originally published at imkarthikeyans.hashnode.dev ใƒป5 min read

In this blog series, I will be documenting my 100daysofGatsby journey. I will try to keep it as interesting as possible.

Without further ado, Let's dive in.

https://media.giphy.com/media/11sBLVxNs7v6WA/giphy.gif

Below are the things which we need to make for the first sprint

  • Build a proof of concept (POC) Gatsby site to test their routing API, builds service, hosting, and Contentful integration
  • Use Gatsbyโ€™s Contentful plugin and connect to a test Contentful site
  • Create the following pages:
    • home
    • about
    • and a collection of pages for every city weโ€™re in.
  • Build it on Gatsby Cloud and use their preview URL
  • No styling needed for the first sprint

You can find the detailed briefing in this link

Let's get to work

https://media.giphy.com/media/QxZ0nbcVgMlPlnfZos/giphy.gif

Heads-up: Make sure you have Node.js,npm, and Git CLI installed.

Check out the official npm docs for downloading and installing Node.js and npm in your machine.

Installing Gatsby:

npm init gatsby
Enter fullscreen mode Exit fullscreen mode

You should see something like this

image.png

  1. Give the site name as audio-core as it is more contextual. Feel free to give any name you like.
  2. choose the folder in which the site will be created.
  3. Since we are asked to connect to Contentful CMS, let's go with option 2 in the list.
  4. Let's ignore the styles for now and press enter
  5. Let's do the same for the plugins and press done and move to the next step
  6. Now for the configuration of the contentful plugin, press enter and do not add the API keys and space id. We will do it later when creating a new space in the contentful app.

image.png

With the installation in progress, let's create our API key and space id in the contentful to connect with our gatsby site.

https://media.giphy.com/media/BpGWitbFZflfSUYuZ9/giphy.gif

Setting up Contentful:

  • Create your contentful account by visiting this link.

  • Create the space for your project.

image.png

  • Clicking on create Space should take you to the final screen as Contentful allows you to create 2 project spaces with the free plan. You can take a look at their pricing structure by visiting their official website.

image.png

Finally, the welcome screen for your space.

image.png

Adding Content Model and Types:

Now click on the Content model to create your first content type. A content model structures and organizes your content. Itโ€™s made up of content types.

Name the first content type as index, which will help us in serving the data related to homepage.

image.png

Now for the home page, let's create two fields Title and Description, and hit save.

image.png

For the about us page, let's add another content type About which will also hold the same as Index two fields Title and Description.

The reason why I am creating title and description in the CMS is that it will remain static and I do not need to change it every time via code, updating the CMS will automatically publish the updated contents to the app. We will see how it will happen in part 2 of the series.

Let's add the following three fields for the locations page.

  1. slug
  2. state
  3. country

Slug for routing purposes. It will be automatically created when we enter the name of the country. State and country for displaying in the separate locations page.

After creating, it should look something like this.

image.png

Your content-model dashboard should look something like this.

image.png

Let's add some dummy content, before connecting this with gatsby.

  1. Go to content and select add entry and then select the content type as Index and click Add New index.

image.png

  1. Click publish and go back to the dashboard.

Let's repeat the same process for the about us and locations and add the static data which we will be used to render in the front end part of our app.

image.png

https://media.giphy.com/media/VEzlrMWk3F7uuFuRSq/giphy.gif

The installation process should be over by now. Let's connect our gatsby site with contentful.

Connecting Gatsby and Contentful:

Click on the settings and go to the API keys and click on Add API key

image.png

Since we have created our API key and the space id. Let us connect it with our site.

Open gatsby-config.js and add the space id and the API key for the access token.

https://media.giphy.com/media/Db0wfJKA9S4PjnODqB/giphy.gif

๐Ÿšจ Do not add the API key as plain text.

Run this below command to install dotenv to create env variables. It helps in managing our env variables.

yarn add dotenv
Enter fullscreen mode Exit fullscreen mode

After that create .env file in the root of your project folder and create the variable and add the contentful access token value.

Add the env variables to your gatsby.config.js file.

const dotenv = require('dotenv')

dotenv.config()

module.exports = {
  siteMetadata: {
    title: "Audio core",
  },
  plugins: [
    {
      resolve: "gatsby-source-contentful",
      options: {
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
        spaceId: process.env.CONTENTFUL_SPACE_ID,
      },
    },
  ],
};
Enter fullscreen mode Exit fullscreen mode

Let's fire up our starter application.

Run this command

yarn develop
Enter fullscreen mode Exit fullscreen mode

https://media.giphy.com/media/Oj5w7lOaR5ieNpuBhn/giphy.gif

Open this link localhost:8000 and you should see this in your browser.

image.png

Before wrapping up part 1, let's verify whether we are able to access the data from the contentful. You should be able to access the graphql playground via this

http://localhost:8000/___graphql

image.png

๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰ Awesome, we are able to query the data which we need from the CMS.

That's a wrap on part 1 of this sprint.

https://media.giphy.com/media/3otPoS81loriI9sO8o/giphy.gif

Thank you for reading. Feedbacks are always welcome. If I have missed something or if you have any doubts, please let me know in the comments. See you in part 2.

giphy

Resources:

  1. How to Graphql.
  2. Gatsby Docs

Discussion (0)

Forem Open with the Forem app