Babysteps with PWA Studio

All hail to the Fooman

As mentioned above, Fooman already wrote a great blog on the procedure. The following notes are only complementary. I got things working the way I wanted using the steps he documented already. There is another procedure of getting PWA Studio up and running, but that involves a Virtual Machine. I prefer the local setup.

Troubles with self-signed SSLs

Part of the procedure of setting up PWA Studio is to get self-signed certificates up and running: Traffic is served through a domain like https://magento-venia.local.pwadev:8000/ which needs to be secure to test things properly (like serviceworkers). And PWA Studio is making this possible by creating self-signed SSL certificates: A fake SSL root authority is created, certificate requests are generated and then signed. However, your browser needs to trust this root authority before the magic actually works.

In my Firefox browser, this was easy. However, I normally use Chrome and this required a bit more effort. I'm running Ubuntu and first of all, I needed to install a package libnss3-tools which shipped with a command certutil:

sudo apt-get install libnss3-tools

Next, I went into Chrome to view the (untrusted) SSL certificate and hit Export to save the certificate to a file magento-venia.local.pwadev. Next, certutil was used to install the new certificate:

certutil -d sql:$HOME/.pki/nssdb -L
certutil -d sql:$HOME/.pki/nssdb -A -t "P,," -n venia -i ./magento-venia.local.pwadev

Now, once Chrome was restarted, it worked for me.

Post-installation notes

Make sure to have Magento 2.3 installed properly: Switch from Default Mode into Developer Mode. And do enable the cronjob, even when developing locally.

Automatically fire up PWA Studio

While developing, you can use npm start to fire up a local web server (that listens to port 8000) and that serves the PWA from within the Venia theme folder. Just to make sure I could quickly fire up this web server from within PhpStorm, I added a new node task under Run | Edit Configurations with the name PWA Studio. The package.json should point to the absolute path of app/design/frontend/Magento/venia/package.json. And the additional command should be start.

Work in progress: No homepage yet

When navigating to the homepage of my newly created PWA - https://magento-venia.local.pwadev:8000 - it only showed me a blank page. At the time of playing around with this, support for CMS pages was not included yet. However, since then, I got the impression that some people have worked on displaying CMS pages in PWA Studio as well.

If this is not working for you yet, the trick is to navigate to either a product page or a category page: This assumes that you have installed demo products and categories in your Magento 2.3 environment - either using the performance profiles or the sample data procedure. I used the performance profile so was able to access a category page https://magento-venia.local.pwadev:8000/category-1.html

Work in progress: Broken cart

Unfortunately, this still didn't work yet with an error displaying in the Error Console, complaining about a minicart that was not working. Currently, everything involving cart, quotes and checkout is experimental in PWA Studio, partially because GraphQL support is not available yet.

What I did was simply open up components/Page/page.js and remove the line <MiniCart isOpen={cartIsOpen} /> because I just wanted to have a demo of what was working, not a demo of what was not working.

Work in progress: Broken images

Next, I found out that product images were broken due to a mismatch between PWA Studio and GraphQL: https://github.com/magento/graphql-ce/issues/88 In the thread on GitHub, I suggested a temporary workaround. However, the issue itself is still open.

So, work in progress

It maybe requires some steps to get the current development version of Magento 2.3 and PWA Studio running, but it is perfectly possible. And with that, you can get an inside peek of what is coming up. While it does not offer full PWA functionality yet, I would recommend you to start playing with it anyway (like I am), so you can get used to it. But do take note, it is all work in progress.