Forem: Leo Mercier

Deploying a Gatsby Site to Firebase with Google Cloud Build (CI/CD)

Leo Mercier — Fri, 21 Jun 2019 15:30:18 +0000

I have seen a load of articles on hosting Gatsby on Netlify but none for Firebase & Google Cloud Platform so decided to do a write up on it. In the following configuration its free to hosting too so great for any starter projects.

I run the development team at Crowdform, a digital product studio in London, and we have been busy building our lastest client websites in Gatsby.

As an agency we have chosen ReactJS and GraphQL in our larger digital products so seemed natural to make the move to Gatsby too for consistency. Gatsby can be used to build static websites that are Progressive Web Apps, they follow the latest web standards, and are optimised to be highly performant so score well on Google Lighthouse. We do still use Wordpress but now in a headless configuration.

Prerequisites

Gatsby Project (Follow the Quick Start Guide)
Project in GitHub, Bitbucket or Google Cloud Source Repository
Google Cloud Account with billing enabled (you will not be charged as the limits on Cloud Build are generous and Firebase Hosting is free. Cloud Build gives you the first 120 builds-minutes per day free)
Google Firebase Project & Google Cloud Build API enabled

Setting Up Cloud Build

Add a build trigger
Link a Git Repo

Full Google Cloud Build Instructions

Cloudbuild.yaml Config

Create a file cloudbuild.yaml in the root of your project and copy across the below Gist into the YAML file.

steps:
  - name: node:10.15.1
    entrypoint: yarn
    args: ["install"]
  - name: node:10.15.1
    entrypoint: yarn
    args: ["add", "firebase-tools"]
  - name: node:10.15.1
    entrypoint: yarn
    args: ["build"]
  - name: "node:10.15.1"
    entrypoint: "./node_modules/.bin/firebase"
    args: ["deploy", "--project", "$PROJECT_ID", "--token", "$_TOKEN"]

Use a Yarn & Node virtual machine
Install all dependencies
Install Firebase-cli (normally installed global on a local machine)
Run the Gatsby build function and generate the static site to /public
Push the contents of the public folder to Firebase Hosting.

Authorising Firebase

firebase login:ci

In CloudBuild under the “Substitution variables” add the key value.

_TOKEN: {token from firebase login:ci}

Now Run the build Trigger

For a full step by step guide see our article on deploying a gatsby site to Firebase with Cloud Build.

Startups for Realists #1 – with Tom Evans, COO of EmailOctopus

Leo Mercier — Thu, 25 Apr 2019 16:15:41 +0000

In Startups for Realists, we talk to people in the world of startups about the realities of their day-to-day work – the good, the bad and everything in-between.

This week we spoke to Tom Evans, the COO of EmailOctopus, a bootstrapped email marketing platform, with a focus on simplicity and low-cost (around 1/3rd of the price of MailChimp) all whilst offering excellent customer support. Over the last 5 years, they’ve helped more than 30,000 organisations send over 6 billion emails.

What’s your typical day look like?

I enjoy my sleep, so try to wake up around 8.30. After catching up on the news and getting ready for the day I switch onto EmailOctopus work. The first half-hour of the day is spent quickly checking up on our reports, numbers, and emails from customers which have come in overnight. Most of the morning reports have now been automated so I can see our acquisition figures on a day/day or month/month comparative basis at a very quick glance.

What’s your office set-up?

I work from a mix of home and an office space...

You can read the full interview with Tom Evans, over on our product studio’s blog.

Lesser known tricks to level up your UI design

Leo Mercier — Mon, 22 Apr 2019 10:01:52 +0000

Over the last three years at Crowdform we’ve designed countless digital products. Along the way we’ve picked up a few subtle and unexpected tricks which can really level up a product design. So we thought: why not collate these tips into a series of articles to help the other UI designers out there?

1) OVERLAY SHAPES ACROSS SECTIONS TO ADD MORE DEPTH

Sometimes a straight transition from one section to another looks, well…boring.

If you have a graphic element on your page, it’s worth experimenting by overlaying it across two sections. Your design should look more fluid and less compartmentalised.

We wrote a longer article, with 6 other examples, over on our product studio’s blog.