Creating Magento PWA-Studio with Scaffolding Tool

As Magento working hard to push the complete functionality and features of PWA-studio, there were a few major changes in PWA-studio in the past year. Magento introduced the scaffolding tool in the release of PWA-studio 5.0. which makes it a lot easier to set up a PWA-studio project.

This tutorial will guide you to install PWA-studio in your local machine.

Note: Highly recommend having the Magento version 2.3.5 and above installed in your local. It is ok if you don’t have it installed. You can use the Magento Cloud demo as a backend for PWA-studio for educational purposes, but you will not have any backend control or customization. More info about installing Magento click here. If you have standard Magento already installed in your local machine, it is better to check which PWA-studio version is compatible with your standard Magento version. More info about compatibility click here.

Prerequisites:

• Nodejs (>=v10.14)
• Yarn (>= v1.13)

Creating a project

1. Open your CLI tools and run following command

   yarn create @magento/pwa

2. After running the command, there are few questions needed to answer to setup the project. As follow:
   • Project root directory (will be created if it does not exist)
     Just provide the Path where you want to put your project.
   • Short name of the project to put in the package.json “name” field
     Name of your project.
   • Name of the author to put in the package.json “author” field
   • Magento instance to use as a backend (will be added to `.env` file)
     
     It is where I recommend having standard Magento installed in your local. If you want to use your own backend you can change in .env file. I will talk about it more in later steps. For now, just choose the first option ‘Magento 2.3.3 with Venia sample data installed’.
   • Braintree API token to use to communicate with your Braintree instance (will be added to `.env` file)
     I think from PWA-studio 5 Magento stopped providing the pre-working Braintree API token. So you need to create your own.
     • To create Braintree token to go https://www.braintreepayments.com/sandbox and complete the registration process and log in to account
     • After that login to the Braintree sandbox account -> Setting -> API
       
     • Then in the tokenization keys section create a new token key, and paste it to the CLI.
       
3. NPM package management client to use
   You can choose between yarn or npm package management.
4. Install package dependencies with yarn after creating project
   Choose “Yes” to install dependencies.
   
   When you see this screenshot, you have finished creating the project. However, there are a few things to do before start running the project.

Create SSL certificate for your project

Run this command

yarn run buildpack create-custom-origin ./

This will create a unique hostname/port and SSL certificate for the project in your local. When SSL certificate is successfully created, you will see the following screenshot.

• Skip this step if you DO NOT have error after running “yarn run buildpack create-custom-origin”, and continue with editing the.env file. 
  But if you have the following error when running this command.
  
  Delete the “devert” folder in /Users/kevinchan/Library/Application Support/devcert and run the create-custom-origin command again.
  Replace your ‘usrs’ from the following command with your Mac user name.

  rm -rf /Users/usrs/Library/Application\ Support/devcert
  
  yarn run buildpack create-custom-origin ./

Editing .env file

Open your .env file and look for the line starting with “MAGENTO_BACKEND_URL” If you have standard Magento installed and wanna use it as your PWA-studio you can change your backend URL here. For example, my local URL for my standard Magento is http://kevin.loc/, so I need to replace the line with “MAGENTO_BACKEND_URL=https://kevin.loc/“. If you don’t have standard Magento installed, use this Magento demo as your PWA-studio backend. 

• If you didn’t provide the Braintree API token while installation you can edit here just look for the line starting with ‘CHECKOUT_BRAINTREE_TOKEN’ and paste your token here.
  

Create project assets and start the project

• Next run “yarn run build”. This command helps to create a new /dist directory in your project’s root folder with optimized assets

  yarn run build
  

  Note: if there are any errors during this process run “yarn install” to reinstall all the dependencies.

   

• Run “yarn run watch”. This step starts the development server/project with the Venia storefront environment.

  yarn run watch

  Note: if there is a permission error. Run the code with “sudo”.

At last, if you see this screenshot, congrats you just create a PWA-studio with scaffolding tools. Copy the link and open it in the browser. Your Venia storefront will be running.

 

References:

https://magento.github.io/pwa-studio/pwa-buildpack/scaffolding/

https://magento.github.io/pwa-studio/venia-pwa-concept/setup/