Easiest Way to Install Magento 2 PWA Studio
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.
npm create @magento/pwa
yarn create @magento/pwa
Once you run above command it'll ask you few details. You need to answer it as per the below
Creating 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 <email@example.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.
✔ 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.
yarn 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.
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.
yarn run watch
To run PWA you need to open URL which will shown like above in your result.
PWADevServer 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:
- Easiest Way to Override Component and Files in Magento 2 PWA Studio
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.