Attempt to create a Headless WordPress installation using Local and Atlas #82

bobbingwide · 2022-10-22T18:00:22Z

For the November Online WordPress Portsmouth Meetup I want someone to be able to talk fairly knowledgeably about Headless WordPress and to be able to demonstrate one or more actual installations.

There are multiple commercial solutions available for WordPress. One of those is Atlas by WPEngine. You can sign up to use Altas for free for 4 months. I believe you're expected to be able to use local to install a headless WordPress solution.

I've created this issue to record my progress.

It didn't start well.

My local installation doesn't appear to work.
I couldn't understand the terms of service.
I've no idea whether or not I'll be charged for a solution I'm not using in 4 months time
My attempts to install a headless solution in local failed
I also tried to Create app from https://my.wpengine.com/atlas#/ but that also failed the first time.

For each of the above I had no idea why I was doing what I was being asked to do.
So I was just hitting buttons in the vain hope that I might eventually understand something.

The previous section was written a couple of weeks ago. I've made a reasonable amount of progress.
I now have several installations in my local development environment(s) and one on my Atlas Sandbox.

bobbingwide · 2022-10-23T19:21:57Z

My local installation doesn't appear to work.
It does now. I managed to create an installation called Gatsby. WordPress and WP-CLI run with some Warnings.

WP-CLI: Warning: Version warning: Imagick was compiled against ImageMagick version 1799 but version 1808 is loaded. Imagick will run but may behave surprisingly in Unknown on line 0
WP-CLI: WP-CLI 2.6.0
Composer: Warning: Version warning: Imagick was compiled against ImageMagick version 1799 but version 1808 is loaded. Imagick will run but may behave surprisingly in Unknown on line 0
Composer: Warning: Version warning: Imagick was compiled against ImageMagick version 1799 but version 1808 is loaded. Imagick will run but may behave surprisingly in Unknown on line 0
Composer: Composer version 2.1.5 2021-07-23 10:35:47
PHP: Warning: Version warning: Imagick was compiled against ImageMagick version 1799 but version 1808 is loaded. Imagick will run but may behave surprisingly in Unknown on line 0
PHP: 7.4.1
MySQL: mysql  Ver 8.0.16 for Win64 on x86_64 (MySQL Community Server - GPL)
----
Loaded Shell for Local Site: gatsby

bobbingwide · 2022-10-23T19:47:48Z

I couldn't understand the terms of service.

I gave up trying to understand the second paragraph in the first clause. 1. Agreement a.

That agreement between us is comprised of these Terms of Service, the Order to which they are attached or by which they are referenced, the SLA, AUP, DPA, and Privacy Policy which are referenced herein, and any other terms, exhibits, schedules, or addenda which are referenced by any of the preceding (collectively the “Agreement”).

I know what an SLA is but not AUP or DPA. ... seems I need to read 13. Definitions

1 b. is just as bad as 1 a.

bobbingwide · 2022-10-23T19:48:27Z

I've no idea whether or not I'll be charged for a solution I'm not using in 4 months time

When time comes to cancel I'll have to visit https://my.wpengine.com/my_account/cancel
Do this after WP-Pompey, 16th Nov 2022

bobbingwide · 2022-10-23T19:57:20Z

My attempts to install a headless solution in local failed

But I did manage to create one called atlas-blueprint-blog
WP-admin: https://bpatlasblue201.wpengine.com/wp-admin/
front end: https://hd35phgxakkpod7dflh81yfya.js.wpenginepowered.com/

bobbingwide · 2022-10-25T10:36:50Z

I also tried to Create app from https://my.wpengine.com/atlas#/ but that also failed the first time.

The github repo I've set up is https://github.com/bobbingwide/atlas-blueprint-blog

I now have access to Atlas and have created a blueprint site. See above. I've received instructions from wpengine with a list of tutorials for Local/Atlas, Faust and WPGraphQL

WP Engine Logo Image

Hi Herb,

Now that you have access to Atlas, and have spun up an Atlas Blueprint, we would like to guide you on how you can customize and extend your project.

Below you will find a list of tutorials for the most popular tools in the Atlas ecosystem!

Local – local development platform for WordPress

Site:

Local
Atlas add-on for Local

Local/Atlas Tutorial:

Using the Atlas: Headless WP Add-on (written)
How to use the Atlas Headless WP Add-on in Local (video)

Faust.js – front-end framework for headless WordPress

Site:

Faust.js

Tutorial:

Faust.js Tutorial for PHP Developers (written)
Faust.js Tutorial Walk-Through (video)
Setting Up Post and Page Previews (written)

WPGraphQL – GraphQL API for WordPress

Site:

GraphQL API for WordPress (WPGraphQL)

Tutorial:

Intro to GraphQL (written)

Atlas Content Modeler – Custom post types and fields for headless WordPress

Site:

Atlas Content Modeler

Tutorial:

How to use Atlas Content Modeler (written)
ACM - Real App Walk-Through (video)
Faust.js & ACM - Interacting with Custom Post Types (written)

If you have a question, get stuck, or want to share what you've built, join us in the Headless WordPress Discord server.

bobbingwide · 2022-10-25T12:37:57Z

I've installed the Atlas addon to my instance of local
and created a new site called local-atlas, WordPress userid: atlas
Visit http://localhost:10011 and it's a basic install with Twenty Twenty Two

But I failed to select the Custom installation - which is needed to select the Atlas checkbox.

I deleted that install and tried again.
I got an Error then the install stopped.

Third attempt, after removing Imagick from my php.ini and rebooting,
progress showed it installing Faust.js then headless WordPress and then I got a message saying it was installed.
However...
Open site of http://localhost:10013/ gives This site can't be reached
and Front-end Node.js Status shows

> @faustjs/next-headless-getting-started@0.1.0 dev
> next dev -p $PORT

RangeError [ERR_SOCKET_BAD_PORT]: options.port should be >= 0 and < 65536. Received NaN.
    at validatePort (internal/validators.js:211:11)
    at Server.listen (net.js:1444:5)
    at C:\Users\herb\Local Sites\atlas-local\app-node\node_modules\next\dist\server\lib\start-server.js:55:16
    at new Promise (<anonymous>)
    at Object.startServer (C:\Users\herb\Local Sites\atlas-local\app-node\node_modules\next\dist\server\lib\start-server.js:22:12)
    at nextDev (C:\Users\herb\Local Sites\atlas-local\app-node\node_modules\next\dist\cli\next-dev.js:129:23)
    at C:\Users\herb\Local Sites\atlas-local\app-node\node_modules\next\dist\bin\next:147:44 {
  code: 'ERR_SOCKET_BAD_PORT'
}

Starting the shell the Imagick related messages are now different

Setting Local environment variables...

----
WP-CLI: Warning: PHP Startup: Unable to load dynamic library 'php_imagick.dll' (tried: C:/Users/herb/AppData/Local/Programs/Local/resources/extraResources/lightning-services/php-7.4.1+18/bin/win64/ext\php_imagick.dll (The specified module could not be found.), C:/Users/herb/AppData/Local/Programs/Local/resources/extraResources/lightning-services/php-7.4.1+18/bin/win64/ext\php_php_imagick.dll.dll (The specified module could not be found.)) in Unknown on line 0
WP-CLI: WP-CLI 2.6.0
Composer: Warning: PHP Startup: Unable to load dynamic library 'php_imagick.dll' (tried: C:/Users/herb/AppData/Local/Programs/Local/resources/extraResources/lightning-services/php-7.4.1+18/bin/win64/ext\php_imagick.dll (The specified module could not be found.), C:/Users/herb/AppData/Local/Programs/Local/resources/extraResources/lightning-services/php-7.4.1+18/bin/win64/ext\php_php_imagick.dll.dll (The specified module could not be found.)) in Unknown on line 0
Composer: Warning: PHP Startup: Unable to load dynamic library 'php_imagick.dll' (tried: C:/Users/herb/AppData/Local/Programs/Local/resources/extraResources/lightning-services/php-7.4.1+18/bin/win64/ext\php_imagick.dll (The specified module could not be found.), C:/Users/herb/AppData/Local/Programs/Local/resources/extraResources/lightning-services/php-7.4.1+18/bin/win64/ext\php_php_imagick.dll.dll (The specified module could not be found.)) in Unknown on line 0
Composer: Composer version 2.1.5 2021-07-23 10:35:47
PHP: Warning: PHP Startup: Unable to load dynamic library 'php_imagick.dll' (tried: C:/Users/herb/AppData/Local/Programs/Local/resources/extraResources/lightning-services/php-7.4.1+18/bin/win64/ext\php_imagick.dll (The specified module could not be found.), C:/Users/herb/AppData/Local/Programs/Local/resources/extraResources/lightning-services/php-7.4.1+18/bin/win64/ext\php_php_imagick.dll.dll (The specified module could not be found.)) in Unknown on line 0
PHP: 7.4.1
MySQL: mysql  Ver 8.0.16 for Win64 on x86_64 (MySQL Community Server - GPL)
----
Loaded Shell for Local Site: atlas local
----
C:\Users\herb\Local Sites\atlas-local\app\public>

I changed package.json to set the port number explicitely.

> @faustjs/next-headless-getting-started@0.1.0 dev
> next dev -p 10011

ready - started server on 0.0.0.0:10011, url: http://localhost:10011
info  - Loaded env from C:\Users\herb\Local Sites\atlas-local\app-node\.env.local
info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
info  - Using external babel configuration from C:\Users\herb\Local Sites\atlas-local\app-node\.babelrc
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\herb\Local Sites\atlas-local\app-node\src\client\schema.generated.ts as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\herb\Local Sites\atlas-local\app-node\src\client\schema.generated.ts as it exceeds the max of 500KB.
event - compiled client and server successfully in 11.6s (599 modules)
info  - Downloading WASM swc package...
info  - Using wasm build of next-swc
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

wait  - compiling / (client and server)...
event - compiled client and server successfully in 3.3s (688 modules)
wait  - compiling /[...pageUri] (client and server)...
event - compiled client and server successfully in 369 ms (691 modules)
wait  - compiling /404 (client and server)...
event - compiled client and server successfully in 244 ms (694 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 213 ms (695 modules)

I was then able to visit http://localhost:10011 but not wp-admin

I realised I'd set the port number to the value on the first install.
Tried again with 10013.

> @faustjs/next-headless-getting-started@0.1.0 dev
> next dev -p 10013

ready - started server on 0.0.0.0:10013, url: http://localhost:10013
info  - Loaded env from C:\Users\herb\Local Sites\atlas-local\app-node\.env.local
info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
event - compiled client and server successfully in 1923 ms (599 modules)
info  - Using wasm build of next-swc

bobbingwide · 2022-10-25T19:23:21Z

This worked. I then edited the first post Hello World and added two more.
If you scroll down the home page you can see these posts.

bobbingwide · 2022-10-26T19:43:51Z

Having got the front end to connect to the atlas local backend I then attempted to change it to connect to s.b/cwiccer.

I changed .env.local to

NEXT_PUBLIC_WORDPRESS_URL=https://s.b/cwiccer
FAUSTWP_SECRET_KEY=d5f2d0e7-2684-453c-b86c-e2788b9664a3

But this produced

[GQtyError: request to https://s.b/cwiccer/graphql failed, reason: unable to verify the first certificate] {
  type: 'system',
  errno: 'UNABLE_TO_VERIFY_LEAF_SIGNATURE',
  code: 'UNABLE_TO_VERIFY_LEAF_SIGNATURE'
}

I found this issue. nodejs/node#33705
Changing the URL to http: resolved the problem, as this doesn't involve security certificates.

The next problem was the fact that no blog posts were listed.
This was because the client requests blog posts with category uncategorized.
But in s.b/cwiccer, a UK English site, the slug for Uncategorised posts was uncategorised.
Changing the slug resolved the issue.
I was therefore able to get the headless front end to connect to a different instance of WordPress.

bobbingwide · 2022-10-26T20:09:01Z

Now I want to create my own front end for s.b/cwiccer, in c:\apache\htdocs\faust
This will contain the files for the front end for atlas local from C:\Users\herb\Local Sites\atlas-local\app-node
I reckon I can copy the files from app-node into faust.
Since the app-node folder is already a Git repo I assume it can be cloned.

cd \apache\htdocs
git clone C:\Users\herb\Local Sites\atlas-local\app-node faust
cd faust
copy C:\Users\herb\Local Sites\atlas-local\app-node\.env.local
npm install 
npm run dev

npm run dev

C:\apache\htdocs\faust>npm run dev

> @faustjs/next-headless-getting-started@0.1.0 dev C:\apache\htdocs\faust
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from C:\apache\htdocs\faust\.env.local
event - compiled client and server successfully in 8.5s (601 modules)

See https://github.com/wpengine/faustjs/tree/canary/examples/next/getting-started ?

bobbingwide · 2022-10-27T09:25:53Z

In oik-bwtrace, when we want to see the REST request we an access global $HTTP_RAW_POST_DATA.
The REST API populates this using

$HTTP_RAW_POST_DATA = file_get_contents( 'php://input' );

How does GraphQL obtain the data?
For a POST request the logic in Helper::partHttpRequest() has special logic to deal with $_SERVER['CONTENT_TYPE'].
When it's application/graphql or application/json then it will call the readRawBody() method while uses file_get_contents( 'php://input'). For application/json it calls json_decode() to set $bodyParams which it parseRequestParams().
In other cases the $bodyParams are set from $_POST.

When viewing the "clone-me" post the request's data was

rawBody

{"query":"query($id1:ID!$idType2:PostIdType$where3:RootQueryToMenuItemConnectionWhereArgs){generalSettings{__typename title description}post_18f38_0143b:post(id:$id1 idType:$idType2){__typename id title_b28e9_bf21a:title featuredImage{__typename node{__typename id sourceUrl_772ce_bf21a:sourceUrl}}content_b28e9_bf21a:content}menuItems_8d665_12a43:menuItems(where:$where3){__typename nodes{__typename id url label}}}","variables":{"id1":"clone-me","idType2":"SLUG","where3":{"location":"PRIMARY"}}}

which becomes the JSON array

{
    [query] => (string) "query($id1:ID!$idType2:PostIdType$where3:RootQueryToMenuItemConnectionWhereArgs){generalSettings{__typename title description}post_18f38_0143b:post(id:$id1 idType:$idType2){__typename id title_b28e9_bf21a:title featuredImage{__typename node{__typename id sourceUrl_772ce_bf21a:sourceUrl}}content_b28e9_bf21a:content}menuItems_8d665_12a43:menuItems(where:$where3){__typename nodes{__typename id url label}}}"
    [variables] => Array

        [id1] => (string) "clone-me"
        [idType2] => (string) "SLUG"
        [where3] => Array

            [location] => (string) "PRIMARY"

Not particularly easy to understand on first viewing.

bobbingwide · 2022-11-07T20:47:42Z

Having got the local installation in faust to connect to s.b/cwiccer I then tried with a clone of https://github.com/bobbingwide/atlas-blueprint-blog in atlas-blueprint-blog

I encountered a number of problems getting the system to build and connect successfully.

Several GQtyError messages

[GQtyError: Cannot query field "testimonials" on type "RootQuery".] {
  graphQLErrors: [
    {
      message: 'Cannot query field "testimonials" on type "RootQuery".',
      extensions: [Object],
      locations: [Array]
    }
  ]
}

No posts being returned for categoryName: uncategorized... even though I'd changed the slug for the faust installation
Images not being loaded to

error - FetchError: request to https://s.b/cwiccer/wp-content/uploads/2021/10/oik-libs-banner-772x250-1.png failed, reason: self signed certificate
    at ClientRequest.<anonymous> (C:\apache\htdocs\atlas-blueprint-blog\node_modules\next\dist\compiled\node-fetch\index.js:1:65756)
    at ClientRequest.emit (events.js:400:28)
    at TLSSocket.socketErrorListener (_http_client.js:475:9)
    at TLSSocket.emit (events.js:400:28)
    at emitErrorNT (internal/streams/destroy.js:106:8)
    at emitErrorCloseNT (internal/streams/destroy.js:74:3)
    at processTicksAndRejections (internal/process/task_queues.js:82:21) {
  type: 'system',
  errno: 'DEPTH_ZERO_SELF_SIGNED_CERT',
  code: 'DEPTH_ZERO_SELF_SIGNED_CERT'

which I resolved by adding this line in faust.config.js

process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";

but this causes this message in the log

event - compiled client and server successfully in 873 ms (894 modules)
(node:25468) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
(Use `node --trace-warnings ...` to show where the warning was created)

Parts of the page missing. eg The menu wasn't loaded.
Links to individual posts having the wrong URL. eg localhost:3000/chart which should have been localhost:3000/posts/chart
Various run time errors. eg Unhandled Runtime Error. ReferenceError: Chart is not defined
which is what I get when trying to display posts or pages with my Chart block.

bobbingwide · 2022-11-07T21:13:19Z

But I'm generally confused about the URLs and how the JS code constructs them.

content	URL
home page	http://localhost:3000/
single page	prefixed with `cwiccer` eg http://localhost:3000/cwiccer/contact-us
single post	prefixed with `posts` eg http://localhost:3000/posts/image-block-caption-link-clicking
category archive	prefixed with `category` eg http://localhost:3000/category/gutenberg

But at least something is working

and, amazingly, when I stopped the build for atlas-blueprint-blog and replaced it with the build for faust
the content in the browser was reloaded.

C:\apache\htdocs\atlas-blueprint-blog>cd ..\faust

C:\apache\htdocs\faust>npm run dev

> @faustjs/next-headless-getting-started@0.1.0 dev C:\apache\htdocs\faust
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from C:\apache\htdocs\faust\.env.local
event - compiled client and server successfully in 1902 ms (601 modules)
wait  - compiling /404 (client and server)...
event - compiled client and server successfully in 690 ms (686 modules)
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
wait  - compiling / (client and server)...
event - compiled client and server successfully in 480 ms (694 modules)
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
wait  - compiling /posts/[postSlug] (client and server)...
event - compiled client and server successfully in 429 ms (697 modules)
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works

so it looked like the first screen capture #82 (comment)

bobbingwide · 2022-12-31T13:53:27Z

Presentation and recording of Zoom meeting now published. See https://www.wp-pompey.org.uk/meetup/wordpress-portsmouth-online-meetup-16th-november-2022-headless-wordpress-101/

bobbingwide self-assigned this Oct 22, 2022

bobbingwide mentioned this issue Nov 8, 2022

Attempt to create multiple headless solutions for the same local site ( s.b/cwiccer -> now cwiccer.local) #89

Closed

bobbingwide closed this as completed Dec 31, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Attempt to create a Headless WordPress installation using Local and Atlas #82

Attempt to create a Headless WordPress installation using Local and Atlas #82

bobbingwide commented Oct 22, 2022 •

edited

Loading

bobbingwide commented Oct 23, 2022

bobbingwide commented Oct 23, 2022 •

edited

Loading

bobbingwide commented Oct 23, 2022 •

edited

Loading

bobbingwide commented Oct 23, 2022 •

edited

Loading

bobbingwide commented Oct 25, 2022 •

edited

Loading

bobbingwide commented Oct 25, 2022 •

edited

Loading

bobbingwide commented Oct 25, 2022

bobbingwide commented Oct 26, 2022 •

edited

Loading

bobbingwide commented Oct 26, 2022 •

edited

Loading

bobbingwide commented Oct 27, 2022 •

edited

Loading

bobbingwide commented Nov 7, 2022 •

edited

Loading

bobbingwide commented Nov 7, 2022

bobbingwide commented Dec 31, 2022

Attempt to create a Headless WordPress installation using Local and Atlas #82

Attempt to create a Headless WordPress installation using Local and Atlas #82

Comments

bobbingwide commented Oct 22, 2022 • edited Loading

bobbingwide commented Oct 23, 2022

bobbingwide commented Oct 23, 2022 • edited Loading

bobbingwide commented Oct 23, 2022 • edited Loading

bobbingwide commented Oct 23, 2022 • edited Loading

bobbingwide commented Oct 25, 2022 • edited Loading

bobbingwide commented Oct 25, 2022 • edited Loading

bobbingwide commented Oct 25, 2022

bobbingwide commented Oct 26, 2022 • edited Loading

bobbingwide commented Oct 26, 2022 • edited Loading

bobbingwide commented Oct 27, 2022 • edited Loading

bobbingwide commented Nov 7, 2022 • edited Loading

bobbingwide commented Nov 7, 2022

bobbingwide commented Dec 31, 2022

bobbingwide commented Oct 22, 2022 •

edited

Loading

bobbingwide commented Oct 23, 2022 •

edited

Loading

bobbingwide commented Oct 23, 2022 •

edited

Loading

bobbingwide commented Oct 23, 2022 •

edited

Loading

bobbingwide commented Oct 25, 2022 •

edited

Loading

bobbingwide commented Oct 25, 2022 •

edited

Loading

bobbingwide commented Oct 26, 2022 •

edited

Loading

bobbingwide commented Oct 26, 2022 •

edited

Loading

bobbingwide commented Oct 27, 2022 •

edited

Loading

bobbingwide commented Nov 7, 2022 •

edited

Loading