imranhsayed / nextjs-headless-wordpress Goto Github PK

Setup Eslint using WordPress eslint config.

Hello, I've been using this as a small boilerplate to build a website and I have noticed that some of the default settings on the Gutenberg stylesheets imported into the project from node-wordpress seem to override TailwindCSS classes used within the Gutenberg editor. Especially the top margin values. Do you have any recommended solution for prioritizing TailwindCSS over these styles?

The following plugin needs to be explored to add translation
https://github.com/valu-digital/wp-graphql-polylang

This is one of the issues when you go Headless with WordPress it got plugins like SNAP AutoPoster, that automatically post your new blog post to social media, which is great for marketing. But with Headless WordPress it would post a URL to the admin panel, so the plugins become useless, is there a way to set up some kind of automatic system to post social media updates for Next.js?

Another issue maybe is that those automatic posts need some kind of delay like the blog post may not exist yet on the Next.js site, so FB and Twitter wouldn't be able to get the meta preview data?

You can just ignore this, just listing some things I run into with going Headless WP!

I can't find any good info about deploying a Headless WP via Docker on DigitalOcean or anywhere else. Perhaps this is considered an easy task because we're using Docker (Docker newbie here)?

Just a few bullet points on how to deploy this amazing project so we can see our project in production would be greatly appreciated 🙏

Upgrade to next.js v10

Is your feature request related to a problem? Please describe.
During compose up Docker i got issue related with processor M1
When Docker working with mysql container i got an error:
ERROR: no matching manifest for linux/arm64/v8 in the manifest list entries

Describe the solution you'd like
In Readme should create section about ARM M1 issue or information about that

Describe alternatives you've considered
I changed the image in the file docker-compose.yml, that resolve my issue with M1.
image: mysql:8.0 -> image: mysql/mysql-server:8.0.23

Additional context
How i can help develop repo with that type issue ? Should create PR with expand readme or update file docker-compose.yml ?

Currently we need to use --allow-root to run wp command
We need to make default php user as www-data

• Automatically activate all plugins in composer.json file

Add readme about this behaviour under title #Project Structure

One of the things we lose while going HeadLess with WordPress is the RSS feed that is used by some 3rd party sites to get your blogs post to list. And also to pull the content of your site in a newsletter solution like MailChimp and so on.

It would be awesome if the RSS feed also included the feature image.

I found this tutorial to create with Next.js but maybe we can do better, also wonder who to auto rebuild the RSS feed whenever a new blog post is added, like Next.js not seems to have the same hooks as Gatsby.js

Sample code: https://dev.to/kendalmintcode/create-a-next-js-rss-feed-for-your-static-website-210p

Currently only backend is dockerized.
Docker has some limitations on port for mac and Windows however, if we can come up with some idea, dockerizing front-end would be better as well

We have already done some work in this branch.

Trying to fetch data from slug [...slug].js page but showing undefined.

slug page code here
import {GET_PAGES_URI} from '../queries/pages/get-pages';
import {isEmpty} from 'lodash';
import {GET_PAGE} from '../queries/pages/get-page';
import {useRouter} from 'next/router';
import client from '../apollo/client';
import Layout from '../components/layout';

const Page = ( {data} ) => {

console.log('data', data);

const router = useRouter();

// If the page is not yet generated, this will be displayed
// initially until getStaticProps() finishes running
if ( router.isFallback ) {
	return <div>Loading...</div>;
}

return (

	<>
	<Layout data={data}>
		{router?.query?.slug.join("/")}
	</Layout>
</>
	);

}

export default Page;

export async function getStaticProps( {params} ) {
const {data, loading, networkStatus} = await client.query( {
query: GET_PAGE,
variables: {
uri: params?.slug.join( '/' ),
},
} );

return {
	props: {
		data: {
			menus: {
					headerMenus: data?.headerMenus?.edges || [],
					footerMenus: data?.footerMenus?.edges || [],
			},
			page: data?.page ?? {},
			path: params?.slug.join("/"),
		}
	},
	revalidate: 1,
};

}

export async function getStaticPaths() {
const {data} = await client.query( {
query: GET_PAGES_URI
});

const pathsData = [];

data?.pages?.nodes && data?.pages?.nodes.map( page => {
	if ( ! isEmpty( page?.uri ) ) {
		const slugs = page?.uri?.split( '/' ).filter( pageSlug => pageSlug );
		pathsData.push( {params: {slug: slugs}} );
	}
} );

return {

	paths: pathsData,
	fallback: true
};

}

This package need to be explored and sitemap needs to be generated.
https://www.npmjs.com/package/nextjs-sitemap-generator

Add loadmore feature on blog page

• Deploy backend and frontend on Digital ocean
• Add the live url in README
• Add a couple more deployment options in README.

Add a diagram( image) in README showing the setup of backend and frontend and the flow of request from backend to frontend.

Hello Imranhsayed, thank you for the repo and lessons.

https://github.com/imranhsayed/nextjs-headless-wordpress/blob/main/frontend/src/components/seo/index.js

The fields have the following values:

metaRobotsNoindex, // index | noindex
metaRobotsNofollow, // follow | nofollow

So in the component, it should be

    noindex={metaRobotsNoindex === "noindex"}
    nofollow={metaRobotsNofollow === "nofollow"}

Packages should be installed by yarn

I am following your tutorial and trying to build a site with NextJS and Wordpress as backend. I have my Wordpress site setup else where, so I am using only your frontend folder, copied contents of this folder to my local project directory and changed settings to meet my needs.

When I try yarn dev, I get 500 status code from ApolloClient, following is what I see in VS Code terminal.

https://circlej.smr-sandbox.com/graphql
ApolloError: Response not successful: Received status code 500
at new ApolloError (C:\Babu\Learning\NextJs\CircleJ2\node_modules@apollo\client\errors\errors.cjs.js:31:28)
at C:\Babu\Learning\NextJs\CircleJ2\node_modules@apollo\client\core\core.cjs.js:1457:19
at C:\Babu\Learning\NextJs\CircleJ2\node_modules@apollo\client\utilities\utilities.cjs.js:936:69
at new Promise ()
at Object.error (C:\Babu\Learning\NextJs\CircleJ2\node_modules@apollo\client\utilities\utilities.cjs.js:936:21)
at notifySubscription (C:\Babu\Learning\NextJs\CircleJ2\node_modules\zen-observable\lib\Observable.js:140:18)
at onNotify (C:\Babu\Learning\NextJs\CircleJ2\node_modules\zen-observable\lib\Observable.js:179:3)
at SubscriptionObserver.error (C:\Babu\Learning\NextJs\CircleJ2\node_modules\zen-observable\lib\Observable.js:240:7)
at C:\Babu\Learning\NextJs\CircleJ2\node_modules@apollo\client\utilities\utilities.cjs.js:924:68
at Array.forEach () {
graphQLErrors: [],
networkError: Error [ServerError]: Response not successful: Received status code 500
at Object.throwServerError (C:\Babu\Learning\NextJs\CircleJ2\node_modules@apollo\client\link\utils\utils.cjs.js:45:17)
at C:\Babu\Learning\NextJs\CircleJ2\node_modules@apollo\client\link\http\http.cjs.js:31:19
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:93:5) {
response: Response {
size: 0,
timeout: 0,
[Symbol(Body internals)]: [Object],
[Symbol(Response internals)]: [Object]
},
statusCode: 500,
result: {
code: 'internal_server_error',
message: '

There has been a critical error on this website.

Learn more about debugging in WordPress.

There has been a critical error on this website.

Learn more about debugging in WordPress.

Then on a hunch I went ahead and typed https://circlej.smr-sandbox.com/graphql endpoint in the browser get an error, looks like wp-graphql-gutenberg-0.3.7 is having problems, have you seen this error?

Fatal error: Uncaught WPGraphQLGutenberg\Blocks\RegistryNotSourcedException: Client side block registry is missing. You need to open up gutenberg or load it from WPGraphQLGutenberg Admin page. in /home/customer/www/circlej.smr-sandbox.com/public_html/wp-content/plugins/wp-graphql-gutenberg-0.3.7/src/Blocks/Registry.php:41 Stack trace: #0 /home/customer/www/circlej.smr-sandbox.com/public_html/wp-content/plugins/wp-graphql-gutenberg-0.3.7/src/Schema/Types/BlockTypes.php(253): WPGraphQLGutenberg\Blocks\Registry::get_registry() #1 /home/customer/www/circlej.smr-sandbox.com/public_html/wp-includes/class-wp-hook.php(287): WPGraphQLGutenberg\Schema\Types\BlockTypes->WPGraphQLGutenberg\Schema\Types{closure}(Object(WPGraphQL\Registry\TypeRegistry)) #2 /home/customer/www/circlej.smr-sandbox.com/public_html/wp-includes/class-wp-hook.php(311): WP_Hook->apply_filters(NULL, Array) #3 /home/customer/www/circlej.smr-sandbox.com/public_html/wp-includes/plugin.php(484): WP_Hook->do_action(Array) #4 /home/customer/www/circlej.smr-sandbox.c in /home/customer/www/circlej.smr-sandbox.com/public_html/wp-content/plugins/wp-graphql-gutenberg-0.3.7/src/Blocks/Registry.php on line 41

Thanks for any help.

This is my header component --
`
import { isEmpty } from "lodash";
import Nav from "./Nav";

const Header = ({ headerMenus }) => {
// console.log(headerMenus); <- Here i get the menus
if (isEmpty(headerMenus)) {
return null;
}
return (
//<Header> // <Nav headerMenus = {headerMenus}/> // </Header>
);
};
export default Header;
`
when I send data through props to nav I am not getting any data in nav component please help here the code of Nav

`
const Nav = ({headerMenus}) =>{
// console.log(headerMenus); <~~ Not getting data here so i can't return anything through this

return;
};
export default Nav;
`

• Write a bash scripts that creates a .env file in the root of the front-end directory( take reference from .env-example about the required variables )
• Add the command to run this script as part of the frontend initial set up and it should prompt the user to enter the WordPress URL ( default should be http://localhost:8020, if it does not enter anything )
• The message should say that leave it blank for development.

Add information about this in README.

When I am fetching the data for footer, it comes withh the backend WP URL:

But when I visit the menu links, they have the frontend URL:

Here's my docker-compose.yml file:

`version: '3.9'

services:
composer:
image: composer
command: update
volumes:
- ./wordpress:/app

mysql:
image: mysql:8.0
volumes:
- mysql_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
volumes:
- ./mysql:/var/lib/mysql

phpmyadmin:
image: phpmyadmin/phpmyadmin
depends_on:
- mysql
environment:
PMA_HOST: mysql
PMA_PORT: 3306
PMA_ARBITRARY: 1
restart: always
ports:
- 8183:80

wordpress:
depends_on:
- mysql
- composer
image: wordpress:latest
ports:
- "8020:80"
restart: always
environment:
WORDPRESS_DB_HOST: mysql:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
WORDPRESS_DB_NAME: wordpress
volumes:
- ./wordpress:/var/www/html

volumes:
mysql_data: {} `

If I run docker-compose -f backend/docker-compose.yml up I get this:

ERROR: Version in "./backend/docker-compose.yml" is unsupported. You might be seeing this error because you're using the wrong Compose file version. Either specify a version of "2" (or "2.0") and place your service definitions under the services key, or omit the version key and place your service definitions at the root of the file to use version 1.
For more on the Compose file format versions, see https://docs.docker.com/compose/compose-file/

My docker compse ver is::
Docker version 18.09.7, build 2d0083d

User runs some commmand
Its asks about

1. Do you want to use current Docker setup?
   If yes
   If No
   What is you WordPress backend URL?
   What is your frontend next js url ( defaults to http://localhost:3000 )
   What is your Disqus comments shortname ( leave blank if you are not using )
   // What action will the bash file perform
   // Step1 Its going create a .env file inside https://github.com/imranhsayed/nextjs-headless-wordpress/blob/master/frontend/ which will containe
   NEXT_PUBLIC_WORDPRESS_SITE_URL=http://localhost:8020
   NEXT_PUBLIC_NEXTJS_SITE_URL=http://localhost:3000
   NEXT_PUBLIC_DISQUS_SHORTNAME=xxxx
   // Step2 : Run this command
   docker-compose -f backend/docker-compose.yml up -d
   cd frontend; npm i && npm run dev

Hi, I've followed your great YouTube tutorials, and everything worked until video “7: getStaticProps Nextjs” where I get this error:

Server Error
GraphQLError: Syntax Error: Unexpected Name "headerMenus".

This error happened while generating the page. Any console logs will be displayed in the terminal window.

The issue is on on line 4 in get-menus.js (export const GET_MENUS = gql)

Here's my entire get-menus.js file:

import { gql } from "@apollo/client";
import MenuFragment from "./fragments/menus";

export const GET_MENUS = gql`

headerMenus: menuItems(where: {location: HCMS_MENU_HEADER, parentId: "0"}) {
  edges {
    node {
      ...MenuFragment
      childItems {
        edges {
          node {
            ...MenuFragment
          }
        }
      }
    }
  }
}
footerMenus: menuItems(where: {location: HCMS_MENU_FOOTER, parentId: "0"}) {
  edges {
    node {
      ...MenuFragment
    }
  }
  
  ${MenuFragment}
`;

There are a couple of people in the comments section on that video that have the same problem.

What am I doing wrong?

Is there a complete index with links for all videos in this course? I have only found partial indexes so far. It would really help if the README had a list of all the videos in the course together with links to the videos and to the documents referenced in each video.

Hi @imranhsayed ,
I created a Next JS project with wpgraqhl. I follow all your tutorials steps. I have faced one issues here details are given below -

1. page/[slug] -
   These files are created for dynamic WordPress pages. But I noticed that it creates single post for every posts aswell.
   So please look into this and provide better solution that how can we stop creating single post page from these files.

URL - https://raw.githubusercontent.com/imranhsayed/nextjs-headless-wordpress/main/frontend/pages/%5B...slug%5D.js

2. Pages/Blog/[slug].js -
   And same thing happen here, This files creating for dynamic posts single page. But it also created the dynamic pages as well.

URL - https://raw.githubusercontent.com/imranhsayed/nextjs-headless-wordpress/main/frontend/pages/blog/%5Bslug%5D.js

Current the docker file does not have the option for wp-cli, so we need to add that.

Add phpmyadmin

Yoast plugin does not get activated after installing it via composer.

Current docker file pull composer with PHP version 8 which conflicting with Wordpress SEO plugin.

I'm not able to access wordpress dashbord

Setup Stylelint

If anyone else getting this error:
'NODE_OPTIONS' is not recognized as an internal or external command, bla bla

Here is the solution:
1. Install the cross-env package ('npm i cross-env' or 'yarn add cross-env')
2. Replace the dev script in the package.json file with:
"dev": "cross-env NODE_OPTIONS='--inspect' next",

I am facing this problem, when i run the same query on the qraphiql, it works, but it gives out the GraphQLError: Syntax Error: Unexpected Name "headerMenus". error when I run it from the NextJS.
graph

setup phpcs

Questions from YouTube:
1.how to migrate to docker wordpress.
2.how to backup database and file WordPress in docker.
3.how to secure docker wordpress.
4.how to multiple using docker..

Add Headless CMS plugin via composer

I tried building this project today but npm install fails with a dependency issue:

Could not resolve dependency:
peer react@"^0.14 || ^15.0.0 || ^16.0.0-alpha" from [email protected]
node_modules/react-outside-click-handler/node_modules/airbnb-prop-types

This appears to be due to this airbnb issue:

React 17 peer support #73

Any thoughts on the best way to resolve this. Can you update the dependencies to reflect this