Build an e-commerce site with Gatsby, Snipcart and Flotiq
Tags: javascript, gatsby, snipcart, flotiq
Published: 2020-04-09 09:44:38

Times are tough, so many businesses are trying to move their sales online. So - this time, we'll dive deep into building e-commerce with Snipcart, Flotiq and Gatsby. 

We'll start with a fresh Flotiq account, build a Content Type Definition, hook it up with a Gatsby starter and finally - deploy it live using Heroku.

What you'll get:

1. A simple, but beautiful, functional e-commerce website with your own products, running live on the Internet.

![Live e-commerce website, built and released in 5 minutes](https://flotiq.com/docs/Deep-Dives/images/snipcart-gatsby-demo/live-website.png)

What you'll need:

1. Flotiq account (free),
2. Snipcart account (free for testing), register [here](https://snipcart.com)
3. Node.js & NPM installed
4. [This repository](https://github.com/flotiq/gatsby-starter-products)
5. Heroku account (free) if you'd like to put it live.

Let's get started!

## Prepare your Flotiq account

For this particular project - we'll use Flotiq to store the information about products - names, prices, etc.
There's a couple of simple steps that shouldn't take longer than 1 minute to complete.

### Register an account, 30 seconds
The first thing you'll need is a free Flotiq account, [register a free account in Flotiq](https://editor.flotiq.com/register.html). No payments, no credit cards, simply connect using your Github account or email. 

### Create your Content Type Definition, 30 seconds

The most crucial step - you have to tell Flotiq what kind of data you want to store in the system. What are the names of the content types and their properties. 

When you first log in - it's going to be pretty empty. No content, nothing. Head over to the `Type definitions` screen.

![Predefined Content Type Definitions](https://flotiq.com/docs/Deep-Dives/images/snipcart-gatsby-demo/upload_eb0f862f52d89aa0558842509818938a.png)


Here you find a list of simple boilerplate content types, which are a great start if you're in a hurry. 

Click on `Product` and then `Save`. You don't need to make any changes to get up and running with this project!

![Product content type body](https://flotiq.com/docs/Deep-Dives/images/snipcart-gatsby-demo/upload_2b69829cba0a8ad8d76416fb0bf7a6b0.png)

### Create your content, 2 minutes

For this project to work - you have to create a couple of products. In the left sidebar click on `Content` → `Products` and click the `Add new Product object` button.

![Adding new Content Object of type Product](https://flotiq.com/docs/Deep-Dives/images/snipcart-gatsby-demo/upload_999f5372a47637004f06bc1a00cc007e.png)

Enter the product detail.

![Product details in Flotiq](https://flotiq.com/docs/Deep-Dives/images/snipcart-gatsby-demo/upload_9832c93c03f6862b07fcb13f848962fe.png)

You can upload your images or use our awesome Unsplash integration - head over to the `Stock photos` tab in the Media Library and browse through thousands of beautiful images.

![Stock photos media library](https://flotiq.com/docs/Deep-Dives/images/snipcart-gatsby-demo/upload_a1a461706f319a31ce3f4ba1b58756dc.png)

Finally - click the `Save button`. 

Repeat for as many products as you want.

> **Hint:** If you'd like to programmatically import hundreds or thousands of products, instead of typing them by hand - you can use Flotiq's `batch` endpoints in your API. Read more about [batch content creation in Flotiq](https://flotiq.com/docs/API/content-types/#batch-content-upload).


## Start your Gatsby project, 2 minutes

To make this extremely simple, we have prepared a Gatsby starter, that integrates with Flotiq as a data source for products. You will configure the project, install its dependencies and put the site live in no-time.

### Clone the repo


Start by cloning the repository:

```
git clone https://github.com/flotiq/gatsby-starter-products
```

### Configure Flotiq

Then, in the root folder of the repository create a file called `.env`. This file store the configuration for Flotiq and Snipcart. Put the following contents in the `.env` file:

```
GATSBY_FLOTIQ_BASE_URL="https://api.flotiq.com"
FLOTIQ_API_KEY="YOUR FLOTIQ API KEY"
```

You can find your Flotiq API keys in the user profile section of the interface:

![Flotiq user API key](https://flotiq.com/docs/Deep-Dives/images/snipcart-gatsby-demo/upload_61473eb050d5e4992b8c88eac716e52b.png)

> **Caution:** We strongly recommend that you create a scoped API key (read more about [API access](https://flotiq.com/docs/API/)), but for development, you can use the default Read Only key provided in the interface. 
  
### Check if it works!

It's as simple as that. You should be good to go. Install the NPM dependencies and start your gatsby project:

```
npm install
gatsby develop
```

You should now see your store at `http://localhost:8000`.

![Your store](https://flotiq.com/docs/Deep-Dives/images/snipcart-gatsby-demo/upload_18388a1968458357ff2eea62bb563adc.png)

## Start selling online

Yes, it is **that** simple. 
You're almost ready to start selling; the final part is to configure Snipcart properly.

### Configure Snipcart

Head over to [Snipcart](https://snipcart.com) and in your account - retrieve your Public API Key.

![Snipcart account api key settings](https://flotiq.com/docs/Deep-Dives/images/snipcart-gatsby-demo/upload_73bf9f96f1fadaf960e12e802833a26b.png)

Put that key in the `.env` file, so the file now looks like this:

```
GATSBY_FLOTIQ_BASE_URL="https://api.flotiq.com"
FLOTIQ_API_KEY="YOUR FLOTIQ API KEY"
SNIPCART_API_KEY="YOUR SNIPCART KEY"
```

and restart gatsby with `gatsby develop`.

Here's what you should now see, once you put an item in the cart:

![Your cart](https://flotiq.com/docs/Deep-Dives/images/snipcart-gatsby-demo/upload_82b4d268d923659550753caa762f02c2.png)

Once you complete the checkout steps, you'll see the final screen:

![Confirm order](https://flotiq.com/docs/Deep-Dives/images/snipcart-gatsby-demo/upload_632049a8ac4b39a5d39233d1e8414720.png)

But if you try to place the order from your local machine - it will end up looking like this:

![Your order cart content](https://flotiq.com/docs/Deep-Dives/images/snipcart-gatsby-demo/upload_0b4afe702b39d742e65fe8bf652a517f.png)

So - if you want to test the integration entirely - it's time to put this site live!

## Putting the website live using Heroku, 2 minutes

To make it super simple - we've prepared a button, that immediately put your project live on the Internet. 

Press the button!
  [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/flotiq/gatsby-starter-products)
  
Once you log in to Heroku (you can use a free account for that) - you have to pick a domain name for your project. We used `snipcart-flotiq`.

![Name and Region settings in Heroku](https://flotiq.com/docs/Deep-Dives/images/snipcart-gatsby-demo/upload_f7b021894467811e477eae8c3a3190f9.png)

and then copy the details from your `.env` file in the input fields 
![Application Configuration in Heroku](https://flotiq.com/docs/Deep-Dives/images/snipcart-gatsby-demo/upload_e88ab376e585bfdf413351b01898f9f7.png)

and hit `Deploy app`. In a minute (or two) - your app is live!
![Deploy App to Heroku button](https://flotiq.com/docs/Deep-Dives/images/snipcart-gatsby-demo/upload_0e11e37662064ad43e0fc994f4cf7401.png)

!!! hint
    If you'd like to host this project under your own domain name, you can use the wonderful **and free** service provided by Cloudflare and [this hack](../add-a-custom-domain-to-heroku-for-free/) to add a custom domain to a free Heroku account. Normally - you would have to pay for that in Heroku, but hey - times are difficult.


### Provide the domain name in Snipcart

While you're waiting for the deployment to finish - go to your Snipcart profile page and configure your domain name:

![Provide domain name in Snipcart](https://flotiq.com/docs/Deep-Dives/images/snipcart-gatsby-demo/upload_b9ba70e10596a6c60ec648a41eb1ee4c.png)

### Verify the result

Result? You've successfully placed an order!

![Order Result](https://flotiq.com/docs/Deep-Dives/images/snipcart-gatsby-demo/upload_5c0836387a79f4dc5e187d30fef345c9.png)


And you immediately see it in Snipcart, too.

![Snipcart Order](https://flotiq.com/docs/Deep-Dives/images/snipcart-gatsby-demo/upload_1a5a590dd6e2fa214c221305e11f8b13.png)


## Conclusions

You've successfully built and deployed an end-to-end e-commerce platform using no code, thanks to the tools and templates provided by Flotiq, Snipcart and Gatsby. While there are still many important things to consider before you launch your e-commerce - this is a great way to minimize the cost and effort required on the technical side.

As always - let us know how it worked for you!


> This article was originally published as a Flotiq Deep Dive [Start selling online with Snipcart, Flotiq, Gatsby and Heroku](https://flotiq.com/docs/Deep-Dives/node-js-ecommerce-snipcart-gatsby-demo/)