adassow / atlas-blueprint-shopifyqewesfdf

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Atlas Shopify Blueprint

A Shopify template for Atlas Blueprints.

This repository contains a starter Blueprint to get you up and running quickly on WP Engine's Atlas platform with a simple WordPress site that uses product data from Shopify.

Development

Copy .env.local.sample to .env.local in your local development environment to set environment variables locally. The sample env file points to the demo Shopify Blueprint Wordpress site, but you can change it to point to a local Wordpress site instead.

Add your Shopify variables to configure the Shopify Client.

Install dependencies with npm install - if you run into issues try npm install --legacy-peer-deps

Make sure that any Wordpress site that is connected to this headless site has its Permalinks set to use this custom structure:

/posts/%postname%/

Architecture Decision Records

See the docs/adr directory for a list of architectural decision records made so far.

Tests

Components are tested using React Testing Library and Jest

To run tests npm run test

Linting and pre commit hooks

Eslint and Prettier are used for linting and formatting. Please have Prettier installed in Vs Code when developing locally to adhere to formatting standards. For pre commit linting and formatting we use Husky. This will run when a you run a commit, if it fails check the Node logs for issues that need to be solved before committing again.

NVM ( Node Version Manager )

.nvmrc is specifying that Node.js v18 should be used. Any developer could then run nvm use to download, install, and switch to that version. nvm install will then install dependencies in line with that version.

Configuring Shopify locally and on Atlas

In addition to default environment variables the Shopify Blueprint needs to add 2 more as follows:

  • NEXT_PUBLIC_SHOPIFY_HEADLESS_PUBLIC_ACCESS_TOKEN
  • NEXT_PUBLIC_SHOPIFY_GRAPHQL_URL

For local development these can be added to .env.local and for production deployments these can be added in Atlas Dashboard. See WP Engine headless docs for directions on how to configure Atlas Environment Variables.

For more information

For more information on this Blueprint please check out the following sources:

About


Languages

Language:JavaScript 78.0%Language:TypeScript 11.1%Language:SCSS 10.9%