{"id":20771469,"url":"https://github.com/vertikajain/decoupled-drupal-react","last_synced_at":"2026-05-06T14:33:54.381Z","repository":{"id":164491830,"uuid":"353347563","full_name":"VertikaJain/decoupled-drupal-react","owner":"VertikaJain","description":"First experiment with Drupal! Fetching Content from Drupal database into React side frontend logic.","archived":false,"fork":false,"pushed_at":"2021-04-15T15:02:03.000Z","size":406,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-20T00:17:22.104Z","etag":null,"topics":["drupal","fetch-api","mamp","react"],"latest_commit_sha":null,"homepage":"","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/VertikaJain.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}},"created_at":"2021-03-31T12:23:58.000Z","updated_at":"2021-04-21T07:33:15.000Z","dependencies_parsed_at":"2024-01-14T09:23:55.485Z","dependency_job_id":null,"html_url":"https://github.com/VertikaJain/decoupled-drupal-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/VertikaJain/decoupled-drupal-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VertikaJain%2Fdecoupled-drupal-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VertikaJain%2Fdecoupled-drupal-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VertikaJain%2Fdecoupled-drupal-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VertikaJain%2Fdecoupled-drupal-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VertikaJain","download_url":"https://codeload.github.com/VertikaJain/decoupled-drupal-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VertikaJain%2Fdecoupled-drupal-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32698234,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-06T08:33:17.875Z","status":"ssl_error","status_checked_at":"2026-05-06T08:33:17.221Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["drupal","fetch-api","mamp","react"],"created_at":"2024-11-17T12:15:07.521Z","updated_at":"2026-05-06T14:33:54.343Z","avatar_url":"https://github.com/VertikaJain.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Decoupled Drupal\n\n## Technology Stack\n1. Drupal - Backend\n2. ReactJS - Frontend\n3. MAMP tool - server setup\n\n## Decoupled Drupal Project Diagram\n![Decoupled Drupal Project Diagram](/public/images/decoupled_drupal.png)\n\n## Drupal Setup\n1. Downloaded and install **drupal 9** and **MAMP**\n2. copy drupal files to Applications-\u003eMAMP-\u003ehtdocs\n3. change file name in drupal-\u003esites-\u003edefault-\u003edefault.services.yml to services.yml\n4. enable cors.config by setting it to true and ensure these values- \n    ```\n    cors.config:\n    enabled: true\n    # Specify allowed headers, like 'x-allowed-header'.\n    allowedHeaders: []\n    # Specify allowed request methods, specify ['*'] to allow all possible ones.\n    allowedMethods: ['*']\n    # Configure requests allowed from specific origins.\n    allowedOrigins: ['*']\n    # Sets the Access-Control-Expose-Headers header.\n    exposedHeaders: false\n    # Sets the Access-Control-Max-Age header.\n    maxAge: false\n    # Sets the Access-Control-Allow-Credentials header.\n    supportsCredentials: false\n    ```\n5. in case of permission issue, make sure that read/write operations are enabled\n6. open MAMP server and select web server as APACHE and put Name as `localhost`\n7. start MAMP server and open url - http://localhost:8888/ to check if the server is up and running\n\n## Drupal login/site settings\n1. login as required username (usually admin)\n2. go to configuration-\u003ebasic site settings and create/edit your site details there\n\n## Drupal Extension settings\n1. go to extend and enable extensions - **Serialization**, **RESTful Web Services**, **JSON:API** \n2. also add CORS UI extension by downloading it from https://www.drupal.org/project/cors_ui \n3. In extensions section click on Install new module and enter the url https://ftp.drupal.org/files/projects/cors_ui-8.x-1.0.tar.gz and click Install\n4. go to configuration -\u003e **CORS Configuration** in Web services section and Select box **Enable CORS** and save settings\n\n## Drupal Content settings\n1. go to structure-\u003econtent type-\u003eclick on **Add Content Type** then create Products content type\n2. click on **Save and Manage fields**, then create the required fields and save them\n3. go back to home page and click on **Add Content** for adding data to the fields specified in the previous step\n\n## Drupal View settings\n1. go to structure-\u003eViews-\u003e click on **Add View** \n2. Provide a View name as required and check on **Provide a REST Export**\n3. After saving, go to the View that you created just now and **Add fields** to display in the JSON output\n4. you can alter the JSON output by using the **Rewrite Results** options for each field\n5. Click on **Apply** and later **Save** the changes to preview the JSON output\n6. You need to provide a path (url of your choice) in **Path settings** \n7. then change Access restrictions to **Unrestricted** and Save it\n8. Lastly, you can go to the URL path that you specified and view your data in JSON format that you added in Content settings\n\n## React setup\n1. in a separate folder create a new react application using command `npx create-react-app react-ecommerce`\n2. create a component `Products` in src folder\n3. use the URL created in drupal to display the data on frontend using **fetch()** and **json()**\n4. create another component `Product` to display each product by passing it as props in a loop\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvertikajain%2Fdecoupled-drupal-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvertikajain%2Fdecoupled-drupal-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvertikajain%2Fdecoupled-drupal-react/lists"}