node package manager
Easy collaboration. Discover, share, and reuse code in your team. Create a free org »

tapestry-wp

Greenkeeper badge npm CircleCI Known Vulnerabilities

Tapestry is a Universal JavaScript Application for rendering React front-ends via the Wordpress API.

Note: This is currently a work in progress and will likely undergo major public/private API changes and feature updates.

Using Tapestry

Install tapestry-wp through npm or yarn

npm install tapestry-wp --save

Map the Tapestry commands to npm scripts in your package.json

"scripts": {
  "start": "tapestry",
  "start:prod": "tapestry start",
  "bootstrap": "tapestry init"
}

You can now either run npm run bootstrap to create a simple Tapestry project or manually add a tapestry.config.js to your project root.

import Post from './components/post'
import Page from './components/page'
 
export default {
  components: {
    Post, Page
  },
  siteUrl: 'http://your-wordpress.url'
}

API

  • siteUrl: The Wordpress instance to access the WP-API. e.g. http://thesun.co.uk
  • components: An object with React components mapped to Wordpress endpoints. e.g. Post, Page, Term, Category
  • loaders: An optional object with data loading functions matching components.
  • proxyPaths: An array of paths to allow proxy access e.g. ['robots.txt', 'favicon.ico']
  • host: The host Tapestry is assigned to. e.g. localhost
  • port: The port Tapestry is assigned to. e.g. 3030
  • onPageUpdate: A function called on React-router route event

Plugins

If running WordPress 4.7 or later, the Rest Filter WordPress plugin will need to be installed to run tapestry-wp.

Roadmap

Tapestry has a long list of features that we are looking to implement, including confirmed and super speculative features.

  • Server render React component tree
  • Bundle the app for the client
  • Provide production option for client bundle
  • Supply CLI to run the server
  • Hook up WP-API to match routes
  • Render <head> tags with react-helmet
  • Supply default routes
  • Integrate Glamor CSS-in-JS framework, rendering server-side, hydrating on the client
  • Ability to override data loaders
  • Ability to override routing
  • WordPress plugin to enable previewing, 'View Post' functionality and permalinks
  • Create a global Redux store of page, post and archive data
  • Handle Redirects
  • Access options, menus through WP-API