{"id":14954979,"url":"https://github.com/imranhsayed/react-with-wordpress","last_synced_at":"2025-04-07T11:11:41.025Z","repository":{"id":35859045,"uuid":"183912342","full_name":"imranhsayed/react-with-wordpress","owner":"imranhsayed","description":":fire: Example of react application to access WordPress REST API","archived":false,"fork":false,"pushed_at":"2023-02-28T16:12:21.000Z","size":46914,"stargazers_count":276,"open_issues_count":6,"forks_count":64,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-31T10:06:35.950Z","etag":null,"topics":["api","authentication","express","javascript","jwt-authentication","jwt-tokens","node","nodejs","posts","react","react-with-wordpress","react-wordpress","react-wordpress-template","react-wordpress-theme","react-wordpress-themes","reactjs","rest-api","wordpress","wordpress-development","wordpress-rest-api"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imranhsayed.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-28T13:32:44.000Z","updated_at":"2025-03-15T13:38:51.000Z","dependencies_parsed_at":"2024-09-21T22:01:03.425Z","dependency_job_id":"a1413d74-532c-4ca3-a31f-59cdae3b9530","html_url":"https://github.com/imranhsayed/react-with-wordpress","commit_stats":{"total_commits":120,"total_committers":4,"mean_commits":30.0,"dds":"0.33333333333333337","last_synced_commit":"36282df72aef5d668832502fe67945fe831bf887"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imranhsayed%2Freact-with-wordpress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imranhsayed%2Freact-with-wordpress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imranhsayed%2Freact-with-wordpress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imranhsayed%2Freact-with-wordpress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imranhsayed","download_url":"https://codeload.github.com/imranhsayed/react-with-wordpress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247640465,"owners_count":20971557,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","authentication","express","javascript","jwt-authentication","jwt-tokens","node","nodejs","posts","react","react-with-wordpress","react-wordpress","react-wordpress-template","react-wordpress-theme","react-wordpress-themes","reactjs","rest-api","wordpress","wordpress-development","wordpress-rest-api"],"created_at":"2024-09-24T13:10:19.804Z","updated_at":"2025-04-07T11:11:41.003Z","avatar_url":"https://github.com/imranhsayed.png","language":"JavaScript","readme":"# React with WordPress\n\n:fire: Example of react application with WordPress REST API\n\n******* PLEASE STAR MY REPO TO SUPPORT MY WORK 🙏 ******\n\nPlease follow me 🙏 on [twitter](https://twitter.com/imranhsayed)\n\n## Dashboard Demo\n\n![](demo-dashboard.gif)\n\n## Pagination :video_camera:\n![](pagination.gif)\n\n## Post Listings Demo :video_camera:\n\n![](render-posts.gif)\n\n## [Live Demo](https://react-with-wordpress.netlify.com/)\n\n## Features\n\n1. CRUD operation with WordPress REST API\n2. Authentication with JWT ( Login Logout )\n3. Accessing public and private routes \n4. Handing WordPress REST API custom end points.\n5. Creating Dashboard with React for CRUD operation.\n6. Pagination\n\n## Installation\n\n1. Clone this repo in `git clone https://github.com/imranhsayed/react-with-wordpress`\n\n2. `git checkout branchname`\n\n3. Run `npm install`\n\n## Add [REST API ENDPOINTS WordPress Plugin](https://github.com/imranhsayed/rest-api-endpoints)\n\n* Clone the [REST API ENDPOINTS](https://github.com/imranhsayed/rest-api-endpoints) plugin in your WordPress plugin directory.\n\n`git clone git@github.com:imranhsayed/rest-api-endpoints.git`\n\n## Configure\n\nAdd your wordPress siteUrl in `src/client-config.js`\n\n```ruby\nconst clientConfig = {\n\tsiteUrl: 'http://localhost:8888/wordpress'\n};\n\nexport default clientConfig;\n``` \n\n## Branches\n\n### 1. [login-with-jwt-wordpress-plugin](https://github.com/imranhsayed/react-with-wordpress/tree/login-with-jwt-wordpress-plugin)\n\n\u003e A React App where you can login using the endpoint provided by `JWT Authentication for WP-API` WordPress Plugin.\nSo you need to have this plugin installed on WordPress. The plugin's endpoint returns the user object and a jwt-token on success,\nwhich we can then store in localstorage and login the user on front React Application\n\n### Steps\n* You need to install and activate [JWT Authentication for WP REST API](https://wordpress.org/plugins/jwt-authentication-for-wp-rest-api/) plugin on you WordPress site\n* Then you need to configure it by adding these:\n\ni. Add the last three lines in your WordPress `.htaccess` file as shown:\n```ruby\n# BEGIN WordPress\n   \u003cIfModule mod_rewrite.c\u003e\n   RewriteEngine On\n   RewriteBase /wordpress/\n   RewriteRule ^index\\.php$ - [L]\n   RewriteCond %{REQUEST_FILENAME} !-f\n   RewriteCond %{REQUEST_FILENAME} !-d\n   RewriteRule . /wordpress/index.php [L]\n   \n   \n   RewriteCond %{HTTP:Authorization} ^(.*)\n   RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]\n   SetEnvIf Authorization \"(.*)\" HTTP_AUTHORIZATION=$1\n   \n   \u003c/IfModule\u003e\n```\nii. Add the following in your `wp-config.php` Wordpress file. You can choose your own secret key.\n\n```ruby\ndefine('JWT_AUTH_SECRET_KEY', '\u0026BZd]N-ghz|hbH`=%~a5z(`mR=n%7#8-Iz@KoqtDhQ6(8h$og%-IbI#\u003eN*T`s9Dg');\ndefine('JWT_AUTH_CORS_ENABLE', true);\n```\n\niii. Now you can make a request to `/wp-json/jwt-auth/v1/token` REST API provided by the plugin. You need to pass \nusername and password and it returns a user object and token . You can save the token in localstorage and send it in the headers\nof your protected route requests ( e.g. [Create Post](https://developer.wordpress.org/rest-api/reference/posts/#create-a-post) `/wp-json/wp/v2/posts` ) \n\niiv. So whenever you send a request to WordPress REST API for your protected routes, you send the token received in the headers of\nyour request\n```\n{\n\t'Accept': 'application/json',\n\t'Content-Type': 'application/json',\n\t'Authorization': `Bearer putTokenReceivedHere`\n}\n\n```\n\nThis repo also demonstrates how to create posts in React Application by sending request to protected endpoints ( passing the token in the header )\n\n### 2. [jwt-verify-with-node](https://github.com/imranhsayed/react-with-wordpress/tree/jwt-verify-with-node)  \n\n\u003e 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\nsent from front end( React ) and returns it as a response, which we then store in localstorage to login the user.\nThis token received by frond end, will be sent with all further request for protected routes, which will then be verified in node route\nusing `jwt.verify()`\nBesides generating the token, the end point in node also accesses the WordPress rest api to confirm the credentials and returns the user object\nor errors if any.\n\n\u003e It also has functionality to create post where we make a request from front end along with token( React ) to a node end point.\nThe node endpoint verifies the token and then makes a request to WordPress REST API endpoint to create the post and then returns the\nnew post id, or error if any.  \n\n## Commands\n\n1. Branch [master](https://github.com/imranhsayed/react-with-wordpress) and [build-app-for-heroku](https://github.com/imranhsayed/react-with-wordpress/tree/build-app-for-heroku)\n- `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\n\n2. Branch [jwt-verify-with-node](https://github.com/imranhsayed/react-with-wordpress/tree/jwt-verify-with-node) and\n[login-with-jwt-wordpress-plugin](https://github.com/imranhsayed/react-with-wordpress/tree/login-with-jwt-wordpress-plugin)\n\n- `dev` Runs webpack dev server for development ( in watch mode )\n\nCommon\n- `prod` Runs webpack in production mode\n\n## Free Courses\n\n[Codeytek](https://codeytek.com/)\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimranhsayed%2Freact-with-wordpress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimranhsayed%2Freact-with-wordpress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimranhsayed%2Freact-with-wordpress/lists"}