All Projects β†’ imranhsayed β†’ headless-wp-starter

imranhsayed / headless-wp-starter

Licence: other
πŸŒ€ A starter demo for WordPress Headless CMS

Programming Languages

javascript
184084 projects - #8 most used programming language
PHP
23972 projects - #3 most used programming language
shell
77523 projects
HTML
75241 projects
CSS
56736 projects
Dockerfile
14818 projects
SCSS
7915 projects

Headless WP Starter

Installation :pointer:

  1. Install Docker
  2. git clone [email protected]:imranhsayed/headless-wp-starter.git
  3. cd headless-wp-starter
  4. docker-compose up -d
  5. Once install add this to your wp-config file ( define('JWT_AUTH_SECRET_KEY', '&BZd]N-ghz|hbH=%~a5z(mR=n%7#8-Iz@KoqtDhQ6(8h$og%-IbI#>N*Ts9Dg');` )

Demo :video-camera:

Backend ( WordPress Dashboard ): ( http://localhost:8080/wp-admin/ )

  • Start Docker for WordPress

docker-compose up -d wp-headless

username: nedstark
password: winteriscoming 

Front End: ( http://localhost:3000 )

  • Install packages and start the front and server

cd frontend && yarn && yarn start

  • Start Front end server

cd frontend yarn start

What it does:

  • Pulls the image from library/wordpress and downloads latest wordpress
  • Switches to 'Postlight Headless WordPress’ theme, deletes the default themes and default plugins

For wp-headless:

  • Installs and activates ACF, acf-to-wp-api, wordpress-importer, WP-REST-API V2 Menus, jwt-authentication-for-wp-rest-api, wp-graphql, wp-graphql-jwt-authentication, wp-migrate-db-pro, wp-migrate-db-pro-cli, wp-migrate-db-pro-media-files
  • sets up mysql, php unit test
  • Pulls the image from library/node, sets up up next js

For Frontend

The packages/plugins used:

1. wpapi npm package

  • An isomorphic client for the WordPress REST API, designed to work with WordPress 5.0 or later. It works both on the server or in the browser Once an instance is constructed, you can chain off of it to construct a specific request. (Think of it as a query-builder for WordPress!) They have an extensive API documentation

Create a Woocommerce REST API Key

  • WordPress Dashboard > WooCommerce > Settings > Advanced > REST API > Create an API Key

Credits

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].