Requirements

Setup documentation

Table of contents:

Below are the 5 main requirements You need to provide for the solution to work as well as other things You need to consider – as of its unique mechanics and architecture.

1. A back-end WordPress instance* – with our bundle configuration including our headless theme and plugin and its dependencies.
- 1.1 Headless Previews WP theme v1.1+ | By Coded Letter – DOWNLOAD | OPEN SOURCE
- 1.2 Headless Mods WP plugin v1.1+ | By Coded Letter – DOWNLOAD | OPEN SOURCE
- 1.3 Must-use plugins installed and active – view required plugins
2. Github account and our code – for your superfunky front-end code’s fork obtained from us after buying.
- Free Github account
- CODE REPO – ACCESS REQUIRED
3. Front-end CI/CD environment – local server run with node or netlify properly configured with a GitHub repo is fully supported.
- Free Netlify account for CI/CD
- Local development (no f-e server, great for tests – read more).
4. DNS zone access – You also need to be an owner of a domain with access to DNS settings and a SSL certificate for the WP backend to work properly with our solution*.
- DNS settings for headless setups
5. Stripe account – for processing payments*
- Free Stripe account
- env keys (test / prod)
- setting up stripe in woo

*Optional – can be configured later.

Overview of the requirements

1. WordPress backend instance

A running WordPress instance for the backend server, we recommend secure and scalable hosting services like AWS or GCP for the backend instance, it will also need a separate domain or subdomain and a SSL certificate.

The headless plugin implements our best practices with security, optimisation, and lets you manage dependencies and updates easliy acting also as a bridge between Your headless WordPress and Gatsby.js front-end.

Headless Previews Theme by Coded Letter – installed and active – DOWNLOAD
Headless Mods Plugin by Coded Letter – installed with dependencies – DOWNLOAD
- Must-use plugins – the headless mods plugin shows a manager under “plugins -> Headless Deps” to help with the proper installations and version management as well as locks some updates to deliver stability and futureproofing.
  - WooCommerce Version 9.6.1+ | By Automattic – DOWNLOAD
  - WooCommerce Stripe Gateway Version 9.1.1+ | By Stripe – DOWNLOAD
  - Advanced Custom Fields Version 6.3.12+ | By WP Engine – DOWNLOAD
    - ACF JSON Schema Import file for theme options and extra variables – DOWNLOAD JSON (needs implementation with versioning)
  - ^*WP Gatsby Version 2.3.3 | By GatsbyJS, Jason Bahl, Tyler Barnes – DOWNLOAD
  - ^*WPGraphQL 1.32.1 | By WPGraphQL – DOWNLOAD
    - ^*WPGraphQL for ACF Version 2.4.1 | By WPGraphQL | Requires: WPGraphQL – DOWNLOAD
    - ^*JWT Authentication for WPGraphQL Version 0.7.0 | By WPGraphQL, Jason Bahl – DOWNLOAD
    - ^*WPGraphQL WooCommerce (WooGraphQL) Version 0.15.0 | By kidunot89 – DOWNLOAD
  - *Polylang – required with one language configured
    - Polylang 4 Woo (paid) – Note: Required for fully multilingual e-commerce, additional costs will apply.
    - ^*PolylangGraphQL Version 0.7.1 – DOWNLOAD
  - Recommended plugins (optional):
    - ^*WPGraphQL CORS Version 2.1 (optional for advanced features) – DOWNLOAD
    - ^*WPGraphQL Smart Cache (optional smart caching for WPGraphQL)Version 1.3.3 – DOWNLOAD
    - Yoast SEO +(WIP / coming soon) DOWNLOAD
      - *Yoast for graphQL (WIP / coming soon) – DOWNLOAD
    - Mailgun Latest (SMTP and autoresponders – email deliverability) – DOWNLOAD

* – must match exact version, updates are not supported yet
+ – means they can update safely

After You installed the required ecosystem proceed to setting WordPress settings.

2. GitHub setup

Create a free github account and make a fork of the project.

Free Github account

After purchase, we will provide access to Your private fork and You will stay synchronised with frontend updates. It is a good idea to register to netlify with github in the next step to save time and keep a password less approach easier to maintain.

Repo with code – note: if access is not given a 404 is returned (private).

After You are given access create a private fork in Your github account of the superfunky-woo repository, this way You will stay up to date with the updates from us.

Now You need to configure .env variables properly with Your WP instance data from the plugin installation part with proper endpoints for graphQL and domain names and You are ready to start developing locally or moving further to a CI/CD workflow with netlify.

3. Frontend CI / CD – Netlify

Netlify with GitHub deployments is supported and mostly free to run for smaller organisations, making it ideal for start-up’s, small and medium businesses but also bigger organisations.

Note for bigger scale projects costs may arise, for details on cost calculation and estimation visit the official netlify pricing page and read the article about cost estimation.

Our integration works out of the box with the two platforms including all the post processing and extensions.

Free Netlify account

Once You set up the accounts refer to the following parts of the setup

Netlify settings

4. DNS settings & SSL (for backend)

You need to set DNS properly and for production, it is required that You have a valid SSL certificate to process payments. Learn how to move Your DNS to Netlify and set records easily from there.

5. Stripe account and keys

Learn more in configuring stripe section. Visit Stripe official documentation to learn how to get certain keys like the test keys and secret keys.

For payment processing, stripe needs setup in Woocommerce and in the netlify UI or project’s folder .env files to work properly.

Learn more about setting stripe in each of the sections:

Stripe setup in Woo
Stripe setup in netlify UI
Getting stripe keys for tests and production

Next 1.2 WordPress setup