ReactJS E-Commerce With No Backend Using Snipcart & Gatsby

First, allow me to start this post with a few words on some cool and important stuff.

ReactJS

ReactJS is one of the popular cool guys JavaScript frameworks on the web development block. Yes, it is trendy. It was created by Facebook developers. It's used by tech behemoths like Airbnb, Netflix, and Instagram. It boasts a constellation of stars at the top of its GitHub repo.

But there's a reason why hundreds of businesses are developing with it. A few reasons, in fact.

I worked on personal and professional projects with ReactJS a bit myself. And I can endorse its awesomeness with confidence. If you already know your vanilla JS, it's a great tool to scale the frontend of a web application. Coupled with Backend as a Service tools like Webtask, it can even make for powerful serverless projects. Its flexible, reusable components system makes for efficient development workflows. Its JSX syntax is a breeze to learn and use.

To me, ReactJS feels compelling both technologically and philosophically.

Static web development

Lately, static sites have been getting their fair share of attention in developer circles too. Among other things, we can thank the dramatic evolution of web browsers and frontend apps for this. Powered by modern static site generators, today's static sites enable a myriad of possibilities and functionalities for online projects. But the underlying promise they're really offering is a faster, cheaper and more secure web. Kind of hard not to get behind that, you know.

You see where I'm heading with all of this, right?

After working on a ReactJS project and re-reading a guest post of ours about static, modular e-commerce, I thought to myself:

"A ReactJS static site generator could actually be pretty cool".

My knee-jerk developer reflex kicked in, and I searched ol' Google for reactjs static generator.

snipcart-reactjs-static-ecommerce-gatsby-google

And that's when I found Gatsby.

What's Gatsby?

Gatsby is a static website generator built with innovative web technologies such as ReactJS and Webpack. It's also a pillar of American literature and another gorgeous movie for which Leo didn't get an Oscar (you'll get there, old sport!).

Gatsby supports Markdown, HTML, and ReactJS components out of the box. It's also easy to add support for additional file types like SCSS, for instance.

In this post, I'm going to show you how to build a lean, powerful e-commerce site with no backend. To do so, we'll be integrating Snipcart, our HTML/JS-based shopping cart platform, to a Gatsby-powered static site. Oh, and I almost forgot to mention: we'll be selling the required items to throw a Great Gatsbyesque party. Fireworks, bow ties, and martini glasses. Let's do this.

Create your new Gatsby website

First, you're going to need to install the generator itself. As you can see, it's pretty much straightforward:

npm install -g gatsby

Important note: Given the fact that I'm running on Windows, I had to modify one core Gatsby file to handle path problems that were causing dysfunctionalities. Quick fix:

1- Go to C:\Users\{....}\AppData\Roaming\npm\node_modules\gatsby\dist\isomorphic\create-route.js

2- Find all: handler = pagesReq("./" + page.requirePath); and replace them by: handler = pagesReq("./" + page.requirePath.replace('\\', '/'));

For this article, I decided to use the Gatsby Starter Blog. It offers articles iteration on the front page and a single page for all items. Exactly what we needed for our demo products. Run:

gatsby new snipcart-gatsby-integration https://github.com/gatsbyjs/gatsby-starter-blog

Once you've done this, just hit gatsby develop and you're good to go. You should have a running website on localhost:8000 with react-hot-loader functionalities.

Edit meta data configurations

First, we want to define meta configuration values like the blog title and the author name. To do so, go to the root of your project and edit the config.toml file. Mine looks like this:

blogTitle = "Snipcart - Gatsby"
authorName = "The Great Gatsby"

Create and define products

Let's add some products under the "pages" folder. You will need to create 1 folder per product with a index.md inside. Have a look:

/pages/bow-ties/index.md

---
title: Bow Ties
layout: post

id: "2"
image: "/bow-ties.jpg"
price: 7.00
path: "/bow-ties/"
description: "The bow-tie (not to be confused with the tae bo) is an aphrodisiac worn by male humans attempting to win one or more mates."
---


The bow-tie (not to be confused with the tae bo) is an aphrodisiac worn by male humans attempting to win one or more mates. According to scientists (many of whom sport the style regularly), the bow-tie has been clinically proven to yield positive results. These findings were confirmed by the surge in popularity of the ties in the 1960's which led to a nation-wide public school banning. ([source](http://uncyclopedia.wikia.com/wiki/Bow_tie))

/pages/dry-martini/index.md

---
title: Dry Martini
layout: post

id: "3"
image: "/dry-martini.jpg"
price: 8.50
path: "/dry-martini/"
description: "The taste of excellence."
---

> "One Martini is all right. Two are too many, and three are not enough."

/pages/fireworks/index.md

---
title: Fireworks
layout: post

id: "1"
image: "/fireworks.jpg"
price: 67.89
path: "/fireworks/"
description: "Fireworks are a noble, traditional way to emphasize the greatness of an event."
---

Fireworks are a noble, traditional way to emphasize the greatness of an event. They command the epic. They are poetry in a dark night sky. They look good, smell strong, and are dangerous to play with. A bit like secret agents.

Integrate Snipcart into your static Gatsby site

You'll need to create a free Snipcart account from this point on. You can sign up here.

Your root folder should contain a html.jsx file. Simply add your Snipcart JS file just before the closing body tag.

 <link id="snipcart-theme" type="text/css" href="https://cdn.snipcart.com/themes/base/snipcart.css" rel="stylesheet" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <script type="text/javascript" id="snipcart" data-api-key="{SNIPCART API KEY}

This snippet of code can be found under the API keys section of your Snipcart admin dashboard.

Now, let's add product buttons into the md.jsx file:

<a 
  href='#' 
  className='snipcart-add-item'
  data-item-id={post.id}
  data-item-price={post.price}
  data-item-image={post.image}
  data-item-name={post.title}
  data-item-description={post.description}
  data-item-url={"http://snipcart-gatsby.netlify.com" + post.path}>
  Buy
</a>

Deploy using Netlify

We've deployed static site e-commerce projects a few times already using Netlify. You can check out a few of our demo sites and repos on GitHub. In a nutshell, Netlify is a quality CDN-based hosting service streamlining builds, deploys and hosting for static sites. Developers dig it, and so do we!

You can check out their quickstart documentation. We ended up running these:

npm install netlify-cli -g
netlify init
netlify update -n snipcart-gatsby
netlify deploy

And our static site's already deployed. :)

Witness the greatness

Now for the fun part: let's take a look at our Great Gatsby demo store!

snipcart-reactjs-static-ecommerce-gatsby-store

snipcart-reactjs-static-ecommerce-gatsby-fireworks.png

snipcart-reactjs-static-ecommerce-dry-martini-glasses

snipcart-reactjs-static-ecommerce-gatsby-bow-ties

Let the party begin.

Conclusion

Building a fully functional ReactJS e-commerce with no backend with Gatsby & Snipcart took me less than four hours. Here's a summary of my thoughts on Gatsby:

The stuff I really enjoyed

1- Overall, Gatsby's fun to work with. The stack is really interesting and makes good use of some of the latest web technologies.
2- Using the command-line tool is simple enough.
3- The "Starters" available on GitHub are a very nice touch to kickstart projects.
4- It's easy to use, learn and customize.

The stuff I enjoyed a bit less

1- Gatsby isn't 100% mature yet; a lot of changes are being made in the tool. Still, they're upfront about it and put this information front and center in their README.
2- Installing the generator came with a few challenges. Reading the GitHub issues, I believe I'm not the only one who experienced these.

I hope this post inspired you to play around a bit with Gatsby, and maybe even start a modern static project. And if you throw e-commerce with Snipcart in the mix, let us know at geeks@snipcart.com. We'd love to check out your projects, and maybe even feature them somewhere!

We have a big post on static workflows coming up on another (very) cool business' blog in the following weeks. I invite you to subscribe to the newsletter to make sure you don't miss it.

And now, I'm going back to my code & coffee.


If you found this post entertaining or valuable in any way, feel free to send a tweet our way. We'd love that! And if you have any questions or comments regarding ReactJS, static web dev, Gatsby or Snipcart, hit the section below.

Suggested posts: