{"id":1815,"date":"2022-05-30T10:36:14","date_gmt":"2022-05-30T10:36:14","guid":{"rendered":"http:\/\/magemart.com\/blog\/?p=1815"},"modified":"2022-08-15T18:04:46","modified_gmt":"2022-08-15T18:04:46","slug":"how-to-set-up-magento-2-pwa-studio","status":"publish","type":"post","link":"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/","title":{"rendered":"How to set up magento 2 PWA studio?"},"content":{"rendered":"<div class=\"blog_detail\">\n<div class=\"para_top\">\n<p>Maybe you\u2019ve learned that PWA can improve your Magento eCommerce business. You are here to learn how to install PWA into Magento 2. A progressive web application is the best way to save capital and efforts that spend on native apps to reach your audience.<\/p>\n<p>PWA can run smoothly on the phone&#8217;s browser. In fact, it gives the smooth mobile app abilities to users to surf, browse and shop online smoothly. Behave like native apps and reduce the need to be updated all the time from app stores. With progressive web apps, users can get the same mobile app shopping experience, even when there is no internet connection.<\/p>\n<\/div>\n<div class=\"para_top1\">\n<p>But, the real question is: how to create a progressive web application for your online store? Because of that, Adobe Magento Commerce has launched a set of tools and libraries &#8211; Magento PWA Studio. It provides tools to set up a PWA and create your storefront.<\/p>\n<\/div>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_23 counter-hierarchy counter-decimal ez-toc-grey\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" style=\"display: none;\"><i class=\"ez-toc-glyphicon ez-toc-icon-toggle\"><\/i><\/a><\/span><\/div>\n<nav><ul class=\"ez-toc-list ez-toc-list-level-1\"><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/#What_is_Magento_PWA_Studio\" title=\"What is Magento PWA Studio?\">What is Magento PWA Studio?<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/#Requirements_to_Install_PWA_Studio\" title=\"Requirements to Install PWA Studio\">Requirements to Install PWA Studio<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/#Step-by-Step_Guide_to_Set_Up_PWA_Studio\" title=\"Step-by-Step Guide to Set Up PWA Studio\">Step-by-Step Guide to Set Up PWA Studio<\/a><ul class=\"ez-toc-list-level-5\"><li class=\"ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/#Step_1_Use_the_cd_command_in_the_directory\" title=\"Step 1: Use the cd command in the directory\">Step 1: Use the cd command in the directory<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/#Step_2_Install_PWA_front_to_your_Magento_backend\" title=\"Step 2: Install PWA front to your Magento backend\">Step 2: Install PWA front to your Magento backend<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/#Step_3_Start_the_PWA_Studio_storefront\" title=\"Step 3: Start the PWA Studio storefront\">Step 3: Start the PWA Studio storefront<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/#The_Bottom_Line\" title=\"The Bottom Line\">The Bottom Line<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"What_is_Magento_PWA_Studio\"><\/span><a name=\"h-12.1\"><\/a>What is Magento PWA Studio?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"under_h2\">\n<p>PWA Studio gives a perfect development environment and libraries to build PWA on the Magento backend. Also, It will help online merchants to build PWA apps that suit all the different OSs.<\/p>\n<p>Magento 2 online stores can enhance conversion rates with a suite of tools designed. That further leads to achieving business revenue sales. PHP, JavaScript, React, Webpack, GraphQL, and hooks are libraries used to build Magento PWA Studio. Moreover, this robust tool enhances the overall user experience with PWA.<\/p>\n<p>As a merchant, you want to create your own PWA. But installing Magento PWA studio is tricky for you. Here is the step-by-step guide to setting up Magento PWA studio.<\/p>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Requirements_to_Install_PWA_Studio\"><\/span><a name=\"h-12.2\"><\/a>Requirements to Install PWA Studio<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>While installing the Magento 2 PWA studio, make sure that you meet all the prerequisites which are listed below:<\/p>\n<ul>\n<li>Your online store must be built on Magento 2. Installing Magento 2 PWA studio needs Magento 2 and other versions, as it doesn&#8217;t support other Magento editions.<\/li>\n<li><a href=\"https:\/\/nodejs.org\/en\/\">NodeJS<\/a> (&gt;=10.14.1 LTS). Check your current node version using the following command: node -v<\/li>\n<li><a href=\"https:\/\/yarnpkg.com\/\">Yarn<\/a> (&gt;= 1.13.0): Steps to install it:<\/li>\n<li>Check your current Yarn version using this command: yarn -v<\/li>\n<li>Install the latest version of Yarn binary: npm install -g yarn<\/li>\n<li>Move the file into your project folder: cd ~\/path\/to\/project<\/li>\n<li>Run this command: yarn set version berry<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"Step-by-Step_Guide_to_Set_Up_PWA_Studio\"><\/span><a name=\"h-12.3\"><\/a>Step-by-Step Guide to Set Up PWA Studio<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li>\n<h5><span class=\"ez-toc-section\" id=\"Step_1_Use_the_cd_command_in_the_directory\"><\/span>Step 1: Use the cd command in the directory<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<div class=\"sub_label_bold\">Answer the questions in the terminal:<\/div>\n<ul>\n<li>The project root directory: Enter the name of your root directory<\/li>\n<li>Short name of the project to put in the \u201cname\u201d field: Enter the project name.<\/li>\n<li>Name of the author to put in the \u201cauthor\u201d field: Enter the author information in this format: Author Name. For example Magemart Developer &lt;developer@magemart.com&gt;<\/li>\n<li>Set up Magento as a backend (will be added to \u2018.env\u2019 file): 2.3.3-venia-cloud.<\/li>\n<li>Braintree API token to communicate with your Braintree instance (will be added to the \u2018.env\u2019 file): Press Enter.<\/li>\n<li>NPM management client to use: Select yarn<\/li>\n<li>Install package dependencies with yarn: Select Yes (Y)<\/li>\n<\/ul>\n<\/li>\n<li>\n<h5><span class=\"ez-toc-section\" id=\"Step_2_Install_PWA_front_to_your_Magento_backend\"><\/span>Step 2: Install PWA front to your Magento backend<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p class=\"bottom_h4\">Go to the project directory and open the. env file to change the value after MAGENTO_BACKEND_URL.<\/p>\n<\/li>\n<li>\n<h5><span class=\"ez-toc-section\" id=\"Step_3_Start_the_PWA_Studio_storefront\"><\/span>Step 3: Start the PWA Studio storefront<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p class=\"bottom_h4\">Run the commands<\/p>\n<ul>\n<li>yarn install<\/li>\n<li>yarn watch<\/li>\n<\/ul>\n<p>After running the commands, the output shows that your project is successfully deployed at the URL http:\/\/0.0.0.0:10000\/. Next, users can access installed PWA Studio using this URL.<\/p>\n<p>This server will detect any change and it updates the PWA frontend in real-time whenever a change. Using Ctrl + C, you can stop the running PWA dev server.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"The_Bottom_Line\"><\/span>The Bottom Line<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p class=\"final_para\">Are you struggling with Magento PWA Studio Installation? Our team of developers can help to set up Magento 2 PWA Studio seamlessly. For non-tech savvy merchants, I highly recommended taking help from experts.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Maybe you\u2019ve learned that PWA can improve your Magento eCommerce business. You are here to learn how to install PWA into Magento 2. A progressive web application is the best way to save capital and efforts that spend on native&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2136,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[71,70],"tags":[341,346,223,171,181,156,170,184],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to set up Magento PWA studio?<\/title>\n<meta name=\"description\" content=\"As a merchant, you want to create your own PWA. But you don&#039;t know how to set up Magento PWA studio. Here is a step-by-step guide for you.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to set up Magento PWA studio?\" \/>\n<meta property=\"og:description\" content=\"As a merchant, you want to create your own PWA. But you don&#039;t know how to set up Magento PWA studio. Here is a step-by-step guide for you.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/\" \/>\n<meta property=\"og:site_name\" content=\"Magento 2 Blog - Tutorials \/ Devdocs | Magemart-AheadGroups\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-30T10:36:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-15T18:04:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/magemart.com\/blog\/wp-content\/uploads\/2022\/05\/57-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Any Atkinson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/magemart.com\/blog\/#website\",\"url\":\"https:\/\/magemart.com\/blog\/\",\"name\":\"Magento 2 Blog - Tutorials \/ Devdocs | Magemart-AheadGroups\",\"description\":\"Magento 2 Blog - Tutorials\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/magemart.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/#primaryimage\",\"url\":\"https:\/\/magemart.com\/blog\/wp-content\/uploads\/2022\/05\/57-1.jpg\",\"contentUrl\":\"https:\/\/magemart.com\/blog\/wp-content\/uploads\/2022\/05\/57-1.jpg\",\"width\":1200,\"height\":630},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/#webpage\",\"url\":\"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/\",\"name\":\"How to set up Magento PWA studio?\",\"isPartOf\":{\"@id\":\"https:\/\/magemart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/#primaryimage\"},\"datePublished\":\"2022-05-30T10:36:14+00:00\",\"dateModified\":\"2022-08-15T18:04:46+00:00\",\"author\":{\"@id\":\"https:\/\/magemart.com\/blog\/#\/schema\/person\/1a93ce9f4356af9a8637e9ee970a4300\"},\"description\":\"As a merchant, you want to create your own PWA. But you don't know how to set up Magento PWA studio. Here is a step-by-step guide for you.\",\"breadcrumb\":{\"@id\":\"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/magemart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to set up magento 2 PWA studio?\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/magemart.com\/blog\/#\/schema\/person\/1a93ce9f4356af9a8637e9ee970a4300\",\"name\":\"Any Atkinson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/magemart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2a0a5aa37ea9188eac65d593ca5e6b99?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2a0a5aa37ea9188eac65d593ca5e6b99?s=96&d=mm&r=g\",\"caption\":\"Any Atkinson\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to set up Magento PWA studio?","description":"As a merchant, you want to create your own PWA. But you don't know how to set up Magento PWA studio. Here is a step-by-step guide for you.","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:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/","og_locale":"en_US","og_type":"article","og_title":"How to set up Magento PWA studio?","og_description":"As a merchant, you want to create your own PWA. But you don't know how to set up Magento PWA studio. Here is a step-by-step guide for you.","og_url":"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/","og_site_name":"Magento 2 Blog - Tutorials \/ Devdocs | Magemart-AheadGroups","article_published_time":"2022-05-30T10:36:14+00:00","article_modified_time":"2022-08-15T18:04:46+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/magemart.com\/blog\/wp-content\/uploads\/2022\/05\/57-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Any Atkinson","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/magemart.com\/blog\/#website","url":"https:\/\/magemart.com\/blog\/","name":"Magento 2 Blog - Tutorials \/ Devdocs | Magemart-AheadGroups","description":"Magento 2 Blog - Tutorials","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/magemart.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/#primaryimage","url":"https:\/\/magemart.com\/blog\/wp-content\/uploads\/2022\/05\/57-1.jpg","contentUrl":"https:\/\/magemart.com\/blog\/wp-content\/uploads\/2022\/05\/57-1.jpg","width":1200,"height":630},{"@type":"WebPage","@id":"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/#webpage","url":"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/","name":"How to set up Magento PWA studio?","isPartOf":{"@id":"https:\/\/magemart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/#primaryimage"},"datePublished":"2022-05-30T10:36:14+00:00","dateModified":"2022-08-15T18:04:46+00:00","author":{"@id":"https:\/\/magemart.com\/blog\/#\/schema\/person\/1a93ce9f4356af9a8637e9ee970a4300"},"description":"As a merchant, you want to create your own PWA. But you don't know how to set up Magento PWA studio. Here is a step-by-step guide for you.","breadcrumb":{"@id":"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/magemart.com\/blog\/how-to-set-up-magento-2-pwa-studio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/magemart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to set up magento 2 PWA studio?"}]},{"@type":"Person","@id":"https:\/\/magemart.com\/blog\/#\/schema\/person\/1a93ce9f4356af9a8637e9ee970a4300","name":"Any Atkinson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/magemart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2a0a5aa37ea9188eac65d593ca5e6b99?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2a0a5aa37ea9188eac65d593ca5e6b99?s=96&d=mm&r=g","caption":"Any Atkinson"}}]}},"_links":{"self":[{"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/posts\/1815"}],"collection":[{"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/comments?post=1815"}],"version-history":[{"count":17,"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/posts\/1815\/revisions"}],"predecessor-version":[{"id":2697,"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/posts\/1815\/revisions\/2697"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/media\/2136"}],"wp:attachment":[{"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/media?parent=1815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/categories?post=1815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/tags?post=1815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}