{"id":26612,"date":"2017-04-27T18:24:13","date_gmt":"2017-04-27T18:24:13","guid":{"rendered":"https:\/\/jsforwp.dbemyj3z-liquidwebsites.com\/?p=26612"},"modified":"2017-04-30T13:08:14","modified_gmt":"2017-04-30T13:08:14","slug":"decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack","status":"publish","type":"post","link":"https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/","title":{"rendered":"Decoupled WordPress REST API Calls with Vanilla JavaScript, fetch and webpack"},"content":{"rendered":"<p>This video is an excerpt from the JavaScript for WordPress Master Course. \u00a0In this lesson we look at how to make decoupled HTTP calls to the WordPress REST API using native JavaScript and the fetch API along with webpack to handle polyfill imports.<\/p>\n<p><iframe loading=\"lazy\" title=\"Decoupled WordPress with Vanilla JavaScript and Fetch\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/XiiOBAP897M?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h2>To Setup<\/h2>\n<ul>\n<li>Download example files below<\/li>\n<li>Run npm install<\/li>\n<li>Update\u00a0apiRoot in src\/index.js to your own API enabled WP site<\/li>\n<li>Run npm start<\/li>\n<li>Open\u00a0https:\/\/localhost:9000 in browser<\/li>\n<\/ul>\n<h2>Resources<\/h2>\n<ul>\n<li><a href=\"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/03\/2.1.6-HTTP-Requests-Outside-WordPress.zip\">Example Files for fetch and JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/fetch.spec.whatwg.org\/\">fetch API<\/a> (<a href=\"https:\/\/github.com\/github\/fetch\">fetch polyfill<\/a>)<\/li>\n<\/ul>\n<h2>Learn More<\/h2>\n<p>Want to learn the\u00a0WordPress REST API and\u00a0JavaScript in more depth? \u00a0Reserve a seat\u00a0in the\u00a0<a href=\"https:\/\/javascriptforwp.com\/\">JavaScript for\u00a0WordPress Master<\/a> today!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This video is an excerpt from the JavaScript for WordPress Master Course. \u00a0In this lesson we look at how to make decoupled HTTP calls to the WordPress REST API using native JavaScript and the fetch API along with webpack to handle polyfill imports. To Setup Download example files below Run npm install Update\u00a0apiRoot in src\/index.js [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":26618,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","footnotes":""},"categories":[135],"tags":[],"class_list":["post-26612","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-free-videos"],"acf":[],"featured_image_urls":{"full":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",2798,1576,false],"thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM-150x150.png",150,150,true],"medium":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM-300x169.png",300,169,true],"medium_large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM-768x433.png",768,433,true],"large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM-1024x577.png",1024,577,true],"1536x1536":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",1536,865,false],"2048x2048":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",2048,1154,false],"course_icon":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",150,84,false],"course_banner":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",500,282,false],"latest-full-width":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",2000,1127,false],"latest-grid-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",600,338,false],"latest-grid-thumb-masonry":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",450,253,false],"latest-woo-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",600,338,false],"latest-nav-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",497,280,false],"latest-mega-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",235,132,false],"latest-fixed-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",65,37,false],"latest-hero":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",1500,845,false],"latest-single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",1300,732,false],"latest-hero-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",50,28,false],"latest-logo":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",400,225,false],"woocommerce_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM-300x300.png",300,300,true],"woocommerce_single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM-600x338.png",600,338,true],"woocommerce_gallery_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM-100x100.png",100,100,true]},"post_excerpt_stackable":"<p>This video is an excerpt from the JavaScript for WordPress Master Course. \u00a0In this lesson we look at how to make decoupled HTTP calls to the WordPress REST API using native JavaScript and the fetch API along with webpack to handle polyfill imports. To Setup Download example files below Run npm install Update\u00a0apiRoot in src\/index.js to your own API enabled WP site Run npm start Open\u00a0https:\/\/localhost:9000 in browser Resources Example Files for fetch and JavaScript fetch API (fetch polyfill) Learn More Want to learn the\u00a0WordPress REST API and\u00a0JavaScript in more depth? \u00a0Reserve a seat\u00a0in the\u00a0JavaScript for\u00a0WordPress Master today!<\/p>\n","category_list":"<a href=\"https:\/\/javascriptforwp.com\/category\/free-videos\/\" rel=\"category tag\">Free Videos<\/a>","author_info":{"name":"Zac Gordon","url":"https:\/\/javascriptforwp.com\/author\/zgordon\/"},"comments_num":"0 comments","featured_image_urls_v2":{"full":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",2798,1576,false],"thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM-150x150.png",150,150,true],"medium":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM-300x169.png",300,169,true],"medium_large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM-768x433.png",768,433,true],"large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM-1024x577.png",1024,577,true],"1536x1536":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",1536,865,false],"2048x2048":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",2048,1154,false],"course_icon":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",150,84,false],"course_banner":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",500,282,false],"latest-full-width":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",2000,1127,false],"latest-grid-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",600,338,false],"latest-grid-thumb-masonry":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",450,253,false],"latest-woo-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",600,338,false],"latest-nav-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",497,280,false],"latest-mega-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",235,132,false],"latest-fixed-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",65,37,false],"latest-hero":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",1500,845,false],"latest-single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",1300,732,false],"latest-hero-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",50,28,false],"latest-logo":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png",400,225,false],"woocommerce_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM-300x300.png",300,300,true],"woocommerce_single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM-600x338.png",600,338,true],"woocommerce_gallery_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM-100x100.png",100,100,true]},"post_excerpt_stackable_v2":"<p>This video is an excerpt from the JavaScript for WordPress Master Course. \u00a0In this lesson we look at how to make decoupled HTTP calls to the WordPress REST API using native JavaScript and the fetch API along with webpack to handle polyfill imports. To Setup Download example files below Run npm install Update\u00a0apiRoot in src\/index.js to your own API enabled WP site Run npm start Open\u00a0https:\/\/localhost:9000 in browser Resources Example Files for fetch and JavaScript fetch API (fetch polyfill) Learn More Want to learn the\u00a0WordPress REST API and\u00a0JavaScript in more depth? \u00a0Reserve a seat\u00a0in the\u00a0JavaScript for\u00a0WordPress Master today!<\/p>\n","category_list_v2":"<a href=\"https:\/\/javascriptforwp.com\/category\/free-videos\/\" rel=\"category tag\">Free Videos<\/a>","author_info_v2":{"name":"Zac Gordon","url":"https:\/\/javascriptforwp.com\/author\/zgordon\/"},"comments_num_v2":"0 comments","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Decoupled WordPress REST API Calls with Vanilla JavaScript, fetch and webpack - JavaScript for WordPress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Decoupled WordPress REST API Calls with Vanilla JavaScript, fetch and webpack - JavaScript for WordPress\" \/>\n<meta property=\"og:description\" content=\"This video is an excerpt from the JavaScript for WordPress Master Course. \u00a0In this lesson we look at how to make decoupled HTTP calls to the WordPress REST API using native JavaScript and the fetch API along with webpack to handle polyfill imports. To Setup Download example files below Run npm install Update\u00a0apiRoot in src\/index.js [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/\" \/>\n<meta property=\"og:site_name\" content=\"JavaScript for WordPress\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-27T18:24:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-04-30T13:08:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2798\" \/>\n\t<meta property=\"og:image:height\" content=\"1576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Zac Gordon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/zgordon\" \/>\n<meta name=\"twitter:site\" content=\"@zgordon\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zac Gordon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\\\/\"},\"author\":{\"name\":\"Zac Gordon\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/person\\\/76dfb19fbd859b4a17428b8b17767b25\"},\"headline\":\"Decoupled WordPress REST API Calls with Vanilla JavaScript, fetch and webpack\",\"datePublished\":\"2017-04-27T18:24:13+00:00\",\"dateModified\":\"2017-04-30T13:08:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\\\/\"},\"wordCount\":124,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/Screen-Shot-2017-04-27-at-2.25.15-PM.png\",\"articleSection\":[\"Free Videos\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/javascriptforwp.com\\\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\\\/\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\\\/\",\"name\":\"Decoupled WordPress REST API Calls with Vanilla JavaScript, fetch and webpack - JavaScript for WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/Screen-Shot-2017-04-27-at-2.25.15-PM.png\",\"datePublished\":\"2017-04-27T18:24:13+00:00\",\"dateModified\":\"2017-04-30T13:08:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/javascriptforwp.com\\\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\\\/#primaryimage\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/Screen-Shot-2017-04-27-at-2.25.15-PM.png\",\"contentUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/Screen-Shot-2017-04-27-at-2.25.15-PM.png\",\"width\":2798,\"height\":1576},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/javascriptforwp.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Decoupled WordPress REST API Calls with Vanilla JavaScript, fetch and webpack\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#website\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/\",\"name\":\"JavaScript for WordPress\",\"description\":\"Tutorials, Courses, Bootcamps and Conferences\",\"publisher\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/javascriptforwp.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\",\"name\":\"JavaScript for WordPress Master Course\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/wapuu-square.png\",\"contentUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/wapuu-square.png\",\"width\":200,\"height\":200,\"caption\":\"JavaScript for WordPress Master Course\"},\"image\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/zgordon\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/person\\\/76dfb19fbd859b4a17428b8b17767b25\",\"name\":\"Zac Gordon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g\",\"caption\":\"Zac Gordon\"},\"description\":\"Zac Gordon is a professional educator, with a current focus on JavaScript development with and alongside WordPress. Zac has years of experience teaching at high schools, colleges, bootcamps and online learning sites like Treehouse, Udemy and Frontend Masters.\",\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/zgordon\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/zgordon\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Decoupled WordPress REST API Calls with Vanilla JavaScript, fetch and webpack - JavaScript for WordPress","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/","og_locale":"en_US","og_type":"article","og_title":"Decoupled WordPress REST API Calls with Vanilla JavaScript, fetch and webpack - JavaScript for WordPress","og_description":"This video is an excerpt from the JavaScript for WordPress Master Course. \u00a0In this lesson we look at how to make decoupled HTTP calls to the WordPress REST API using native JavaScript and the fetch API along with webpack to handle polyfill imports. To Setup Download example files below Run npm install Update\u00a0apiRoot in src\/index.js [&hellip;]","og_url":"https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/","og_site_name":"JavaScript for WordPress","article_published_time":"2017-04-27T18:24:13+00:00","article_modified_time":"2017-04-30T13:08:14+00:00","og_image":[{"width":2798,"height":1576,"url":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png","type":"image\/png"}],"author":"Zac Gordon","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/zgordon","twitter_site":"@zgordon","twitter_misc":{"Written by":"Zac Gordon","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/#article","isPartOf":{"@id":"https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/"},"author":{"name":"Zac Gordon","@id":"https:\/\/javascriptforwp.com\/#\/schema\/person\/76dfb19fbd859b4a17428b8b17767b25"},"headline":"Decoupled WordPress REST API Calls with Vanilla JavaScript, fetch and webpack","datePublished":"2017-04-27T18:24:13+00:00","dateModified":"2017-04-30T13:08:14+00:00","mainEntityOfPage":{"@id":"https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/"},"wordCount":124,"commentCount":0,"publisher":{"@id":"https:\/\/javascriptforwp.com\/#organization"},"image":{"@id":"https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/#primaryimage"},"thumbnailUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png","articleSection":["Free Videos"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/","url":"https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/","name":"Decoupled WordPress REST API Calls with Vanilla JavaScript, fetch and webpack - JavaScript for WordPress","isPartOf":{"@id":"https:\/\/javascriptforwp.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/#primaryimage"},"image":{"@id":"https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/#primaryimage"},"thumbnailUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png","datePublished":"2017-04-27T18:24:13+00:00","dateModified":"2017-04-30T13:08:14+00:00","breadcrumb":{"@id":"https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/#primaryimage","url":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png","contentUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2017\/04\/Screen-Shot-2017-04-27-at-2.25.15-PM.png","width":2798,"height":1576},{"@type":"BreadcrumbList","@id":"https:\/\/javascriptforwp.com\/decoupled-wordpress-rest-api-calls-vanilla-javascript-fetch-webpack\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascriptforwp.com\/"},{"@type":"ListItem","position":2,"name":"Decoupled WordPress REST API Calls with Vanilla JavaScript, fetch and webpack"}]},{"@type":"WebSite","@id":"https:\/\/javascriptforwp.com\/#website","url":"https:\/\/javascriptforwp.com\/","name":"JavaScript for WordPress","description":"Tutorials, Courses, Bootcamps and Conferences","publisher":{"@id":"https:\/\/javascriptforwp.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/javascriptforwp.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/javascriptforwp.com\/#organization","name":"JavaScript for WordPress Master Course","url":"https:\/\/javascriptforwp.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/javascriptforwp.com\/#\/schema\/logo\/image\/","url":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2016\/03\/wapuu-square.png","contentUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2016\/03\/wapuu-square.png","width":200,"height":200,"caption":"JavaScript for WordPress Master Course"},"image":{"@id":"https:\/\/javascriptforwp.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/zgordon"]},{"@type":"Person","@id":"https:\/\/javascriptforwp.com\/#\/schema\/person\/76dfb19fbd859b4a17428b8b17767b25","name":"Zac Gordon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g","caption":"Zac Gordon"},"description":"Zac Gordon is a professional educator, with a current focus on JavaScript development with and alongside WordPress. Zac has years of experience teaching at high schools, colleges, bootcamps and online learning sites like Treehouse, Udemy and Frontend Masters.","sameAs":["https:\/\/twitter.com\/zgordon","https:\/\/x.com\/https:\/\/twitter.com\/zgordon"]}]}},"_links":{"self":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts\/26612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/comments?post=26612"}],"version-history":[{"count":0,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts\/26612\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/media\/26618"}],"wp:attachment":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/media?parent=26612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/categories?post=26612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/tags?post=26612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}