{"id":1938,"date":"2019-05-07T11:42:55","date_gmt":"2019-05-07T11:42:55","guid":{"rendered":"https:\/\/www.folio3.com\/mobile\/?p=1938"},"modified":"2020-03-26T17:46:52","modified_gmt":"2020-03-26T17:46:52","slug":"using-less-in-react-without-ejecting","status":"publish","type":"post","link":"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/","title":{"rendered":"Using LESS in React without Ejecting"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/07\/folio3-enterprise-blog-React.png\" alt=\"Using LESS in React without Ejecting - Enterprise Blog folio3\"\/><\/figure><\/div>\n\n\n\n<p>I recently came across a problem while configuring my React application to use LESS styling. The misleading information on the web made the solution a bit tricky. So, after finding the appropriate solution, I decided to write this article.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Some background<\/h1>\n\n\n\n<p>CSS has always been an essential part of the Web. It brings order and color to the dull world of HTML. However, writing CSS can get very repetitive and little tasks such as having to look up hex color values, closing your tags, etc. can become time-consuming. To counter these problems, the CSS community developed CSS Preprocessors. With a CSS preprocessor you can:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Write cleaner CSS with more reusability<\/li><li>Structure your CSS so that it is easier to understand<\/li><li>Save time<\/li><li>Easy code maintenance with snippets and libraries<\/li><li>Write simple logics\/calculations within your CSS<\/li><\/ul>\n\n\n\n<p>As an example take a look at the following LESS snippets<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ variables\n@width: 10px;\n@height: @width + 10px;\n\n\/\/ code structure\n#header {\n  color: black;\n  .navigation {\n    font-size: 12px;\n  }\n  .logo {\n    width: @width;\n    height: @height;\n  }\n}\n\n\/\/ Mix-ins (reusability)\n.bordered {\n  border-top: dotted 1px black;\n  border-bottom: solid 2px black;\n}\n#menu a {\n  color: #111;\n  .bordered();\n}\n.post a {\n  color: red;\n  .bordered();\n}\n<\/pre>\n\n\n\n<p>You can find more examples <a href=\"http:\/\/lesscss.org\/#variables\">HERE<\/a>.<\/p>\n\n\n\n<p>There are a number of CSS preprocessors in the market but most used are these<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/sass-lang.com\/\">Sass<\/a><\/li><li><a href=\"http:\/\/lesscss.org\/\">Less<\/a><\/li><li><a href=\"http:\/\/stylus-lang.com\/\">Stylus<\/a><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/07\/folio3-enterprise-blog-React2.png\" alt=\"Using LESS in React without Ejecting - Enterprise Blog folio3\"\/><\/figure><\/div>\n\n\n\n<p>Since LESS and SASS are not actually CSS, a browser cannot understand them. They need to be compiled to CSS before being served. In context of React, this is fine for production as compiling your LESS one time before production is not a problem. But in the development environment, where you make changes frequently, this can really get tedious and boring. Therefore, our problem comes down to avoiding\/automating the compilation process each time we change our LESS\/SASS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The solution<\/h3>\n\n\n\n<p>Mostly React developers use \u2018create-react-app\u2019, a utility from Facebook, for setting up their react environment. With react-scripts@2.0.0 and higher, React provides out of the box support for SASS.<\/p>\n\n\n\n<p>To use SASS with your React application, all you have to do is add SASS dependencies<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\"dependencies\": {\n   \"node-sass\": \"^4.11.0\"\n }\n<\/pre>\n\n\n\n<p>Then you can import your SASS stylesheet like this<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">@import 'stylesheet.scss'\n<\/pre>\n\n\n\n<p>However, there is no such solution for LESS, at the moment. So In this article we will focus on creating a solution for LESS. Actually, it\u2019s better to call this a work-around instead, as it has some negative aspects, like having to import your LESS file (say \u201cstyle.less\u201d) like \u201cstyle.css\u201d.<\/p>\n\n\n\n<p>To solve this problem, we will set up a LESS-CSS compiler to compile a LESS each time we make changes to the stylesheet and put the compiled CSS file into the exact same directory so that the user can use the compiled CSS file instead by just changing the extension from LESS to CSS while importing the stylesheet. Configuring webpack to do this is a headache as we have to \u201ceject\u201d before being able to make any configuration changes to the webpack. Ejection is an irreversible process that\u2019s why developers avoid it. So we will not use this solution.<\/p>\n\n\n\n<p>As a workaround, we can use a utility called less-watch-compiler. It can watch for LESS files in a source directory and compile them to CSS placing the output files into an output directory.<\/p>\n\n\n\n<p>Add following dev-dependencies<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\"devDependencies\": {\n   \"less\": \"^3.9.0\",\n   \"less-watch-compiler\": \"^1.13.0\"\n }\n<\/pre>\n\n\n\n<p>Less-watch-compiler takes a config file as parameter<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n   \"watchFolder\": \"src\/\",  \n   \"outputFolder\": \"src\/\",  \n   \"sourceMap\": true,\n   \"runOnce\": false,\n   \"enableJs\": true\n}\n<\/pre>\n\n\n\n<p>Here we are telling less-watch-compiler to watch all files in \u2018src\u2019 and its sub-directories for changes and if any file is changed, output the compiled CSS file into the same directory.<\/p>\n\n\n\n<p>If we start this less-watch-compiler once we have to start our React server, every time we change any LESS file in our project, we will have an updated CSS file in the same directory. So, it is better if we start it in our \u201cstart\u201d script. But since start script will also be used in production we create another script named \u2018dev-start\u2019. To run the react server concurrently with the less-watch-compiler we use a utility called \u2018concurrently\u2019.<\/p>\n\n\n\n<p>Add concurrently to your dev-dependencies<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\"devDependencies\": {\n   \"concurrently\": \"^4.1.0\"\n}\n<\/pre>\n\n\n\n<p>Out dev-start script will be<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\"dev-start\": \"concurrently --kill-others \\\"less-watch-compiler --config less-watcher.config.json\\\" \\\"react-scripts start\\\"\"<\/pre>\n\n\n\n<p>The \u201c&#8211;kill-others\u201d flag means if any one of the two processes dies the other will be killed too.<\/p>\n\n\n\n<p>THAT\u2019S ALL. Change your \u201cApp.css\u201d to \u201cApp.less\u201d and start using LESS styling. Please note that we will import \u201cApp.css\u201d instead of \u201cApp.less\u201d. Your CSS file will always be up to-date, thanks to the less-watch-compiler.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">A complete code for a sample project is available at<a href=\"https:\/\/github.com\/sferhan\/less-react-sample\">https:\/\/github.com\/sferhan\/less-react-sample<\/a><\/h5>\n\n\n\n<p><em>Please feel free to reach out if you have any questions. In case you need any help with development, installation, integration, up-gradation and customization of your Business Solutions. We have expertise in&nbsp;<\/em><a href=\"https:\/\/www.folio3.com\/enterprise\"><em>Enterprise Application Development Solutions<\/em><\/a><em>. Connect with us for more information.&nbsp;<a href=\"mailto:Contact@folio3.com\">Contact@folio3.com<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I recently came across a problem while configuring my React application to use LESS styling. The misleading information on the web made the solution a bit tricky. So, after finding the appropriate solution, I decided to write this article. Some background CSS has always been an essential part of the Web. It brings order and &hellip; <a href=\"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Using LESS in React without Ejecting&#8221;<\/span><\/a><\/p>\n","protected":false},"author":37,"featured_media":1941,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-1938","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-featured-posts"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Use LESS in React without Ejecting<\/title>\n<meta name=\"description\" content=\"A simple step by step solution that how to use less with create-react-app but without ejecting. Tips to using less with create-react-app (CRA)\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use LESS in React without Ejecting\" \/>\n<meta property=\"og:description\" content=\"A simple step by step solution that how to use less with create-react-app but without ejecting. Tips to using less with create-react-app (CRA)\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/\" \/>\n<meta property=\"og:site_name\" content=\"Mobile App Development Services\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-07T11:42:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-03-26T17:46:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/07\/blog-thumb8.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"396\" \/>\n\t<meta property=\"og:image:height\" content=\"267\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Noc Folio3\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noc Folio3\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/\"},\"author\":{\"name\":\"Noc Folio3\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb\"},\"headline\":\"Using LESS in React without Ejecting\",\"datePublished\":\"2019-05-07T11:42:55+00:00\",\"dateModified\":\"2020-03-26T17:46:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/\"},\"wordCount\":743,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/07\/blog-thumb8.jpg\",\"articleSection\":[\"Featured Posts\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/\",\"name\":\"How to Use LESS in React without Ejecting\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/07\/blog-thumb8.jpg\",\"datePublished\":\"2019-05-07T11:42:55+00:00\",\"dateModified\":\"2020-03-26T17:46:52+00:00\",\"description\":\"A simple step by step solution that how to use less with create-react-app but without ejecting. Tips to using less with create-react-app (CRA)\",\"breadcrumb\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/#primaryimage\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/07\/blog-thumb8.jpg\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/07\/blog-thumb8.jpg\",\"width\":396,\"height\":267},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.folio3.com\/mobile\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using LESS in React without Ejecting\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"name\":\"Mobile App Development Services\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\",\"name\":\"Mobile App Development Services\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"width\":210,\"height\":50,\"caption\":\"Mobile App Development Services\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb\",\"name\":\"Noc Folio3\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g\",\"caption\":\"Noc Folio3\"},\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/author\/noc\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use LESS in React without Ejecting","description":"A simple step by step solution that how to use less with create-react-app but without ejecting. Tips to using less with create-react-app (CRA)","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:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/","og_locale":"en_US","og_type":"article","og_title":"How to Use LESS in React without Ejecting","og_description":"A simple step by step solution that how to use less with create-react-app but without ejecting. Tips to using less with create-react-app (CRA)","og_url":"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/","og_site_name":"Mobile App Development Services","article_published_time":"2019-05-07T11:42:55+00:00","article_modified_time":"2020-03-26T17:46:52+00:00","og_image":[{"width":396,"height":267,"url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/07\/blog-thumb8.jpg","type":"image\/jpeg"}],"author":"Noc Folio3","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Noc Folio3","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/#article","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/"},"author":{"name":"Noc Folio3","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb"},"headline":"Using LESS in React without Ejecting","datePublished":"2019-05-07T11:42:55+00:00","dateModified":"2020-03-26T17:46:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/"},"wordCount":743,"commentCount":0,"publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/07\/blog-thumb8.jpg","articleSection":["Featured Posts"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/","url":"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/","name":"How to Use LESS in React without Ejecting","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/#primaryimage"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/07\/blog-thumb8.jpg","datePublished":"2019-05-07T11:42:55+00:00","dateModified":"2020-03-26T17:46:52+00:00","description":"A simple step by step solution that how to use less with create-react-app but without ejecting. Tips to using less with create-react-app (CRA)","breadcrumb":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/#primaryimage","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/07\/blog-thumb8.jpg","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/07\/blog-thumb8.jpg","width":396,"height":267},{"@type":"BreadcrumbList","@id":"https:\/\/www.folio3.com\/mobile\/blog\/using-less-in-react-without-ejecting\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.folio3.com\/mobile\/"},{"@type":"ListItem","position":2,"name":"Using LESS in React without Ejecting"}]},{"@type":"WebSite","@id":"https:\/\/www.folio3.com\/mobile\/#website","url":"https:\/\/www.folio3.com\/mobile\/","name":"Mobile App Development Services","description":"","publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.folio3.com\/mobile\/#organization","name":"Mobile App Development Services","url":"https:\/\/www.folio3.com\/mobile\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","width":210,"height":50,"caption":"Mobile App Development Services"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb","name":"Noc Folio3","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g","caption":"Noc Folio3"},"url":"https:\/\/www.folio3.com\/mobile\/blog\/author\/noc\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/1938"}],"collection":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/comments?post=1938"}],"version-history":[{"count":2,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/1938\/revisions"}],"predecessor-version":[{"id":2447,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/1938\/revisions\/2447"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media\/1941"}],"wp:attachment":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media?parent=1938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/categories?post=1938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/tags?post=1938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}