Easiest Way to Install Magento 2 PWA Studio • Dev Hooks • devhooks.in

Lots of technical blogs are available for Install Magento 2 PWA but, the steps are too complicated and not easy to understand. So, in this article we'll provide you an easiest way to install Magento 2 PWA Studio.

Before you can start developing with PWA Studio, make sure you meet the requirements. If you don't have it or don't know how to install it then check out our other article How to Install and Remove nodejs from Ubuntu.

Let's install Magento 2 PWA Studio with a single command.

Go to the directory where you want to install PWA Studio and run the below command.

saveCopyzoom_out_mapnpm create @magento/pwa

saveCopyzoom_out_mapyarn create @magento/pwa

Once you run above command it'll ask you few details. You need to answer it as per the below

saveCopyzoom_out_mapCreating a PWA Studio project
? Project root directory (will be created if it does not exist) demo
? Short name of the project to put in the package.json "name" field demo
? Name of the author to put in the package.json "author" field Developer <noreply@domain.com>
? Which template would you like to use to bootstrap demo? Defaults to "@magento/venia-concept". @magento/venia-concept
? Magento instance to use as a backend (will be added to `.env` file) Other
? URL of a Magento instance to use as a backend (will be added to `.env` file) https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/
? Edition of the magento store (Adobe Commerce or Magento Open Source) EE
? Braintree API token to use to communicate with your Braintree instance (will be added to `.env` file) sandbox_8yrzsvtm_s2bg8fs563crhqzk
? NPM package management client to use yarn
? Install package dependencies with yarn after creating project (Y/n) Yes

Make sure you'll provide your live working Magento backend URL.

Once you provide all the details it'll install all the required dependencies and you'll see the below details.

saveCopyzoom_out_map✔  Installed dependencies for 'demo' project
⚠  Created new PWA project demo. Next steps:

 - cd demo before running the below commands.
 - yarn run buildpack create-custom-origin . to generate a unique, secure custom domain for your new project. Highly recommended.
 - yarn run watch to start the dev server and do real-time development.
 - yarn run storybook to start Storybook dev server and view available components in your app.
 - yarn run build to build the project into optimized assets in the '/dist' directory.
 - yarn start after build to preview the app on a local staging server.

If you want a secure custom domain for your new project then you need to run below command.

saveCopyzoom_out_mapyarn run buildpack create-custom-origin .

Once you run above command it'll requires temporary administrative privileges to creating a local development domain. After that you'll see a message like the below.

Acquired custom hostname and SSL cert for demo-7mxly.local.pwadev. Development server will run on port 8861 and staging server will run on port 9861.

Bingo!!

Finally, we did it. Now, go to the Project root directory which you have mentioned before, and run the below command to start PWA Studio.

saveCopyzoom_out_mapyarn run watch

To run PWA you need to open URL which will shown like above in your result.

saveCopyzoom_out_mapPWADevServer ready at https://demo-7mxly.local.pwadev:8861/
GraphQL Playground ready at https://demo-7mxly.local.pwadev:8861/graphiql

If you need to install PWA Studio with old way then we've another artice which is How to Setup Magento 2 PWA Studio.

Other Refrence URL:

That’s it!

I hope this Magento PWA installation guide helped you to find what you were looking for.

Bookmark it for your future reference. Do comment below if you have any other handy commands which are not included in the list.

P.S. Do share this note with your team.