We are going to create a PWA Studio app with the scaffolding mechanism available with
the yarn create @magento/pwa command.
This command will create a PWA Studio app based on the Venia Storefront (Concept). You can see a demo of this storefront at at venia.magento.com.
The scaffolding command will only generate the minimum amount of files necessary, it will use the modular components available from the venia-concept, venia-ui, peregrine and pwa-buildpack packages.
In subsequent tutorials we will replace some of these modular components with our own custom ones.
Before installing and running your PWA Studio app make sure you have the minimum prerequisites installed.
Open up your terminal and run:
node -vyarn -vThe output of each of these commands should be a version number.
Your versions may not be the same as those shown below!
If entering these commands doesn’t show you a version number, you will need to install Node.js and Yarn.
Open your terminal and choose a directory on your local machine to install your Magento PWA Studio app.
mkdir pwa-studio-fundamentalscd pwa-studio-fundamentals/* Make note of the full path for this directory. You will be asked for this after your run the next command.
From this directory, run the following Yarn command to generate your PWA Studio app.
yarn create @magento/pwa{: .bs-callout .bs-callout-info}
The npm init @magento/pwa command may also be used, but in this tutorial we will be using Yarn instead of NPM.
During the installation answer the questions from the interactive questionnaire in the terminal.
Once the install command is finished you can start your app with:
yarn watchAfter which your PWA Studio app will be available by default at http://0.0.0.0:10000/.
Stop the PWA dev server by pressing the ctrl & c buttons together
from the terminal window which you ran the yarn watch command from.
In the previous step we set-up your PWA Studio project to be served with http.
For a better development experience it should be served with https as this is a basic requirement of all PWAs
and will be required in your production environment.
Fortunately PWA Studio offers an easy method of creating a custom domain to be served over https
in your local development environment.
From the root directory of your project simply run:
yarn buildpack create-custom-origin ./Now start the app once more with:
yarn watchAfter a few moments, when your app has compiled successfully, you will see links in the terminal to the new custom domain for your PWA Studio app.
{: .bs-callout .bs-callout-info}
The watch command starts the PWA development server which includes features such as hot reloading to
enhance the developer experience.
This step is optional as the @magento/pwa scaffolding command adds the required environment variables automatically.
However if you wish to change your Magento backend URL & braintree payment gateway credentials,
they can be update in your local ./.env file by changing the properties for MAGENTO_BACKEND_URL and BRAINTREE_TOKEN.
- Make sure you are using the correct node version. Early versions of PWA Studio are not compatible with node v12.
Consider using a node version manager such as n. - Clear the full application storage, not just the browser cache.
In the Chrome browser this can be done by opening the Developer Tools
and from the Application tab select Clear Storage on the left side navigation and pressing the Clear site data button.
- Make sure the
MAGENTO_BACKEND_URLfrom your local ./.env file is accessible. - If you have a Privacy Error message in your browser there should be a proceed link for you to click on.
If not, you should be able to find instructions online on how to get your windows, mac or linux to trust self-signed SSL certificates.
- Still having issues? Ask the Magento community in the #PWA slack channel or Magento Stack Exchange.
- Venia Storefront (Concept)
- PWA Studio Scaffolding
- Modular Components
- Magento theme vs PWA storefront