For this post, i had done the PWA setup with below configuration/version. Based on your requirement, please use valid version.
Requirement :
1. Magento Version : 2.4.0 CE
2. NodeJs : v10.24.0
3. Yarn : 1.22.5
4. Valid SSL Certificate.
Magento2.4.0
I have installed Magento2.4.0 CE from my server. Install required PWA Version. Here i have installed/mentioned PWA version : 8.0.0. Suggest to use proper PWA version which is matched with your magento version. Below link will help you to identify the PWA version https://magento.github.io/pwa-studio/technologies/magento-compatibility/
Clone PWA in your system/server. Two ways you can clone PWA.
Way : 1 : Install Latest PWA version:
Run below command from your magento root directory. This command will download the latest version of PWA.
magenotroot>git clone https://github.com/magento/pwa-studio.git
You can also change the respective branch or version using following command Ex: git checkout -b release/8.0.
Way : 2 : Install specific version of PWA.
Run below command to clone specific version of PWA.
Syntax:
magentoroot>git clone -b https://github.com/magento/pwa-studio.git
Checkout/clone PWA 8.0 version,
magentoroot>git clone -b release/8.0 https://github.com/magento/pwa-studio.git
Install Yarn:
Once after successful installation of PWA you can find “pwa-studio” folder in your magento root.
Go to Magento Root/pwa-studio folder path & execute below command to install yarn.
magentoroot/pwa-studio>yarn install
Create Certificate for Yarn:
Use this command with sudo user.
magentoroot/pwa-studio>yarn buildpack create-custom-origin packages/venia-concept
After run the certification command , you can also check certificate details from below folder path.
/home//.config/devcert/certificate-authority/certificate.certificate-authority/certificate
Configure Magento website from .env file:
Go to magentoRoot/pwa-studio/packages/venia-concept/.env file. This file is hidden file.
Open .env File and configure your magento website url and Configure your magento website https frontend URL as like below format.
Ex:
MAGENTO_BACKEND_URL=https://magentowebsiteURLHERE.com
CHECKOUT_BRAINTREE_TOKEN=<> //By default system will generate and place one token here. Use same one.
magentoroot/pwa-studio>yarn buildpack create-env-file packages/venia-concept
Run your Yarn build :
Using below command you can run/build Yarn. This command is most used commands when you want to re-build the PWA. You may have to execute this command whenever you want to create new build for your PWA.
magentoroot/pwa-studio>yarn run build
magentoroot/pwa-studio>yarn run watch:venia
magentoroot/pwa-studio>yarn run watch:all
magentoroot/pwa-studio>yarn run build && yarn run stage:venia
After successful execution for above command, system will generate URL to access the website,
Sample URL:
PWADevServer ready at https://magento-venia-concept.local.pwadev:/
GraphQL Playground ready at https://magento-venia-concept.local.pwadev:/graphiql
Avoid using of dynamic Port Generation :
Whenever you run the new build with following command “yarn run build” – System will generate new PORT for each build. Handling a dynamic port is little difficult to handle. You can also set static port with your IP address, follow below steps (You can set this common port settings for Dev , Stage , Prod Environment)
1. Open – magentoroot\pwa-studio\packages\venia-concept.env
2. Hard code your IP & Port with below parameters
DEV_SERVER_HOST=
DEV_SERVER_PORT=
Ex: https://magento-venia-concept.local.pwadev:8080/
Host File change:
You can also access this PWA site in your local machine. Here i am explain with Windows OS,
open hosts file and add your domain.
Windows\System32\drivers\etc\hosts
magento-venia-concept.local.pwadev
Open Browser and hit URL : http://:/
Run Yarn Server:
You can’t access your website once you close “yarn run watch:venia server” terminal. For accessing website keep on then use below command, server keep on will run in your background.
“nohup yarn run watch:venia” //You can also kill the server from your server terminal
Yes PWA + Magento setup website is ready to access now.
More Info:
https://devdocs.magento.com/guides/v2.4/pwa/
https://magento.github.io/pwa-studio/tutorials/pwa-studio-fundamentals/project-setup/