gatsby-fasset v0.0.1

Fasset Marketing Website

QuickStart

1. Update Package.json with project details.
2. Run yarn install
3. Copy .env.example to .env and populate environment variables.

Front-End: Gatsby

The site is built using Gatsby, which is a static website generator that uses React. There are a handful of React components included in this starter to demonstrate how Gatsby works and to provide some out-of-the-box functionality . These are broken up into a few directories:

• /src/pageTemplates: page components that Gatsby uses to build pages based on definitions in gatsby-node.js.
• /src/pages/: page components that Gatsby builds automatically
• /src/components/: all of the components used to build pages.

Dive into gatsby-node.js and gatsby-config.js for a high-level overview of how Gatsby orchestrates the site. And for more information on developing with Gatsby, visit their site.

State Management

Gatsby re-hydrates into a fully interactive React app after page load, allowing us to make use of "single-page-app" paradigms like global state management. We use the Cosmic React State Management package built on React Hooks to provide state management. You can This is configured in the src/state directory.

CMS: Prismic

Content is hosted on prismic.io. You will need GATSBY_PRISMIC_REPO and GATSBY_PRISMIC_API_KEY environment variables defined in order to connect to Prismic.

We're using the gatsby-source-prismic plugin to connect and make graphql queries to Prismic. Current documentation is availabel here: Beta V3. The configuration settings for the plugin are in ./src/prismic/config.js.

Maintaining a level of CMS agnosticism

Prismic-specific code is separated from React components in a separate folder ./src/prismic, where we store the following:

• plugin configuration definitions
• schema definitions for the Prismic custom types
• a linkResolver for handling link relationships in Prismic content
• data queries for any components that need to be seeded with Prismic data
• helpers for displaying previews of CMS changes before publishing

Previews

Previews are a way to render un-published content from Prismic without having to build/deploy changes. Prismic sends preview data to a particular route (defined as /Preview in the Prismic admin), and then it's up to us to parse that data and render it using the appropriate page template.

Deployment: Netlify

Netlify is a hosted service that builds and serves the site.

Continuous Integration

Deployments are triggered automatically when changes are merged to master in the linked Github account, or changes are published in the linked Prismic CMS (more on this below). Additionally, you can manually trigger a deployment from the Netlify admin interface.

In Netlify, a deployment happens in two steps: (1) the site is rebuilt using Gatsby's static-site generator; (2) the static files are pushed out to the CDN where they can be consumed publically. If something goes wrong in step 1, then the files are not pushed to the CDN. This provides some security that a broken site won't make it's way out to the public, but also means devs should monitor the status of the Netlify deploys to make sure they are completing successfully.

Staging environments

Any time a pull request is opened in the linked Github account, Netlify will spin up a staging environment that you can use to test changes. Check the deploy logs to get the url of the staging environment.

Netlify Functions and the Netlify CLI

Netlify Functions are wrappers on AWS Lambda functions, and are used any time we need to run server-side code. These functions live in .netlify/functions, and can be called by making requests to /.netlify/functions/function-file-name.

To test these functions in your dev environment, you need to install the Netlify CLI, and then use netlify dev instead of gatsby develop to boot your local environment. More on using Netlify Dev here https://www.netlify.com/products/dev/.

Note: when using netlify dev, environment variables will be pulled from the Netlify admin interface instead of your .env.development file.

This site uses one Netlify function to handle ActiveCampaign newslettter signups. More on this in the Integrations section below.

Styles: TailwindCSS

CSS styles are applied using the utility CSS framework Tailwind https://tailwindcss.com. The main config for tailwind is in ./tailwind.config.js.

Other code notes

• We're using eslint with the "AirBnb" presets, along with prettier to maintain code quality.
• We've defined many alias paths to make importing files easier. These alias paths are defined in ./alias-config.js.

Integrations

ActiveCampaign

• We use embedded ActiveCampaign forms on a few different pages. See ./src/components/ui/ActiveCampaignForm.js for details.
• Additionally, we use a Netlify function to make a server-side request to subscribe users to the ActiveCampaign newsletter list. See ./.netlify/functions/active-campaign-subscribe-newsletter.js.