All Projects β†’ imranhsayed β†’ React With Wordpress

imranhsayed / React With Wordpress

πŸ”₯ Example of react application to access WordPress REST API

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React With Wordpress

Co Cart
πŸ›’ CoCart is a flexible, open-source solution to enabling the shopping cart via the REST API for WooCommerce.
Stars: ✭ 198 (+44.53%)
Mutual labels:  api, rest-api, wordpress, wordpress-development
Express Mongodb Rest Api Boilerplate
A boilerplate for Node.js apps / Rest API / Authentication from scratch - express, mongodb (mongoose).
Stars: ✭ 153 (+11.68%)
Mutual labels:  api, express, authentication, jwt-authentication
Rest Api Nodejs Mongodb
A boilerplate for REST API Development with Node.js, Express, and MongoDB
Stars: ✭ 672 (+390.51%)
Mutual labels:  api, rest-api, express, jwt-authentication
Node Express Mongoose Passport Jwt Rest Api Auth
Node, express, mongoose, passport and JWT REST API authentication example
Stars: ✭ 146 (+6.57%)
Mutual labels:  api, rest-api, express, jwt-authentication
Securing Restful Apis With Jwt
How to secure a Nodejs RESTful CRUD API using JSON web tokens?
Stars: ✭ 301 (+119.71%)
Mutual labels:  api, express, authentication
Express Graphql Mongodb Boilerplate
A boilerplate for Node.js apps / GraphQL-API / Authentication from scratch - express, graphql - (graphql compose), mongodb (mongoose).
Stars: ✭ 288 (+110.22%)
Mutual labels:  api, express, authentication
Awesome Wp Developer Tools
A collection of plugins, starter themes and tools to make WordPress development easier.
Stars: ✭ 388 (+183.21%)
Mutual labels:  rest-api, wordpress, wordpress-development
Node Express Mongodb Jwt Rest Api Skeleton
This is a basic API REST skeleton written on JavaScript using async/await. Great for building a starter web API for your front-end (Android, iOS, Vue, react, angular, or anything that can consume an API). Demo of frontend in VueJS here: https://github.com/davellanedam/vue-skeleton-mvp
Stars: ✭ 603 (+340.15%)
Mutual labels:  api, express, jwt-authentication
Headless Wp Starter
πŸ”ͺ WordPress + React Starter Kit: Spin up a WordPress-powered React app in one step
Stars: ✭ 4,144 (+2924.82%)
Mutual labels:  rest-api, wordpress, wordpress-development
Laravel Api Boilerplate
A Boilerplate Project For Laravel API's (NOT MAINTAINED)
Stars: ✭ 113 (-17.52%)
Mutual labels:  api, rest-api, jwt-authentication
Express Boilerplate
πŸš€ Starter project for a RESTful API in Node with Express & mongoose component-based
Stars: ✭ 9 (-93.43%)
Mutual labels:  rest-api, express, jwt-authentication
Wp Rest Api Cache
Enable caching for WordPress REST API and increase speed of your application
Stars: ✭ 239 (+74.45%)
Mutual labels:  api, rest-api, wordpress
Go Book Store Api
Go Sample project to understand Mysql CRUD operation with best practises Includes logging, JWT, Swagger and Transactions
Stars: ✭ 18 (-86.86%)
Mutual labels:  api, rest-api, jwt-authentication
Generator Expressjs Rest
Project template for an ExpressJS application
Stars: ✭ 41 (-70.07%)
Mutual labels:  api, rest-api, express
Woo Next
πŸš€ React WooCommerce theme, built with Next JS, Webpack, Babel, Node, Express, using GraphQL and Apollo Client
Stars: ✭ 342 (+149.64%)
Mutual labels:  rest-api, wordpress, express
Pop
Monorepo of the PoP project, including: a server-side component model in PHP, a GraphQL server, a GraphQL API plugin for WordPress, and a website builder
Stars: ✭ 160 (+16.79%)
Mutual labels:  api, rest-api, wordpress
Auth0 Express Api Samples
Auth0 Integration Samples for Node Express REST API Services
Stars: ✭ 68 (-50.36%)
Mutual labels:  api, express, authentication
Koa2 Api Scaffold
δΈ€δΈͺ基于Koa2ηš„θ½»ι‡ηΊ§RESTful API Serverθ„šζ‰‹ζžΆγ€‚
Stars: ✭ 694 (+406.57%)
Mutual labels:  api, rest-api, express
Acf To Rest Api
Exposes Advanced Custom Fields Endpoints in the WordPress REST API
Stars: ✭ 1,152 (+740.88%)
Mutual labels:  api, rest-api, wordpress
Laravel Woocommerce
WooCommerce Rest API for Laravel
Stars: ✭ 86 (-37.23%)
Mutual labels:  api, rest-api, wordpress

React with WordPress

πŸ”₯ Example of react application with WordPress REST API

******* PLEASE STAR MY REPO TO SUPPORT MY WORK πŸ™ ******

Please follow me πŸ™ on twitter

Dashboard Demo

Pagination πŸ“Ή

Post Listings Demo πŸ“Ή

Live Demo

Features

  1. CRUD operation with WordPress REST API
  2. Authentication with JWT ( Login Logout )
  3. Accessing public and private routes
  4. Handing WordPress REST API custom end points.
  5. Creating Dashboard with React for CRUD operation.
  6. Pagination

Installation

  1. Clone this repo in git clone https://github.com/imranhsayed/react-with-wordpress

  2. git checkout branchname

  3. Run npm install

Add REST API ENDPOINTS WordPress Plugin

git clone [email protected]:imranhsayed/rest-api-endpoints.git

Configure

Add your wordPress siteUrl in src/client-config.js

const clientConfig = {
	siteUrl: 'http://localhost:8888/wordpress'
};

export default clientConfig;

Branches

1. login-with-jwt-wordpress-plugin

A React App where you can login using the endpoint provided by JWT Authentication for WP-API WordPress Plugin. So you need to have this plugin installed on WordPress. The plugin's endpoint returns the user object and a jwt-token on success, which we can then store in localstorage and login the user on front React Application

Steps

i. Add the last three lines in your WordPress .htaccess file as shown:

# BEGIN WordPress
   <IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /wordpress/
   RewriteRule ^index\.php$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /wordpress/index.php [L]
   
   
   RewriteCond %{HTTP:Authorization} ^(.*)
   RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
   SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
   
   </IfModule>

ii. Add the following in your wp-config.php Wordpress file. You can choose your own secret key.

define('JWT_AUTH_SECRET_KEY', '&BZd]N-ghz|hbH`=%~a5z(`mR=n%7#);
define('JWT_AUTH_CORS_ENABLE', true);

iii. Now you can make a request to /wp-json/jwt-auth/v1/token REST API provided by the plugin. You need to pass username and password and it returns a user object and token . You can save the token in localstorage and send it in the headers of your protected route requests ( e.g. Create Post /wp-json/wp/v2/posts )

iiv. So whenever you send a request to WordPress REST API for your protected routes, you send the token received in the headers of your request

{
	'Accept': 'application/json',
	'Content-Type': 'application/json',
	'Authorization': `Bearer putTokenReceivedHere`
}

This repo also demonstrates how to create posts in React Application by sending request to protected endpoints ( passing the token in the header )

2. jwt-verify-with-node

A React(front end) + Node(back end) application. It uses jwt.sign() ( from jwtwebtoken npm package ) to generate a token using the username and password sent from front end( React ) and returns it as a response, which we then store in localstorage to login the user. This token received by frond end, will be sent with all further request for protected routes, which will then be verified in node route using jwt.verify() Besides generating the token, the end point in node also accesses the WordPress rest api to confirm the credentials and returns the user object or errors if any.

It also has functionality to create post where we make a request from front end along with token( React ) to a node end point. The node endpoint verifies the token and then makes a request to WordPress REST API endpoint to create the post and then returns the new post id, or error if any.

Commands

  1. Branch master and build-app-for-heroku
  • start Runs node server for development ( in watch mode ). The server.js sends all front end route request to index.html and then all front end route requests is handled by reach router
  1. Branch jwt-verify-with-node and login-with-jwt-wordpress-plugin
  • dev Runs webpack dev server for development ( in watch mode )

Common

  • prod Runs webpack in production mode

Free Courses

Codeytek

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