Initializing PWA Studio¶
Prerequisites in Magento¶
From PWA Studio 12.1 you have to install PWA Studio metapackage in your Magento instance.
If you run Magento as a Reward Environment, run the following commands in the PHP container:
composer require magento/pwa
# If you want to install sample data
composer require magento/venia-sample-data
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento indexer:reindex
php bin/magento cache:clean
Running Default PWA Studio¶
Clone your project and initialize Reward.
$ git clone https://github.com/magento/pwa-studio.git ~/Sites/pwa-studio $ cd ~/Sites/pwa-studio $ reward env-init pwa-studio --environment-type=pwa-studio
Sign a certificate for your project
$ reward sign-certificate pwa-studio.test
Fill up the
.env
file with samples and change some settings$ cat docker/.env.docker.dev >> .env
NODE_VERSION=16 DEV_SERVER_HOST=0.0.0.0 DEV_SERVER_PORT=8000 MAGENTO_BACKEND_EDITION=MOS
Update
package.json
and add these to thescripts
part.Note: it seems like PWA Studio 12.x ignores the
DEV_SERVER_PORT
variable, so we override it from the command line."watch": "yarn watch:venia --disable-host-check --public pwa-studio.test --port 8000", "start": "yarn stage:venia --disable-host-check --public pwa-studio.test --port 8000" # you can use this script if you are familiar with jq DOMAIN="pwa-studio.test" cat package.json | jq --arg domain "$DOMAIN" -Mr '. * {scripts:{watch: ("yarn watch:venia --public " + $domain + " --disable-host-check --port 8000"), start: ("yarn stage:venia --public " + $domain + " --disable-host-check --port 8000")}}' | tee package.json
Note
We have to add both –disable-host-check (to skip host header verification) and –public (to let webpack dev server know it is behind a proxy and it shouldn’t add custom port to it’s callback URLs).
https://webpack.js.org/configuration/dev-server/#devserverpublic
Bring up the environment
$ reward env up
Install its dependencies
$ reward shell $ yarn install
Restart the PWA container
$ reward env restart
Optional: if you’d like to run the project in Developer/Production mode, add the following line to your
.env
file# Developer Mode (default) DOCKER_START_COMMAND="yarn watch" # Production Mode DOCKER_START_COMMAND="yarn start"
Reach a Reward Magento backend environment¶
If your PWA’s Magento backend is also running on your computer as a Reward environment, you will have to configure the PWA container to resolve the Magento DNS to the Reward Traefik container.
To do so add a space separated list of domains to the TRAEFIK_EXTRA_HOSTS
variable in the .env file.
TRAEFIK_EXTRA_HOSTS="otherproject.test thirdproject.test"