First we start with magento 2.3 installation

Enter the following command in you command prompt to install magento 2.3

composer create-project –repository=https://repo.magento.com/ magento/project-community-edition /var/www/html/magento_23

or if you prefer directly from github

https://github.com/magento/magento2/releases

After completing with Magento installation we need to create a parent theme for PWA project.

 

Download theme from github: https://github.com/magento-research/theme-frontend-pwa

 

Create a directory in app/design/frontend/Magento/pwa and copy all files and directories of parent theme here.

Open command prompt and go to your mangento root folder and run “sudo php bin/magento setup:upgrade” command. This will install your base theme.

Then again run “sudo chmod -R 777 {pub/media,pub/static,var,generated}” command to provide permission for the following folders.

Login into Magento backend and go to your Magento Admin->Content->Themes check your parent theme available or not.

Clone repository or Download PWA studio project from https://github.com/magento-research/pwa-studio/tree/master

 

Next we need to install a Magento 2 module and Magento 2 theme that are part of the pwa-studio repository. You can either copy or symlink the module and theme into your Magento 2 installation.

ln -s $(pwd)/pwa-studio/packages/pwa-module app/code/Magento/Pwa

ln -s $(pwd)/pwa-studio/packages/venia-concept app/design/frontend/Magento/venia

Again you want to run “sudo php bin/magento setup:upgrade” command. This will install your chidl theme.

Then again run “sudo chmod -R 777 {pub/media,pub/static,var,generated}” command to provide permission for the following folders.

After that we need to install node and npm. Open terminal and type the following commands

Here we install node and npm using NVM (Node.js Version Manager). Using NVM, we easly switch versions and it will fix version compatibility issues. Otherwise pwa cannot run correctly.

Install curl

sudo apt install curl

Install nvm from github. Version number may differ.

curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh

 

Open file in nano or or your preferred text editor

nano install_nvm.sh

Run the script under sudo:

bash install_nvm.sh

In some cases, it will required system restart to take nvm take effect.

List all node versions

nvm ls-remote

Install version node 11.0 and npm 6.0

nvm install v11.0.0

Set default node version. Otherwise, it may go back to previous version after restart.

nvm use default

Check node and npm installed successfully. If your installation is correct, it will shows the node and npm versions.

nodejs -v

npm -v

Some cases, we need to install build-essential package for npm (not required unless required)

sudo apt install build-essential

You have successfully installed npm and node.

Then go to your pwa project directory from commandprompt and type following commands to install project dependencies.

npm install

Go to packages/venia-concept directory, copy .env.dist into a new .env file:

Find MAGENTO_BACKEND_URL in that file and change url value to your magento url.  Note :- change your url to a valid domain. [Eg: if your local url is like http://localhost/magento23/ then change it to https://magento23.local/ ]. Then only it will work.

Then run two build command from project root directory

npm run build

npm run watch:venia

Command prompt output your project url like

PWADevServer ready at https://magento-venia.local.pwadev:8001 and https://magento-venia.local.pwadev:8001/graphql

Congratulations! you have setup pwa project. If you need more support to setup a Magento PWA studio Project, feel free to contact us.

Shaarif is one of the senior magento developer working with ti Technologies. Shaarif is experienced in working with Magento2 development and he is expert in magento2 development, module development, upgrading magento 1.x to latest Magento2 version.