👋, Back at it again with another Headless + Preview experience using our favorite tools here at The Couch. This time instead of using Next.js for my Gatsby preview I decided that the build pipeline for the site was actually fast enough to just create a second environment within Netlify itself. This is a relatively easy task but I figured I’d walk you through how we did it anyway.

Part 1 — Netlify Setup

I’m assuming you’re using Netlify in this case. We have a Github integration that automatically builds from deployments to a Master branch. In order to add another deployment type we have…

You just spent weeks/months building and coding a lovely new website. You’ve done everything to prepare for launch. Ran through the checklist of items needed, optimized images, fixed any 404s, ran through some ADA checks and prepped the DNS, set up redirects… etc.

The one thing you can’t prepare in advance for however is Open Graph sharing. The first thing any client/user will do is share your new website on Slack, Facebook, or Twitter. Whenever a user does this these services fetch data from that URL. This creates theshareable card that we’re all familiar with. However these services rarely prime…

I’m sure some of you are familiar with Slate, the toolkit that Shopify released that powers custom Shopify experiences. It’s a huge awesome step in the right direction and a much better experience than Themekit. Shopify development has improved a lot over the last 5 years, I still remember the days before the API where you were manually creating themes in the editor. :(

Enter Slater

Playing on the notion of Slate, we built our own version of it here at The Couch. Slater is a combination of a number of tools we use internally. What it provides out of the box:

• …

Contentful is a really powerful CMS that we use on a number of projects at The Couch. However despite most of our clients having an intimate hate for Wordpress, they do have an intimate love for some of the common features. One of which isn’t something that works out of the box with Contentful: Preview.

We build a number of our Contentful sites with Gatsby. Most of our sites have a build time anywhere between 30s to 4 minutes. Because of this wait we’ve implemented some work arounds that allow clients to preview content in the production build. This however…

Over the last year we’ve built a number of quizzes and application flows (sign ups, onboardings, & product builders). While building these flows we decided to a build a library for handling this seemingly repeatable experiences. As such React Strider was born.

At it’s core React Strider is a library for going forward and backward between a series of components. The library has a few extra whistles for animating between steps (transition based css classing), returning the active index, and allowing you to portal jump to any step within the series.

Building a simple version of the Codecademy Quiz

As a case study, we’re going to be building…

While building websites regardless of the platform we often need to add some form of contact form. If you’re using Mailchimp you generally don’t have to build something server side, and you can actually read my other article about RIMP (which is a react Mailchimp component).

However RIMP wasn’t enough in this case and I actually needed to send some information directly to an email account. For this we’ll utilize Nodemailer. And since these request need to be handled on the server we’ll have to add a server to our Next.js app. Next.js handles the server stuff out of the…

Today we’re going to be hooking up a Contentful blog into a Shopify experience. This is by no means a beginner article but I’ll do my best to make it easy to follow. You should be familiar with both Contentful and Shopify, as well as have a good understanding of Es6 Javascript, but not entirely required to follow along (this could also pretty easily be swapped with Wordpress JSON API, Prismic, and other headless options).

What we’re using

Micro — Microservice framework that will be listening to webhooks
Now — Hosting platform for our microservice
Contentful Webhooks — sending data to our Micro service
Contentful NPM…

I’ve done a lot of bad things to Shopify, a lot of things you’re not supposed to, a lot of things that most likely terrified the developer that had to inherit the code after me. This is mostly not my fault, because everyone wants custom e-com experiences from a closed box system (well not that closed but you know what I mean).

So this is my effort to give something back that isn’t bloated and disgusting and hopefully makes building things like rich/ajax carts experiences easier without a boat load of dependences and of course no jQuery.

Welcome Richer ~~

This is a…