{"id":110975,"date":"2024-06-03T16:05:25","date_gmt":"2024-06-03T16:05:25","guid":{"rendered":"\/tutorials\/?p=110975"},"modified":"2025-04-23T09:01:20","modified_gmt":"2025-04-23T09:01:20","slug":"magento-pwa","status":"publish","type":"post","link":"\/in\/tutorials\/magento-pwa","title":{"rendered":"Understanding Magento Progressive Web Apps and Building a Storefront"},"content":{"rendered":"<p>Magento progressive web application (PWA) is an advanced technology that transforms Magento storefronts into high-performing, app-like experiences. It combines the best of web and mobile apps, offering faster loading times, offline capabilities, and improved user engagement.<\/p><p>In this article, we&rsquo;ll guide you through the benefits, prerequisites, and steps to implement Magento PWA. By the end, you&rsquo;ll understand how to enhance your Magento storefront with PWA to provide seamless, responsive, and engaging shopping experiences.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Website-Launch-Checklist-EN.pdf\" target=\"_blank\" rel=\"noopener\">Download website launch checklist<\/a><\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-benefits-of-magento-pwa\">Benefits of Magento PWA<\/h2><p>Implementing a Magento PWA offers numerous advantages for your eCommerce store. Here are the key benefits:<\/p><ul class=\"wp-block-list\">\n<li><strong>Improved performance<\/strong>. Progressive web applications load faster and provide smoother interactions, resulting in better user experiences. This performance optimization keeps mobile users engaged and reduces bounce rates.<\/li>\n\n\n\n<li><strong>Enhanced mobile experience<\/strong>. Designed with a mobile-first approach, PWAs deliver app-like features on websites, making mobile commerce activities more accessible and enjoyable.<\/li>\n\n\n\n<li><strong>Offline capabilities<\/strong>. PWAs can work offline or with poor internet connections by caching essential resources. This ensures uninterrupted shopping experiences for users regardless of their connectivity.<\/li>\n\n\n\n<li><strong>Push notifications<\/strong>. PWAs engage users effectively with push notifications, driving higher retention and returning customers. These notifications can inform users about promotions, chats from sellers, and order updates.<\/li>\n\n\n\n<li><strong>Cost-effective development<\/strong>. PWAs reduce the need for separate mobile app development, saving time and resources. Using PWA development tools allows for efficient creation and maintenance.<\/li>\n\n\n\n<li><strong>SEO advantages<\/strong>. Unlike native apps, PWAs are indexable by search engines, improving your Magento store&rsquo;s SEO and visibility. This leads to better search engine rankings and increased organic traffic.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-prerequisites-for-using-magento-pwa\">Prerequisites for Using Magento PWA<\/h2><p>Before implementing a Magento PWA, it&rsquo;s essential to meet particular prerequisites to ensure a smooth and effective setup.<\/p><p><strong>Technical Requirements<\/strong><\/p><p>To get started with Magento PWA, you need to <a href=\"\/in\/tutorials\/magento-2-tutorial\">install Magento<\/a> on a server. For those who want flexibility and complete control, we recommend setting up the Magento Open Source version on a Linux virtual private server (VPS).<\/p><p><a href=\"\/in\/vps-hosting\">Hostinger&rsquo;s VPS<\/a> is an excellent choice for hosting Magento PWAs. It offers a pre-configured template for a quick and easy installation process, ensuring that your Magento and its necessary components are ready for your PWA development.<\/p><?xml encoding=\"utf-8\" ?><figure class=\"wp-block-image size-large\"><a href=\"\/in\/vps-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/VPS-hosting-banner-1024x300.png\" alt=\"\" class=\"wp-image-77934\" srcset=\"https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2023\/02\/VPS-hosting-banner.png 1024w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2023\/02\/VPS-hosting-banner-300x88.png 300w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2023\/02\/VPS-hosting-banner-150x44.png 150w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2023\/02\/VPS-hosting-banner-768x225.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p><strong>Development Environment<\/strong><\/p><p>A robust development environment is crucial for a smooth development process. Make sure you have the following tools and configurations set up:<\/p><ul class=\"wp-block-list\">\n<li><strong>Node.js<\/strong>. A required module to build the project. Ensure your <a href=\"\/in\/tutorials\/what-is-node-js\">Node.js<\/a> version is <strong>&gt;=14<\/strong>.<\/li>\n\n\n\n<li><strong>Yarn<\/strong>. A package and project manager for your progressive web app. Make sure to install Yarn version <strong>&gt;=1.12.0<\/strong>.<\/li>\n<\/ul><p>If you haven&rsquo;t installed Node.js and Yarn or are unsure which version is installed, don&rsquo;t worry. The subsequent section will provide more details.<\/p><p><strong>Knowledge Requirements<\/strong><\/p><p>A solid understanding of web development fundamentals is essential for working with Magento PWA. Here are the key areas you should be familiar with:<\/p><ul class=\"wp-block-list\">\n<li><strong>Magento<\/strong>. Familiarity with Magento&rsquo;s architecture and its backend operations is crucial for integrating PWA features effectively. We recommend checking our <a href=\"\/in\/tutorials\/magento-2-tutorial\">Magento tutorial<\/a> article for detailed guidance on setting up and managing your store.<\/li>\n\n\n\n<li><strong>Headless architecture<\/strong>. Understanding how headless architecture works will help you grasp how the PWA interacts with the Magento backend without relying on the traditional front-end framework.<\/li>\n\n\n\n<li><strong>React<\/strong>. Magento PWA typically uses <a href=\"\/in\/tutorials\/what-is-react\">React<\/a> to build user interfaces. Understanding how to use React components, state management, and custom hooks will enhance your storefront.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-getting-started-with-magento-pwa\">Getting Started with Magento PWA<\/h2><p>There are several ways to implement PWA on Magento. In this tutorial, we use Magento PWA Studio and the Venia storefront application.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-set-up-the-environment\">1. Set Up the Environment<\/h3><p>Before setting up Magento PWA on a VPS, you need to prepare your environment first. Here are the steps:<\/p><ol class=\"wp-block-list\">\n<li>Log in to your server using <a href=\"\/in\/tutorials\/ssh-tutorial-how-does-ssh-work\">SSH<\/a>. Run this command and replace <strong>username<\/strong> and <strong>your_server_ip<\/strong> with your actual details:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">ssh username@your_server_ip<\/pre><ol start=\"2\" class=\"wp-block-list\">\n<li>Update and upgrade the server to ensure you have the latest packages and security updates:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">sudo apt update<br><br>sudo apt upgrade -y<\/pre><ol start=\"3\" class=\"wp-block-list\">\n<li>Verify if Node.js and Yarn are already installed on your VPS and check their versions with these commands:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">node -v<br><br>yarn -v<\/pre><ol start=\"4\" class=\"wp-block-list\">\n<li>If outdated versions of Node.js and Yarn are installed, remove them by executing:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">sudo apt remove nodejs npm -y<br><br>npm uninstall --global yarn<\/pre><ol start=\"5\" class=\"wp-block-list\">\n<li>Install the latest version of Node.js using APT and NodeSource PPA:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">curl -fsSL https:\/\/deb.nodesource.com\/setup_lts.x | bash -<br><br>apt-get install nodejs -y<\/pre><ol start=\"6\" class=\"wp-block-list\">\n<li><a href=\"\/in\/tutorials\/how-to-install-yarn\">Install Yarn<\/a> with <strong>npm<\/strong>:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">npm install --global yarn<\/pre><h3 class=\"wp-block-heading\" id=\"h-2-install-magento-pwa-studio\">2. Install Magento PWA Studio<\/h3><p>After preparing your server environment, it&rsquo;s time to install Magento 2 PWA Studio. Follow these steps to do so:<\/p><ol class=\"wp-block-list\">\n<li>Start by creating a new PWA Studio project with Yarn. This will set up the project structure and necessary files for your PWA.<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">yarn create @magento\/pwa<\/pre><ol start=\"2\" class=\"wp-block-list\">\n<li>Wait for Yarn to prepare the setup. You&rsquo;ll be prompted to answer the following questions:<\/li>\n<\/ol><ul class=\"wp-block-list\">\n<li><strong>Project root directory<\/strong>. Create a new folder to store your project files.<\/li>\n\n\n\n<li><strong>Short name of the project<\/strong>. Enter a name for your project.<\/li>\n\n\n\n<li><strong>Name of the author<\/strong>. Specify the author&rsquo;s name.<\/li>\n\n\n\n<li><strong>Which template would you like to use<\/strong>. Write <strong>@magento\/venia-concept<\/strong> to use the Venia storefront.<\/li>\n\n\n\n<li><strong>Magento instance to use as a backend<\/strong>. Select <strong>Other<\/strong> among all options.<\/li>\n\n\n\n<li><strong>URL of a Magento instance<\/strong>. Enter your Magento backend&rsquo;s URL.<\/li>\n\n\n\n<li><strong>Edition of the Magento store<\/strong>. Pick <strong>MOS <\/strong>(Magento Open Source).<\/li>\n\n\n\n<li><strong>Braintree API token<\/strong>. Type your Braintree sandbox token. Press <strong>Enter<\/strong> if you don&rsquo;t have one.<\/li>\n\n\n\n<li><strong>NPM package management client<\/strong>. Choose <strong>Yarn<\/strong>.<\/li>\n\n\n\n<li><strong>Install package dependencies<\/strong>. Type <strong>Yes<\/strong>.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e0ddf387b3a\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"223\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/06\/terminal-create-pwa-studio-project-1024x223.png\" alt=\"Magento PWA Studio project preliminary questions\" class=\"wp-image-110978\" srcset=\"https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-create-pwa-studio-project-1024x223.png 1024w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-create-pwa-studio-project-300x65.png 300w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-create-pwa-studio-project-150x33.png 150w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-create-pwa-studio-project-768x167.png 768w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-create-pwa-studio-project-1536x334.png 1536w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-create-pwa-studio-project.png 1960w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Once done, you should see the following output indicating that the installation is successful:<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e0ddf38c82a\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"253\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/06\/terminal-create-pwa-studio-project-successful-1024x253.png\" alt=\"Magento PWA Studio project successful output\" class=\"wp-image-110979\" srcset=\"https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-create-pwa-studio-project-successful-1024x253.png 1024w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-create-pwa-studio-project-successful-300x74.png 300w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-create-pwa-studio-project-successful-150x37.png 150w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-create-pwa-studio-project-successful-768x190.png 768w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-create-pwa-studio-project-successful-1536x379.png 1536w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-create-pwa-studio-project-successful.png 1896w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-3-start-the-development-server\">3. Start the Development Server<\/h3><p>Now that you have PWA Studio installed, you can start the development server. Here are the instructions:<\/p><ol class=\"wp-block-list\">\n<li>Navigate to the directory where your new PWA project is located. Replace <strong>your_project_name <\/strong>with your actual project directory:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">cd your_project_name<\/pre><ol start=\"2\" class=\"wp-block-list\">\n<li>Optionally, generate a unique custom domain and SSL certificate for your local development environment:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">yarn buildpack create-custom-origin .\/<\/pre><ol start=\"3\" class=\"wp-block-list\">\n<li>If you encounter any errors while executing the above command, run this one beforehand:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">export NODE_OPTIONS=--openssl-legacy-provider<\/pre><ol start=\"4\" class=\"wp-block-list\">\n<li>Use the command below to start the Magento PWA development server. This will enable real-time development and hot-reloading of your changes:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">yarn run watch<\/pre><ol start=\"5\" class=\"wp-block-list\">\n<li>The server will compile your storefront project and start a local development server, indicated by the following output:<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e0ddf39240e\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"339\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/06\/terminal-yarn-run-watch-1024x339.png\" alt=\"The yarn run watch command successful output\" class=\"wp-image-110980\" srcset=\"https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-yarn-run-watch-1024x339.png 1024w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-yarn-run-watch-300x99.png 300w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-yarn-run-watch-150x50.png 150w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-yarn-run-watch-768x254.png 768w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-yarn-run-watch-1536x508.png 1536w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-yarn-run-watch-2048x677.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"6\" class=\"wp-block-list\">\n<li>Open your web browser and access the generated URL or your Magento&rsquo;s domain if you set one up. You should see the Venia storefront running like below:<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e0ddf39acd9\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"562\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/06\/venia-storefront-homepage-1024x562.png\" alt=\"Venia storefront's homepage\" class=\"wp-image-110982\" srcset=\"https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/venia-storefront-homepage-1024x562.png 1024w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/venia-storefront-homepage-300x165.png 300w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/venia-storefront-homepage-150x82.png 150w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/venia-storefront-homepage-768x421.png 768w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/venia-storefront-homepage-1536x843.png 1536w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/venia-storefront-homepage-2048x1124.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"7\" class=\"wp-block-list\">\n<li>To stop the development server and exit from the status screen, press <strong>Ctrl + C<\/strong>.<\/li>\n<\/ol><h3 class=\"wp-block-heading\" id=\"h-4-customize-pwa-theme\">4. Customize PWA Theme<\/h3><p>Customizing your PWA theme is a crucial step to ensure it reflects your brand and meets your specific needs. To begin customizing the default Venia theme, follow these basic steps:<\/p><ol class=\"wp-block-list\">\n<li>Navigate to the <strong>src<\/strong> directory within your project folder. Here, you will find the main files responsible for the theme&rsquo;s structure and styles.<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">cd your-project-name\/src<\/pre><ol start=\"2\" class=\"wp-block-list\">\n<li>As an example, let&rsquo;s customize the footer component. Start by creating the <strong>components<\/strong> directory:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">mkdir -p src\/components<\/pre><ol start=\"3\" class=\"wp-block-list\">\n<li>Copy the footer component from <strong>node_modules<\/strong> to your new directory:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">cp node_modules\/@magento\/venia-ui\/lib\/components\/Footer\/footer.js src\/components\/Footer<\/pre><ol start=\"4\" class=\"wp-block-list\">\n<li>Open the <strong>footer.js<\/strong> file and make your changes:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">nano src\/components\/Footer\/footer.js<\/pre><ol start=\"5\" class=\"wp-block-list\">\n<li>Here&rsquo;s an example modification for the footer content:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">\/\/ src\/components\/Footer\/footer.js<br><br>import React from 'react';<br><br>import { Link } from 'react-router-dom';<br><br>import { mergeClasses } from '@magento\/venia-ui\/lib\/classify';<br><br>import defaultClasses from '.\/footer.css';<br><br>const Footer = props =&gt; {<br><br>const classes = mergeClasses(defaultClasses, props.classes);<br><br>return (<br><br>&lt;footer className={classes.root}&gt;<br><br>&lt;div className={classes.content}&gt;<br><br>&lt;div className={classes.links}&gt;<br><br>&lt;Link to=\"\/about-us\"&gt;About Us&lt;\/Link&gt;<br><br>&lt;Link to=\"\/contact\"&gt;Contact&lt;\/Link&gt;<br><br>&lt;Link to=\"\/privacy-policy\"&gt;Privacy Policy&lt;\/Link&gt;<br><br>&lt;\/div&gt;<br><br>&lt;div className={classes.copyright}&gt;<br><br>&copy; {new Date().getFullYear()} Your Company Name. All rights reserved.<br><br>&lt;\/div&gt;<br><br>&lt;\/div&gt;<br><br>&lt;\/footer&gt;<br><br>);<br><br>};<br><br>export default Footer;<\/pre><ol start=\"6\" class=\"wp-block-list\">\n<li>Customize the styles by modifying the CSS or Sass files. For the footer, run <strong>nano src\/components\/Footer\/footer.css<\/strong> and add these modifications:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">\/* src\/components\/Footer\/footer.css *\/<br><br>.root {<br><br>background-color: #333;<br><br>color: #fff;<br><br>padding: 20px;<br><br>text-align: center;<br><br>}<br><br>.links a {<br><br>color: #fff;<br><br>margin: 0 10px;<br><br>text-decoration: none;<br><br>}<br><br>.links a:hover {<br><br>text-decoration: underline;<br><br>}<\/pre><ol start=\"7\" class=\"wp-block-list\">\n<li>Export the footer component in <strong>src\/components\/Footer\/index.js <\/strong>by adding the following content:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">export { default } from \".\/footer\";<\/pre><p><strong>Styling and Branding Tips<\/strong><\/p><p>Here are some tips on how to effectively customize styles and use branding elements to improve your Magento PWA storefront:<\/p><ul class=\"wp-block-list\">\n<li><strong>Add branding elements<\/strong>. Incorporate your logo, brand colors, and typography throughout the theme by updating the style files and importing your brand assets.<\/li>\n\n\n\n<li><strong>Custom CSS and Sass<\/strong>. Use custom CSS or Sass to define your styles. This allows you to maintain a clean separation between the default theme and your customizations. Create new stylesheets or modify existing ones as needed.<\/li>\n\n\n\n<li><strong>Optimize for mobile devices<\/strong>. Make sure that your customizations are responsive on mobile phones. Test your changes across different screen sizes and devices to verify their performance for mobile users.<\/li>\n<\/ul><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Suggested Reading<\/h4>\n                    <p> For inspiration, see how top brands like Byredo, Omega Watches, and Christian Louboutin customize their <a href=\"\/in\/tutorials\/magento-websites\">Magento websites<\/a>.<\/p>\n                <\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-5-implement-custom-features\">5. Implement Custom Features<\/h3><p>Adding custom features to your Magento PWA site can enhance the user experience and provide additional functionality tailored to your specific needs. Here&rsquo;s how to create and integrate new React components in your PWA:<\/p><ol class=\"wp-block-list\">\n<li>Create a directory for your new component:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">mkdir -p src\/components\/NewComponent<\/pre><ol start=\"2\" class=\"wp-block-list\">\n<li>Create a new JavaScript component file:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">nano src\/components\/NewComponent\/NewComponent.js<\/pre><ol start=\"3\" class=\"wp-block-list\">\n<li>Write the code for the newly created component. For example, create a simple banner:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">\/\/ src\/components\/NewComponent\/NewComponent.js<br><br>import React from 'react';<br><br>import { mergeClasses } from '@magento\/venia-ui\/lib\/classify';<br><br>import defaultClasses from '.\/NewComponent.css';<br><br>const NewComponent = props =&gt; {<br><br>const classes = mergeClasses(defaultClasses, props.classes);<br><br>return (<br><br>&lt;div className={classes.banner}&gt;<br><br>&lt;h1&gt;Welcome to Our Store&lt;\/h1&gt;<br><br>&lt;p&gt;Enjoy a seamless shopping experience.&lt;\/p&gt;<br><br>&lt;\/div&gt;<br><br>);<br><br>};<br><br>export default NewComponent;<\/pre><ol start=\"4\" class=\"wp-block-list\">\n<li>Create a CSS file to style the component:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">nano src\/components\/NewComponent\/NewComponent.css<\/pre><ol start=\"5\" class=\"wp-block-list\">\n<li>Here&rsquo;s how you can modify the component&rsquo;s appearance:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">\/* src\/components\/NewComponent\/NewComponent.css *\/<br><br>.banner {<br><br>background-color: #f5f5f5;<br><br>padding: 20px;<br><br>text-align: center;<br><br>}<br><br>.banner h1 {<br><br>font-size: 2em;<br><br>margin: 0;<br><br>}<br><br>.banner p {<br><br>font-size: 1.2em;<br><br>margin: 0;<br><br>}<\/pre><ol start=\"6\" class=\"wp-block-list\">\n<li>Import and integrate your new component into the desired page or layout. For example, add it to <strong>src\/components\/HomePage\/HomePage.js<\/strong>:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">\/\/ src\/components\/HomePage\/HomePage.js<br><br>import React from 'react';<br><br>import NewComponent from '..\/NewComponent\/NewComponent';<br><br>const HomePage = () =&gt; {<br><br>return (<br><br>&lt;div&gt;<br><br>&lt;NewComponent \/&gt;<br><br>{\/* Other homepage components *\/}<br><br>&lt;\/div&gt;<br><br>);<br><br>};<br><br>export default HomePage;<\/pre><p><strong>Custom Feature Examples<\/strong><\/p><p>Here are some examples of custom features to enhance customer experience:<\/p><ul class=\"wp-block-list\">\n<li><strong>Custom React hooks<\/strong>. Create custom hooks to manage complex state logic and side effects, improving code reusability and readability.<\/li>\n\n\n\n<li><strong>Visual components<\/strong>. To make the interface more interactive and engaging, add visual components like carousels, modals, and sliders.<\/li>\n\n\n\n<li><strong>Web app manifest<\/strong>. Customize the web app manifest to provide a native app-like experience when users add your PWA to their home screen.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-6-integrate-extensions-and-third-party-services\">6. Integrate Extensions and Third-Party Services<\/h3><p>Using <a href=\"\/in\/tutorials\/best-magento-2-extensions\">extensions<\/a>, APIs, and third-party services can enhance your Magento store&rsquo;s functionality. However, after implementing PWA, you need to verify that both existing and new services are working correctly.<\/p><p><strong>Compatibility Check<\/strong><\/p><p>Here&rsquo;s how to ensure existing extensions, third-party services, or APIs are compatible with your PWA setup:<\/p><ul class=\"wp-block-list\">\n<li><strong>Review the documentation<\/strong>. Check the documentation of the extensions or services for any specific instructions or compatibility notes related to Progressive Web Apps.<\/li>\n\n\n\n<li><strong>Test in a staging environment<\/strong>. Try out the extensions and services in a staging environment to ensure they work seamlessly with your PWA.<\/li>\n\n\n\n<li><strong>Consult community resources<\/strong>. Use community forums and resources to gather insights and solutions from other developers who have integrated similar services.<\/li>\n<\/ul><p><strong>Integration Steps<\/strong><\/p><p>Follow this guide to integrate popular extensions, services, and APIs into your Magento PWA:<\/p><ol class=\"wp-block-list\">\n<li>Use <a href=\"\/in\/tutorials\/how-to-install-composer\">Composer<\/a> to install the desired extension or service:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">composer require vendor\/extension<\/pre><ol start=\"2\" class=\"wp-block-list\">\n<li>Follow the service&rsquo;s documentation to configure it correctly. This might involve setting up API keys, adjusting settings, or enabling features in the Magento admin panel.<\/li>\n\n\n\n<li>Update your PWA components to use the new extension or service. For example, if integrating a payment gateway, you might need to modify the checkout component:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">\/\/ Example modification to integrate a payment gateway in the checkout component<br><br>import PaymentGateway from 'vendor\/payment-gateway';<br><br>const Checkout = () =&gt; {<br><br>return (<br><br>&lt;div&gt;<br><br>{\/* Other checkout components *\/}<br><br>&lt;PaymentGateway \/&gt;<br><br>&lt;\/div&gt;<br><br>);<br><br>};<br><br>export default Checkout;<\/pre><ol start=\"4\" class=\"wp-block-list\">\n<li>Verify that all functionalities provided by the extension or service are operational and that there are no conflicts with existing features.<\/li>\n<\/ol><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Suggested Reading<\/h4>\n                    <p>Not all extensions are free; some are paid and add to the <a href=\"\/in\/tutorials\/magento-pricing\">total Magento cost<\/a>. Check the detailed breakdown in our article.<\/p>\n                <\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-7-test-and-deploy-the-pwa-project\">7. Test and Deploy the PWA Project<\/h3><p>After customizing the storefront&rsquo;s appearance and implementing custom features, it&rsquo;s wise to test functionality and performance before deploying the project in a production environment.<\/p><p><strong>Testing Process<\/strong><\/p><p>Here are some recommended testing practices for your Magento PWA:<\/p><ul class=\"wp-block-list\">\n<li><strong>Performance testing<\/strong>. Use tools like Lighthouse to test the performance of your PWA and identify areas for improvement.<\/li>\n\n\n\n<li><strong>Cross-browser testing<\/strong>. Verify that your PWA works correctly across different browsers and devices.<\/li>\n\n\n\n<li><strong>User acceptance testing (UAT)<\/strong>. Conduct UAT to ensure the PWA meets user requirements and provides a seamless experience.<\/li>\n<\/ul><p><strong>Debugging Practices<\/strong><\/p><p>Before deploying your Magento PWA, follow these debugging practices:<\/p><ul class=\"wp-block-list\">\n<li><strong>Check console logs<\/strong>. Review console logs for errors or warnings and resolve any issues.<\/li>\n\n\n\n<li><strong>Use debugging tools<\/strong>. Utilize browser developer tools to inspect and debug your code.<\/li>\n\n\n\n<li><strong>Run linting tools<\/strong>. Use linting tools like ESLint to identify and fix code quality issues.<\/li>\n\n\n\n<li><strong>Monitor network requests<\/strong>. Make sure all network requests are functioning correctly and efficiently.<\/li>\n<\/ul><p><strong>Deployment Guide<\/strong><\/p><p>If there are no errors in the development mode, you can start deploying your Magento PWA to a production environment:<\/p><ol class=\"wp-block-list\">\n<li>Run this command to create an optimized production build of your PWA:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">yarn run build<\/pre><ol start=\"2\" class=\"wp-block-list\">\n<li>Here&rsquo;s the expected output:<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e0ddf3a3a80\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"505\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/06\/terminal-yarn-run-build-1024x505.png\" alt=\"The yarn run build successful output\" class=\"wp-image-110984\" srcset=\"https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-yarn-run-build-1024x505.png 1024w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-yarn-run-build-300x148.png 300w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-yarn-run-build-150x74.png 150w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-yarn-run-build-768x379.png 768w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-yarn-run-build-1536x757.png 1536w, https:\/\/www.hostinger.com\/in\/tutorials\/wp-content\/uploads\/sites\/52\/2024\/06\/terminal-yarn-run-build-2048x1009.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>It&rsquo;s advisable to preview the app one more time on a local staging server by executing the following:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">yarn start<\/pre><ol start=\"4\" class=\"wp-block-list\">\n<li>Set up your web server to serve the PWA. Here&rsquo;s an example configuration for Apache:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">&lt;VirtualHost *:80&gt;<br><br>ServerName your-domain.com&nbsp; # Replace with your actual domain name<br><br>DocumentRoot \/path\/to\/your\/build&nbsp; # Replace with the actual path to your build directory<br><br>&lt;Directory \/path\/to\/your\/build&gt;&nbsp; # Replace with the actual path to your build directory<br><br>Options Indexes FollowSymLinks<br><br>AllowOverride None<br><br>Require all granted<br><br>&lt;\/Directory&gt;<br><br>ErrorDocument 404 \/index.html<br><br>&lt;IfModule mod_rewrite.c&gt;<br><br>RewriteEngine On<br><br>RewriteCond %{REQUEST_FILENAME} !-f<br><br>RewriteRule ^ index.html [QSA,L]<br><br>&lt;\/IfModule&gt;<br><br>&lt;\/VirtualHost&gt;<\/pre><ol start=\"5\" class=\"wp-block-list\">\n<li>After deployment, regularly monitor your PWA&rsquo;s performance and functionality. Use monitoring tools to track any issues and maintain optimal performance.<\/li>\n<\/ol><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>Implementing the progressive web app technology for Magento stores offers numerous advantages, such as improved performance, seamless integration with native applications, and increased mobile conversions.<\/p><p>In this guide, you&rsquo;ve learned how to deploy a Magento PWA project, customize it, and implement additional features, ensuring a responsive and engaging experience for your customers.<\/p><p>By combining PWA solutions with Magento, you can unleash this platform&rsquo;s full potential and ensure your online store stays ahead in the eCommerce competition. If you have any questions, ideas, or want to share your experience using PWA on Magento, don&rsquo;t hesitate to comment below!<\/p><h2 class=\"wp-block-heading\" id=\"h-magento-pwa-faq\">Magento PWA FAQ<\/h2><p>This section answers the most common questions about PWA integration with a Magento store.<\/p><div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1717428281925\"><h3 class=\"schema-faq-question\">Why Should I Consider Implementing Magento PWA?<\/h3> <p class=\"schema-faq-answer\">Implementing Magento PWA enhances your store with faster load times, offline browsing, and push notifications. It provides a mobile-first experience, improves user engagement and satisfaction, and helps increase conversion rates on mobile phones and other devices.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1717428293252\"><h3 class=\"schema-faq-question\">Are There Any Specific Requirements for Implementing Magento PWA?<\/h3> <p class=\"schema-faq-answer\">Yes, you need a Magento 2 installation, a hosting service that supports Magento PWA storefront development, Node.js, and Yarn. It&rsquo;s also recommended that you become familiar with React and PWA Studio tools to create and optimize the storefront project.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1717428300238\"><h3 class=\"schema-faq-question\">Can I Use Existing Extensions and Themes with Magento PWA?<\/h3> <p class=\"schema-faq-answer\">Yes, but compatibility varies. Many extensions need updates for PWA. Meanwhile, custom Magento themes must be redeveloped using PWA Studio and the Venia storefront app. Always check with the extension or theme developer for PWA support and guidelines.<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Magento progressive web application (PWA) is an advanced technology that transforms Magento storefronts into high-performing, app-like experiences. It combines the best of web and mobile apps, offering faster loading times, offline capabilities, and improved user engagement. In this article, we&rsquo;ll guide you through the benefits, prerequisites, and steps to implement Magento PWA. By the end, [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/in\/tutorials\/magento-pwa\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":411,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"","rank_math_description":"","rank_math_focus_keyword":"","footnotes":""},"categories":[22642,22640],"tags":[],"class_list":["post-110975","post","type-post","status-publish","format-standard","hentry","category-pre-installed-applications","category-vps"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/magento-pwa","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/magento-pwa","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/magento-pwa","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/magento-pwa","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/magento-pwa","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/magento-pwa","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/magento-pwa","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/magento-pwa","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts\/110975","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/users\/411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/comments?post=110975"}],"version-history":[{"count":7,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts\/110975\/revisions"}],"predecessor-version":[{"id":125878,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts\/110975\/revisions\/125878"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/media?parent=110975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/categories?post=110975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/tags?post=110975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}