Skip to main content
Disciplines
Automotive Business IT + Informatics Construction + Real Estate Electrical Engineering + Electronics Energy + Sustainability Insurance + Risk Finance + Banking Management + Leadership Marketing + Sales Mechanical Engineering + Materials
Events
DE
EN
Books
Journals
Topic Page
Marketing
Start single access now
Access for companies
EXTENDED SEARCH
Log in
Top

2021 | Book

Setting up the Ecommerce Site Read chapter Read first chapter

Advanced Gatsby Projects

Create Two Advanced Sites Using Technologies that Compliment Gatsby

Author: Nabendu Biswas

Publisher: Apress

Part of: Springer Professional "Wirtschaft+Technik" , Springer Professional "Technik" , Springer Professional "Wirtschaft"

Login to get access
insite
SEARCH

About this book

Roll your sleeves up and master advanced topics in Gatsby development by building two production-ready websites. This project-focused book teaches you how to use Gatsby alongside the latest technologies including Snipcart, and Firebase. It builds off of Foundation Gatsby Projects and it's recommended that you complete that first if you are new to Gatsby.

In the first project, you will create a fully functional e-commerce site for a restaurant using Snipcart. Lastly, you’ll learn to build a recipe site using the Firebase database.

Many Gatsby tutorials out there today only cover how to create a simple blog site – get ahead of the crowd using this book today.

What You'll Learn

Create an e-commerce site in no time using Snipcart with GatsbyWork with the Firebase database from Google in a Gatsby siteDeploy all sites in NetlifyAdd functionalities with the powerful Gatsby plugin ecosystem

Who This Book Is For

Anyone who wants to create a site using Gatsby, though knowledge of React and Gatsby is expected. You will need to be familiar with JavaScript concepts and be confident with basic web development. It is advisable to complete Foundation Gatsby Projects first if you have no Gatsby experience.

Table of Contents

Frontmatter

Creating an Ecommerce Feature Site with Snipcart

Frontmatter
Chapter 1. Setting up the Ecommerce Site
Abstract
In this chapter we will cover how to create a new project, then manage default files, and finally install react-icons into the project.
Nabendu Biswas
Chapter 2. Adding Core Features to the Ecommerce Site
Abstract
In this chapter we are going to create most of our Gatsby site, which includes the Navbar, the images, banner text, buttons, and the footer section. We are also going to deploy it to Netlify and show a nice Gallery section.
Nabendu Biswas
Chapter 3. Setting up Contentful
Abstract
Contentful is a free-to-use CMS. Every website or mobile app needs to store data and that is done in a database or CMS. The benefit of the Contentful CMS is that it is very easy to edit and generally used by business owners, who don’t need to touch the code base.
Nabendu Biswas
Chapter 4. Using Webhooks at the Site
Abstract
Webhooks are automated messages sent from apps when something happens; this feature is pending in our site. We have added all menu items, but if we want to change one item or add some new items, after adding the data in Contentful, we have to trigger the deployment in Netlify.
Nabendu Biswas
Chapter 5. Making the Site Dynamic with Snipcart
Abstract
In the previous chapter, we added webhooks in our Netlify dashboard for this application. With that, when the user adds, deletes, or edits items in the Contentful CMS, it will trigger a build of the site.
Nabendu Biswas

Creating a Recipe Website with Firebase

Frontmatter
Chapter 6. Setting up the Recipe Site
Abstract
In this chapter, we are going to perform the initial setup for our recipe website. The setup will be mainly done on Firebase website and will also involve setting up the database.
Nabendu Biswas
Chapter 7. Displaying Recipes from Firebase
Abstract
Now that we have completed the initial setup of our recipe site, it’s time to use the graphql in our code so we can display recipes. In this chapter, we will first update the code for our home page. Then we will create the individual pages and change the title and footer. Finally, we will be showing Recipe Details and updating the home page. First, though, we need to remove all the boilerplate code from our Gatsby default starter.
Nabendu Biswas
Chapter 8. Displaying Images from Firebase
Abstract
In the previous chapter, we displayed the recipe data on our home page, as well as a detailed view page. In this chapter we will see how to display images using Firebase by following these steps:
Nabendu Biswas
Chapter 9. Deploying the Recipe Site in Netlify
Abstract
In the previous chapter, we added images in the Firebase database and learned to use them in our project using gatsby-image. After that we displayed them on our site. Our project is almost complete and it’s time to deploy it in Netlify. Before that, though, we need to create an environment file, so that our Firebase credentials don’t end in GitHub.
Nabendu Biswas
Chapter 10. Adding Disqus Commenting System
Abstract
In the previous chapter, we added environment variables and then successfully deployed our site to Netlify. In this chapter, we will put a commenting system in place. To do so, we will be using Disqus, a networked community platform used all over the Web. With Disqus, your website gains a feature-rich commenting system complete with social network integration, advanced administration and moderation options, and other extensive community functions.
Nabendu Biswas
Backmatter
Metadata
Title
Advanced Gatsby Projects
Author
Nabendu Biswas
Copyright Year
2021
Publisher
Apress
Electronic ISBN
978-1-4842-6640-3
Print ISBN
978-1-4842-6639-7
DOI
https://doi.org/10.1007/978-1-4842-6640-3

Premium Partner

    Image Credits