All Projects → wpengine → Headless Framework

wpengine / Headless Framework

Licence: other
[Preview/Alpha] WordPress Headless Framework

Projects that are alternatives of or similar to Headless Framework

Nextjs Headless Wordpress
🔥 Nextjs Headless WordPress
Stars: ✭ 110 (-39.56%)
Mutual labels:  wordpress, headless-cms, nextjs
Headless Wp Starter
🔪 WordPress + React Starter Kit: Spin up a WordPress-powered React app in one step
Stars: ✭ 4,144 (+2176.92%)
Mutual labels:  wordpress, headless-cms, nextjs
Pop
Monorepo of the PoP project, including: a server-side component model in PHP, a GraphQL server, a GraphQL API plugin for WordPress, and a website builder
Stars: ✭ 160 (-12.09%)
Mutual labels:  wordpress, headless-cms, headless
Kohei.dev
🌎 A Production-level Single Page App with Server Side Rendering
Stars: ✭ 50 (-72.53%)
Mutual labels:  headless-cms, nextjs
Commercejs Nextjs Demo Store
Commerce demo store built for the Jamstack. Built with Commerce.js, Next.js, and can be one-click deployed to Netlify. Includes product catalog, categories, variants, cart, checkout, payments (Stripe) order confirmation, and printable receipts.
Stars: ✭ 737 (+304.95%)
Mutual labels:  nextjs, headless
Wordpress Api Nextjs Theme
A workshop on creating a WordPress theme with React and Next.js for WordCamp Montreal
Stars: ✭ 36 (-80.22%)
Mutual labels:  wordpress, nextjs
App
Directus Admin Application — An Intuitive WebApp for Managing Database Content
Stars: ✭ 464 (+154.95%)
Mutual labels:  headless-cms, headless
Builder
Drag and drop page building using your code components
Stars: ✭ 1,281 (+603.85%)
Mutual labels:  headless-cms, headless
Snipcart Wordpress React
Strapping React.js on a WordPress Backend: WP REST API Example
Stars: ✭ 66 (-63.74%)
Mutual labels:  wordpress, headless
Docker
Directus Docker — The Official Docker Container for the Directus Suite
Stars: ✭ 93 (-48.9%)
Mutual labels:  headless-cms, headless
Sdk Js
Directus JS SDK — JavaScript Software Development Kit for Node and Browser
Stars: ✭ 117 (-35.71%)
Mutual labels:  headless-cms, headless
Awesome Headless Cms
An awesome list of headless / decoupled CMS resources.
Stars: ✭ 118 (-35.16%)
Mutual labels:  headless-cms, headless
Cockpit
Add content management functionality to any site - plug & play / headless / api-first CMS
Stars: ✭ 5,173 (+2742.31%)
Mutual labels:  headless-cms, headless
Falcon
DEITY Falcon - Progressive Web App library for any type of website. Fully Open Source, Platform Agnostic and headless. OSL3.0. Supports Magento 2 PWA storefront, Wordpress PWA and BigCommerce PWA Storefront. Built with ReactJS, NodeJS and GraphQL. Join our community and become a contributor at https://slack.deity.io
Stars: ✭ 501 (+175.27%)
Mutual labels:  wordpress, headless
Contentjet Ui
Headless API-first content management system
Stars: ✭ 42 (-76.92%)
Mutual labels:  headless-cms, headless
Example Storefront
Example Storefront is Reaction Commerce’s headless ecommerce storefront - Next.js, GraphQL, React. Built using Apollo Client and the commerce-focused React UI components provided in the Storefront Component Library (reactioncommerce/reaction-component-library). It connects with Reaction backend with the GraphQL API.
Stars: ✭ 471 (+158.79%)
Mutual labels:  nextjs, headless
Formium
The headless form builder for the modern web.
Stars: ✭ 78 (-57.14%)
Mutual labels:  headless-cms, headless
Flextype
Hybrid Content Management System with the freedom of a headless CMS and with the full functionality of a traditional CMS
Stars: ✭ 436 (+139.56%)
Mutual labels:  headless-cms, headless
Nextjs Wordpress Starter
WebDevStudios Next.js WordPress Starter
Stars: ✭ 104 (-42.86%)
Mutual labels:  wordpress, nextjs
Directus
Open-Source Data Platform 🐰 — Directus wraps any SQL database with a real-time GraphQL+REST API and an intuitive app for non-technical users.
Stars: ✭ 13,190 (+7147.25%)
Mutual labels:  headless-cms, headless

Headless WordPress Framework

Introduction

WP Engine's Headless WordPress Framework provides a set of tools to make building front-end applications with WordPress as the headless CMS a pleasant experience for both developers and publishers. This framework consists of a WordPress plugin, a set of npm packages, and guides to get you started building headless WordPress sites in Next.js.

🚧 Note: This project is in the early stages of development

Quick Start

Eager to try out the Headless Framework? Here's how you can get started:

Create a front-end app

  1. Create a new Next.js app from our getting-started project: npx create-next-app -e https://github.com/wpengine/headless-framework/tree/canary --example-path examples/getting-started --use-npm
  2. cd my-app && cp .env.local.sample .env.local to create a file that contains your environment variables.
  3. npm run dev to start the development server.
  4. See your site at http://localhost:3000.

Point the app to your own WordPress site

The sample app loads WordPress content from our demo site at https://headlessfw.wpengine.com.

Point it to your own WordPress site instead:

  1. Create a WordPress site if you haven't already. We recommend Local to try things out locally, or you can use a live WordPress site.
  2. Download, upload, and activate the wpe-headless plugin. (Plugin Download)
  3. Install WP GraphQL on the WordPress site if it's not already installed.

Then, in your front-end app directory:

  1. Change NEXT_PUBLIC_WORDPRESS_URL in .env.local to the full URL to your WordPress site, including the http:// or https:// prefix.
  2. Change WP_HEADLESS_SECRET in .env.local to the secret key found at Settings → Headless in your WordPress admin area.
  3. npm run dev (kill and restart npm if it was already running)

You'll see the same site with your WordPress posts instead of ours.

To enable post previews, set your front-end app URL on the WordPress Settings → Headless page (for example, http://localhost:3000 when testing locally).

➡️ Learn more about getting started

Framework Features

Plugin Features

  • Headless post previewing
    • OAuth token authentication creation
    • Preview and draft link rewrites in WP Admin to redirect to the front-end
  • Smart content redirects
    • Automatically redirects content from the WP site to the front-end site to minimize site visitors’ confusion and avoid SEO penalties for duplicate content
    • Redirects hyperlinks inserted into posts’ content to the front-end site
  • Disable WP theme admin pages
    • Prevents access to admin pages that have no effect on the headless front-end appearance, such as Appearance → Themes.
  • Ability to define custom menus in a GUI
  • Additional data exposed through WPGraphQL
    • Block stylesheets

npm Package Features

  • Post previewing integration
    • Auth handler that exchanges a code for an access token
  • A HeadlessProvider component to ease communication with WordPress via Apollo and WPGraphQL.
  • A TemplateLoader component that optionally allows you to follow the WordPress template hierarchy pattern in Next.js
    • Load page templates based on the current URL path and page type
    • Utilize functions like getPropsMiddleware for adding to/manipulating data depending on the template
  • Display WordPress menus with our Menu component
  • React hooks for pulling data from WordPress
  • “Sensible defaults” for Next.js props and paths

Download & Installation

There are two key parts of the WordPress Headless Framework. To take full advantage, you will need to install the plugin in addition to the npm package.

WordPress Plugin

📥 Download Latest

After downloading the zip linked above, we recommend installing by Manually Uploading via WordPress Admin.

@wpengine/headless npm Package

Version

Yarn

yarn add @wpengine/headless

npm

npm install --save @wpengine/headless

Guides

Contributing

Since we're in the early stages of development, we are not currently accepting outside contributions; although, we are interested in any problems that you encounter while using the framework.

Development Guide

As this repository contains a WordPress plugin as well as npm packages, we have a few recommendations to help streamline your development process.

License

  • npm packages in this repository are MIT licensed
  • WordPress plugins in this repository are GPLv2+ licensed
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].