Dusty Candland | Fri May 03 2019 Headless Shopify Storefront
I'm working on clothing brand e-commerce site. In most cases, just using Shopify or Gumroad would probably be the right choice.
But... I'm a developer, I want to have control over the frontend experience, but not so much the e-commerce backend. Plus I'm also building CloudSh, which provides search for static sites, so I wanted to create it using the JAMstack.
Here's what I picked and why. Future posts with dive into the how.
The Cart - Shopify
I ended up with Shopify when I saw they offer a minimal package for $10/mo that doesn't include the Shopify site. Also, they integrate really well with Printful, which the site needs. Also, looked at Snipcart and Gumroad.
I'm rooting for Snipcart, but I don't like the percentage charge for the service. I'm mean they're not promoting products or directly increasing sales. Also, no Printful integration yet.
Gumroad also seems great and I've heard tons of good things about them. They actually do have some services that help promote products and increase sales. They integrate with Printful, though it didn't feel like a deep interation. I think I like the pricing model and they have an API, but not one for the frontend, so I'm not sure how the cart part would work. Anyway, the printful integration was the biggest issue.
So Shopify it is. Good server side API, good frontend API a plan that seems made for headless e-commerce. Tons of integrations.
The Generator - Eleventy
Next, what to build with? My goto has been Jekyll, so I started there. The builder needs good JavaScript and CSS bundling but Jekyll is lagging behind in that area. There are options of course, but it's also kinda slow which slows down development a lot.
Ok, I want fast, so Hugo was the next obvious choice. I started building out the basic structure. It doesn't have a great JS/CSS system either, but the deal breaker was the lack of support for the Ace templating language and adding your own functionality is hard or impossible? I didn't dig enough to find out.
Gatsby was out because I don't like React that much and it seems like it adds too much complexity for static generation.
After all this, I came to two realizations. I'd have to use Webpack or something to bundle everything. And the HAML/Pug/Slim support in most generators is pretty limited.
At this point I'm about to go back to Jekyll. But the New Dynamic slack kept talking about Eleventy (11ty). Specifically this post about turning Jekyll up to Eleventy by Paul Lloyd got me to check it out.
Eleventy sounds awesome because I have a lot of Jekyll sites already and moving them to Hugo or Gatsby would be a huge pain. Didn't matter for this project, but I like to keep things kinda similar when I can.
I converted what I'd started with in Jekyll to Eleventy. It was easy, just worked, provided a ton of powerful features, and it's super flexible. I'm sold!
Two drawbacks, but not really. The HAML/Pub support is behind Nunjucks. And no JavaScript/CSS bundler.
The Bundler - ParcelJS
I finally came to accept that I'm going to need a generator for the static site part and a bundler for the assets.
Webpack seems like the natural default. I like it. I've used it on plenty of projects. Getting it setup and working always takes forever and is complicated. It's getting better, but why not look around?
Like Eleventy, I'd seen ParcelJS talked about a bit. They claim:
Blazing fast, zero configuration web application bundler
So far it's been just that. It's easy to get going and the defaults are pretty much what I wanted. But the biggest thing is no config. Well, minimal config anyway. More about that in a later post.
The Glue - StimulusJS, jQuery, Bootstrap, Nunjucks
I feel like most people are familiar with jQuery and Bootstrap so I'll skip over them. I'd like to checkout TailwindCSS, but too many new things already.
This is the first time I've used StimulusJS. I love the approach they take, which is to progressively enhance the HTML. State is stored in HTML and events are wired up in the HTML. In a weird way, it feels like React when you use it to add bits of functionality to a page. Side note; I think people default to single page apps too quickly with React.
And Nunjucks. I really like building HTML using something besides HTML. Given the lack of support for those templates I went with the default for Eleventy, Nunjucks. I actually like it alright. A big benefit that I didn't think about at first is that I can use it on the static generator side AND the client side. Not such a downside after all!
Putting it all together
In some upcoming posts I'll explain how it all went together, things that I ran into, and how I got around them.