{"id":6278,"date":"2020-05-14T20:57:39","date_gmt":"2020-05-14T20:57:39","guid":{"rendered":"https:\/\/max-drake.cc\/?p=6278"},"modified":"2020-05-14T20:57:42","modified_gmt":"2020-05-14T20:57:42","slug":"react-recipe-app-with-api-connection-deployed-on-firebase","status":"publish","type":"post","link":"https:\/\/max-drake.cc\/?p=6278","title":{"rendered":"React Recipe App with API connection deployed on Firebase"},"content":{"rendered":"\n<p>This guys vids are pretty cool.  After my last failure ot get a pre-built app to Deploy on Heroku I decided to start from scratch and do a tutorial on building a React App from Scratch, and i followed the tutorial below: <\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Build a Recipe App With React | React Tutorial For Beginners\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/U9T6YkEDkMo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>I started at about 3.30am in bed using the Surface 3. It didn&#8217;t have node.js loaded (to use npm to install react app) so I had to try and install the .msi file, which wouldn&#8217;t install, so I had to install from Zip and then add node directory to the pc system path. As that was ticking along I used VS Code to start writing the code in some files. I then ran npm install create-react-app and it did that but I couldn&#8217;t find the App.js boilerplate file (its in SRC folder) so I tried installing and deleting the folder a couple of times before realising that the App.js was installed. I then ran <\/p>\n\n\n\n<p><strong><span style=\"color:#cf2e2e\" class=\"color\">npx create-react-app my-app<\/span><\/strong>   (<em>where my-app is the folder it will create to install all the files into<\/em>)<\/p>\n\n\n\n<p>Anyway, I finally gor the files as Iwanted in the src directory and copied across the code to the App.js file and the Recipe.js file. <\/p>\n\n\n\n<p>There was a problem with every time I saved the jsx infor reformatted so the &lt;div&gt; would end up with the beginning arrow on the line above, so wouldn&#8217;t work.  After searching around I found that this is VS Code setting the coding language to vanilla<strong><span style=\"color:#cf2e2e\" class=\"color\"> JavaScript<\/span> <\/strong>(see image below) and you have to re-set it to <strong><span style=\"color:#cf2e2e\" class=\"color\">JavaScript React<\/span><\/strong>. After that reset it accepted JSX formatting correctly.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"525\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-11_59_21-Add-New-Post-\u2039-Vast-\u2014-WordPress-1024x525.jpg\" alt=\"\" class=\"wp-image-6279 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-11_59_21-Add-New-Post-\u2039-Vast-\u2014-WordPress-1024x525.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-11_59_21-Add-New-Post-\u2039-Vast-\u2014-WordPress-300x154.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-11_59_21-Add-New-Post-\u2039-Vast-\u2014-WordPress-768x394.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-11_59_21-Add-New-Post-\u2039-Vast-\u2014-WordPress-50x26.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-11_59_21-Add-New-Post-\u2039-Vast-\u2014-WordPress-98x50.jpg 98w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-11_59_21-Add-New-Post-\u2039-Vast-\u2014-WordPress-100x51.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-11_59_21-Add-New-Post-\u2039-Vast-\u2014-WordPress-195x100.jpg 195w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-11_59_21-Add-New-Post-\u2039-Vast-\u2014-WordPress-640x328.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-11_59_21-Add-New-Post-\u2039-Vast-\u2014-WordPress.jpg 1190w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/525;\" \/><\/figure>\n\n\n\n<p>I then coded the tutorial and de-bugged it. I was stuck with an error for ages. In the mapping using the <strong>&#8220;props&#8221;?<\/strong>  <strong> &lt;Recipe \/&gt;<\/strong> it kept on saying there was an error in the code below: <em><span style=\"color:#cf2e2e\" class=\"color\">Expected an assignment or function call and instead saw an expression no-unused-expressions<\/span><\/em><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    {recipes.map((recipe) => {\n          &lt;Recipe \/><\/code><\/pre>\n\n\n\n<p>I finally found a <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/stackoverflow.com\/questions\/53013437\/expected-assignment-or-function-call-no-unused-expressions-reactjs\" target=\"_blank\">StackOverflow article<\/a><\/strong> where you need to add return to the props then it works. That took me ages to de-bug. As below works:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  {recipes.map((recipe) => {          \nreturn (  &lt;Recipe \/><\/code><\/pre>\n\n\n\n<p>I then had some issues with wrongly naming files, but the above issue was the main cause of me renaming them in the foirst place. Hours and hours later, the code is running.  I&#8217;ve added a couple of items such as number of servings and the website url where the recipe came from. A rather protracted process, but a running app. I&#8217;ve now pushed it to github. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"646\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-12_11_01-React-App-1024x646.jpg\" alt=\"\" class=\"wp-image-6280 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-12_11_01-React-App-1024x646.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-12_11_01-React-App-300x189.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-12_11_01-React-App-768x484.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-12_11_01-React-App-1536x969.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-12_11_01-React-App-50x32.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-12_11_01-React-App-79x50.jpg 79w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-12_11_01-React-App-100x63.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-12_11_01-React-App-159x100.jpg 159w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-12_11_01-React-App-1015x640.jpg 1015w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-12_11_01-React-App-640x404.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-12_11_01-React-App-1217x768.jpg 1217w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-12_11_01-React-App-1712x1080.jpg 1712w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-12_11_01-React-App-1920x1211.jpg 1920w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-12_11_01-React-App-200x125.jpg 200w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-12_11_01-React-App-scaled.jpg 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/646;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">End comment on App<\/h4>\n\n\n\n<p>Colours are awful, but its up and running. This is only a front end app, which is fine, but what it means is that the API call is from the client side, so it has to wait to be served the data. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>If there was a backend, the data could be pulled up at intervals (<em>actually for a search app such as this a backend would not help at all as you are deciding what you want, then making the call<\/em>). I do need to learn about back-end data requestes to API&#8217;s<\/li><li>I couldn&#8217;t get the URL to be an active link.<\/li><li>It is pulling information through but I&#8217;d like to give the stream of data some information such as &#8220;Ingredients, Calories, Serving Number.<\/li><li>Data coming through is a bit unclear and needs more explanation. A further exercise if I can deploy it. <\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Try &amp; deploy this app on Heroku- NO GO<\/h4>\n\n\n\n<p>Now I have the app running, I&#8217;ll see if I can deploy it.  My first attempt will be to push it to Heroku. <\/p>\n\n\n\n<p>I tried to upload app to site but I just get the screen of death:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"606\" height=\"325\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-14_08_52-Application-Error.jpg\" alt=\"\" class=\"wp-image-6281 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-14_08_52-Application-Error.jpg 606w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-14_08_52-Application-Error-300x161.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-14_08_52-Application-Error-50x27.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-14_08_52-Application-Error-93x50.jpg 93w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-14_08_52-Application-Error-100x54.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-14_08_52-Application-Error-186x100.jpg 186w\" data-sizes=\"(max-width: 606px) 100vw, 606px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 606px; --smush-placeholder-aspect-ratio: 606\/325;\" \/><\/figure>\n\n\n\n<p>I fluffed around a bit looking at settings and on the web to try and figure out why it wasn&#8217;t doing it, I looked at ports and other stuff, no joy. I also pulled it directly from my Github Repo. No joy. <\/p>\n\n\n\n<p>Then I created a brand new  create-react-app and tried to load that up and that didn&#8217;t work either, so I thought &#8220;Stuff it&#8221;.  So I went to Firebase: <\/p>\n\n\n\n<h4 class=\"has-vivid-red-color has-text-color wp-block-heading\">Deploy to Firebase SUCCESS<\/h4>\n\n\n\n<p>I&#8217;d watched this video before and so I followed it and it worked exactly like he shows on the video, no problems at all, you do need to load a Firebase CLI (which works) and i also have the Heroku CLI too. <\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Fast React Website Deployment With Firebase\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/IDHfvpsYShs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>So the first step is to sign up to Firebase , there is a free spark account.<\/li><li>Make a new project and give it a name.<\/li><li><strong><span style=\"color:#cf2e2e\" class=\"color\"> npm install firebase-tools -g<\/span><\/strong> from your terminal on PC- <em>You only need to do this once as its got the g tag so globally installed<\/em>. <\/li><li>go into project folder you wish to deploy: <strong><span style=\"color:#cf2e2e\" class=\"color\">&gt;firebase login<\/span><\/strong> this will pop up a web page for you to log in with your gmail account and you may have to give permissions forfirebase to footle around<\/li><li>Then in terminal in your project go <strong><span style=\"color:#cf2e2e\" class=\"color\">&gt;npm run build<\/span><\/strong>  this will create a compiled build folder on your PC.<\/li><li>next <strong>&gt; firebase init<\/strong> this will initialise firebase and it&#8217;ll ask you a few questions about what you want to do. In this instance, its web hosting an app , so arrow down to <strong>web hosting<\/strong>, then use <strong><span style=\"color:#cf2e2e\" class=\"color\">SPACEBAR<\/span>  <em>to SELECT OPTIONS<\/em> <\/strong><\/li><li>It then asks<span style=\"text-decoration: underline;\"> <span style=\"color:#313131\" class=\"color\"><span style=\"background-color:#fcb900\" class=\"background-color\"><em>what directory you want to use for hosting:(public<\/em>)<\/span><\/span><span style=\"color:#fcb900\" class=\"color\"> <\/span><\/span><strong><span style=\"color:#cf2e2e\" class=\"color\">build <\/span><\/strong>, we will choose build as we&#8217;ve just compiledit into that folder (<em>this is useful, as we know we&#8217;ve tested it on PC so compiling it we know the code is good<\/em>).<\/li><li><em><span style=\"background-color:#fcb900\" class=\"background-color\">configure as a single page app? (y\/N)<\/span><\/em> <strong><span style=\"color:#cf2e2e\" class=\"color\">y<\/span><\/strong><\/li><li><em><span style=\"text-decoration: underline;\"><span style=\"background-color:#fcb900\" class=\"background-color\">file build\/index.html already exists. overwrite? (y\/N)<\/span><\/span><\/em> <strong><span style=\"color:#cf2e2e\" class=\"color\">N<\/span><\/strong>   <em><span style=\"color:#abb8c3\" class=\"color\"> <\/span><span style=\"color:#0693e3\" class=\"color\">(this will use our one, else it&#8217;ll use a firebase template which we do not want )<\/span><\/em><\/li><li>You then have to go to Firebase to get your <strong><span style=\"color:#cf2e2e\" class=\"color\">project ID<\/span><\/strong> which you can get by going to specific project and pressing on settings COG. Copy the project ID (<em>you&#8217;ll paste it into the terminal in the next step<\/em>).<\/li><li>in terminal &gt; firebase use <strong><span style=\"color:#cf2e2e\" class=\"color\">recipeapp-53**4<\/span><\/strong>  (<em>the red text is the project ID in firebase<\/em>)<\/li><li>Now it knows where the firebase project is<strong><span style=\"color:#cf2e2e\" class=\"color\"> &gt;firebase deploy <\/span><\/strong>  (<em>it&#8217;ll load up files and deploy<\/em>). It takes a little while. <\/li><li>It then gives you a coupler of URL&#8217;s to link to, you can put a custom domain in, I may try that later. <\/li><\/ul>\n\n\n\n<p><strong><a rel=\"noreferrer noopener\" href=\"https:\/\/recipeapp-53817.web.app\/\" target=\"_blank\">Link<\/a><\/strong> to site : <strong><span style=\"color:#cf2e2e\" class=\"color\">https:\/\/recipeapp-53817.web.app\/<\/span><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"262\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-14_16_01-RecipeApp-\u2013-Firebase-console-1024x262.jpg\" alt=\"\" class=\"wp-image-6282 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-14_16_01-RecipeApp-\u2013-Firebase-console-1024x262.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-14_16_01-RecipeApp-\u2013-Firebase-console-300x77.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-14_16_01-RecipeApp-\u2013-Firebase-console-768x196.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-14_16_01-RecipeApp-\u2013-Firebase-console-50x13.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-14_16_01-RecipeApp-\u2013-Firebase-console-196x50.jpg 196w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-14_16_01-RecipeApp-\u2013-Firebase-console-100x26.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-14_16_01-RecipeApp-\u2013-Firebase-console-391x100.jpg 391w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-14_16_01-RecipeApp-\u2013-Firebase-console-640x164.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-14_16_01-RecipeApp-\u2013-Firebase-console.jpg 1537w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/262;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">End comment <\/h3>\n\n\n\n<p>The Heroku deployment was frustrating, the Firebase one pretty simple. I&#8217;ll definitely use that again. I think I still have some free credit\/space in the account to use. <\/p>\n\n\n\n<p>So, I have now deployed a node.js app (<strong><a rel=\"noreferrer noopener\" href=\"https:\/\/self-app-locate.herokuapp.com\/\" target=\"_blank\">data-selfie-app<\/a><\/strong>) to Heroku and now the <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/recipeapp-53817.web.app\/\" target=\"_blank\">recipe React app<\/a><\/strong> to Firebase. <\/p>\n\n\n\n<p>My next goal is a MERN (Mongo, Express, React &amp; Node) app deployment. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>This guys vids are pretty cool. After my last failure ot get a pre-built app to Deploy on Heroku I decided to start from scratch and do a tutorial on building a React App from Scratch, and i followed the tutorial below: I started at about 3.30am in bed using the Surface 3. It didn&#8217;t [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6280,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,41,446,29],"tags":[],"class_list":["post-6278","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-api_json","category-aws-gc-az-free-tier","category-react_js","category-web"],"featured_image_src":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-12_11_01-React-App-scaled.jpg","featured_image_src_square":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-15-12_11_01-React-App-scaled.jpg","author_info":{"display_name":"Max Drake","author_link":"https:\/\/max-drake.cc\/?author=1"},"_links":{"self":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6278"}],"version-history":[{"count":0,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6278\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/media\/6280"}],"wp:attachment":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}