├── .gitignore
├── README.md
├── nuxt
├── .env.example
├── .gitignore
├── README.md
├── assets
│ └── README.md
├── components
│ ├── Logo.vue
│ └── README.md
├── layouts
│ ├── README.md
│ └── default.vue
├── middleware
│ ├── README.md
│ └── auth.js
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
│ ├── README.md
│ ├── _.vue
│ └── index.vue
├── plugins
│ └── README.md
├── static
│ ├── README.md
│ └── favicon.ico
└── store
│ └── README.md
├── readme-images
├── front-end-domain-field.jpg
├── private-page-with-token.jpg
└── public-page.jpg
└── wp
├── .gitignore
├── .htaccess.example
├── wp-config-sample.php
└── wp-content
└── plugins
├── classic-editor
├── LICENSE.md
├── classic-editor.php
├── js
│ └── block-editor-plugin.js
└── readme.txt
├── headless-wp
└── headless-wp.php
└── jwt-authentication-for-wp-rest-api
├── LICENSE.txt
├── README.md
├── composer.json
├── composer.lock
├── includes
├── class-jwt-auth-i18n.php
├── class-jwt-auth-loader.php
├── class-jwt-auth.php
├── index.php
└── vendor
│ ├── autoload.php
│ ├── composer
│ ├── ClassLoader.php
│ ├── LICENSE
│ ├── autoload_classmap.php
│ ├── autoload_namespaces.php
│ ├── autoload_psr4.php
│ ├── autoload_real.php
│ ├── autoload_static.php
│ └── installed.json
│ └── firebase
│ └── php-jwt
│ ├── LICENSE
│ ├── README.md
│ ├── composer.json
│ └── src
│ ├── BeforeValidException.php
│ ├── ExpiredException.php
│ ├── JWT.php
│ └── SignatureInvalidException.php
├── index.php
├── jwt-auth.php
├── languages
└── jwt-auth.pot
├── public
├── class-jwt-auth-public.php
└── index.php
├── readme.txt
└── tests
└── GeneralTest.php
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # WP Headless Previews
2 | Architecture for a headless wordpress app that supports private content previewing (paired with Nuxt in this example).
3 |
4 | ## How it works
5 | By default, private content is invisible to the Wordpress REST API. Having the ability to preview content privately is important to content editors, and this system adds support for that feature.
6 |
7 | An additional permalink field is added so that Wordpress knows where to go for previews:
8 |
9 | 
10 |
11 | Once this is in place, post permalinks will point to the app's front end:
12 |
13 | 
14 |
15 | And if the page is set as private, a token will be appended to the url to allow for the page to be previewed (See the url shown at the bottom of the following image). The front end of the headless app can read this token and use it to fetch protected content. Private pages are not viewable without this.
16 |
17 |
18 | 
19 |
20 | ## Setup
21 |
22 | ### Wordpress
23 | The `wp` directory houses a Wordpress installation. There are 3 plugins included:
24 | 1. JWT Authentication for WP-API - This plugin provides authentication for the Wordpress rest API. It is available on the Wordpress plugin directory for free.
25 | 2. Headless WP - This is a small plugin that alters the Wordpress admin to connect with a decoupled front end like Nuxt.
26 | 3. Classic Editor - This is just a personal preference.
27 |
28 | Aside from those plugins, the Wordpress installation can be totally standard. Reference the example `.htaccess` and `wp-config.php` files - there are a few variables that must be provided for this system to work.
29 |
30 | ### Nuxt (Front Facing Part)
31 | Nuxt has been set to call Wordpress for content. See the example `.env` file - you'll need to specify the url of the Wordpress site there. To get a general sense of how this works look at the auth middleware file in nuxt - in this example I am using axios to make requests to the CMS and am using middleware to add a default header to each request (using the token originally received as a query string) and am altering the request to ask for posts with all status' - not just published posts.
32 |
--------------------------------------------------------------------------------
/nuxt/.env.example:
--------------------------------------------------------------------------------
1 | API_HOST=http://local.wp-headless-previews.com
2 |
--------------------------------------------------------------------------------
/nuxt/.gitignore:
--------------------------------------------------------------------------------
1 | # Created by .ignore support plugin (hsz.mobi)
2 | ### Node template
3 | # Logs
4 | logs
5 | *.log
6 | npm-debug.log*
7 | yarn-debug.log*
8 | yarn-error.log*
9 |
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 |
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 |
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 |
22 | # nyc test coverage
23 | .nyc_output
24 |
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 |
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 |
31 | # node-waf configuration
32 | .lock-wscript
33 |
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 |
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 |
41 | # TypeScript v1 declaration files
42 | typings/
43 |
44 | # Optional npm cache directory
45 | .npm
46 |
47 | # Optional eslint cache
48 | .eslintcache
49 |
50 | # Optional REPL history
51 | .node_repl_history
52 |
53 | # Output of 'npm pack'
54 | *.tgz
55 |
56 | # Yarn Integrity file
57 | .yarn-integrity
58 |
59 | # dotenv environment variables file
60 | .env
61 |
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 |
65 | # next.js build output
66 | .next
67 |
68 | # nuxt.js build output
69 | .nuxt
70 |
71 | # Nuxt generate
72 | dist
73 |
74 | # vuepress build output
75 | .vuepress/dist
76 |
77 | # Serverless directories
78 | .serverless
79 |
80 | # IDE / Editor
81 | .idea
82 | .editorconfig
83 |
84 | # Service worker
85 | sw.*
86 |
87 | # Mac OSX
88 | .DS_Store
89 |
90 | # Vim swap files
91 | *.swp
92 |
--------------------------------------------------------------------------------
/nuxt/README.md:
--------------------------------------------------------------------------------
1 | # wp-headless-previews
2 |
3 | > WP Nuxt Previews
4 |
5 | ## Build Setup
6 |
7 | ``` bash
8 | # install dependencies
9 | $ npm run install
10 |
11 | # serve with hot reload at localhost:3000
12 | $ npm run dev
13 |
14 | # build for production and launch server
15 | $ npm run build
16 | $ npm run start
17 |
18 | # generate static project
19 | $ npm run generate
20 | ```
21 |
22 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
23 |
--------------------------------------------------------------------------------
/nuxt/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 |
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 |
5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
6 |
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
8 |
--------------------------------------------------------------------------------
/nuxt/components/Logo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
80 |
--------------------------------------------------------------------------------
/nuxt/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 |
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 |
5 | The components directory contains your Vue.js Components.
6 |
7 | _Nuxt.js doesn't supercharge these components._
8 |
--------------------------------------------------------------------------------
/nuxt/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 |
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 |
5 | This directory contains your Application Layouts.
6 |
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
8 |
--------------------------------------------------------------------------------
/nuxt/layouts/default.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
56 |
--------------------------------------------------------------------------------
/nuxt/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 |
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 |
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 |
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 |
--------------------------------------------------------------------------------
/nuxt/middleware/auth.js:
--------------------------------------------------------------------------------
1 | export default function ({ $axios, route }) {
2 | if (!route.query || !route.query.preview_token) {
3 | return
4 | }
5 | let token = route.query.preview_token
6 | $axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
7 | if (!$axios.defaults.params) {
8 | $axios.defaults.params = {}
9 | }
10 | $axios.onRequest((config) => ({
11 | ...config,
12 | params: {
13 | status: [
14 | 'publish',
15 | 'future',
16 | 'draft',
17 | 'pending',
18 | 'private'
19 | ]
20 | }
21 | }))
22 | }
23 |
--------------------------------------------------------------------------------
/nuxt/nuxt.config.js:
--------------------------------------------------------------------------------
1 | require('dotenv').config()
2 |
3 | export default {
4 | mode: 'universal',
5 | /*
6 | ** Headers of the page
7 | */
8 | head: {
9 | title: process.env.npm_package_name || '',
10 | meta: [
11 | { charset: 'utf-8' },
12 | { name: 'viewport', content: 'width=device-width, initial-scale=1' },
13 | { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
14 | ],
15 | link: [
16 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
17 | ]
18 | },
19 | /*
20 | ** Customize the progress-bar color
21 | */
22 | loading: { color: '#fff' },
23 | /*
24 | ** Global CSS
25 | */
26 | css: [
27 | ],
28 | /*
29 | ** Plugins to load before mounting the App
30 | */
31 | plugins: [
32 | ],
33 | router: {
34 | middleware: [
35 | 'auth'
36 | ]
37 | },
38 | /*
39 | ** Nuxt.js dev-modules
40 | */
41 | buildModules: [
42 | ],
43 | /*
44 | ** Nuxt.js modules
45 | */
46 | modules: [
47 | '@nuxtjs/axios',
48 | ],
49 | /*
50 | ** Build configuration
51 | */
52 | build: {
53 | /*
54 | ** You can extend webpack config here
55 | */
56 | extend (config, ctx) {
57 | }
58 | },
59 | env: {
60 | API_HOST: process.env.API_HOST
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/nuxt/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "wp-headless-previews",
3 | "version": "1.0.0",
4 | "description": "WP Nuxt Previews",
5 | "author": "Braid",
6 | "private": true,
7 | "scripts": {
8 | "dev": "nuxt",
9 | "build": "nuxt build",
10 | "start": "nuxt start",
11 | "generate": "nuxt generate"
12 | },
13 | "dependencies": {
14 | "axios": "^0.19.0",
15 | "dotenv": "^8.1.0",
16 | "nuxt": "^2.0.0"
17 | },
18 | "devDependencies": {
19 | "@nuxtjs/axios": "^5.6.0"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/nuxt/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 |
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application.
5 |
6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).
7 |
--------------------------------------------------------------------------------
/nuxt/pages/_.vue:
--------------------------------------------------------------------------------
1 |
2 |