Ttdfjt

Everyone is talking about PWA and I think everyone knows that what is PWA? But what my question how we can use it in Magento 2.3.0? In Mage230, they claim PWA is supported one how can we start with this great feature to experience the new thing?

For more reference

** Let's start with Magento 2.3 installation with PWA**

1. Enter the following command in DIR /var/www/html/ (m230 is my Magento 2.3 directory):

composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.* --stability=beta m230

2. Install Magento by Command Line:

bin/magento setup:install --base-url=http://localhost/m230 --db-host=localhost --db-name=m230 --db-user=root --db-password=root --backend-frontname=admin --admin-firstname=admin --admin-lastname=admin --admin-email=admin@admin.com --admin-user=admin --admin-password=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1

3. Create base pwa theme which will be the parent them for [PWA Venia theme.][25]

• For now lets clone base pwa theme repository.

4. Create directory app/design/frontend/Magento/pwa and copy all files
and directories of base theme here.

• Let's check base theme is available or not.




• Run: php bin/magento setup:upgrade




• And navigate to your Magento Admin->Content->Themes
  [![enter image description here][26]][26]

5. Download PWA studio project.

6. Navigate to your Magento installation’s root directory and create a Pwa symlink folder
linking to the project’s module directory(pwa-studio/packages/pwa-module).

• from this directory i run my command - /var/www/html/m230




• This is a directory where my pwa downloaded source is /var/www/html/PWA/

ln -s /var/www/html/PWA/pwa-studio/packages/pwa-module app/code/Magento/Pwa

7. Link theme directory as well.Navigate to your Magento installation’s root directory and create a Pwa symlink folder linking to the project’s module directory(pwa-studio/packages/venia-concept).

ln -s /var/www/html/PWA/pwa-studio/packages/venia-concept app/design/frontend/Magento/venia

8. Now navigate to your pwa-studio project’s venia-concept directory, copy .env.dist into a new .env file and update the variables with the URL to your Magento development store.

cd /var/www/html/PWA/pwa-studio/packages/venia-concept

cp .env.dist .env

9. Install venia theme and Pwa Module:

run: php bin/magento setup:upgrade

we can see the venia theme is installed successfully.

[![enter image description here][27]][27]

10. Configure venia theme from admin->Content->Configuration

11. Navigate to path (/var/www/html/PWA/pwa-studio) run:

npm install

or

npm install webpack-dev-server -g

12. And Finally Navigate to /var/www/html/PWA/pwa-studio/packages/venia-concept

npm start

Congratulations! You have set up your development environment for the
Venia theme project.

If you need something ready for production asap: I have installed and used the system Vue Store Front (open source system, the community available through slack answers to questions although I had a few hit and miss but overall the system is very useful at this stage of the PWA integration)

--> It uses Vue rather than React. And it also uses ElasticSearch and Docker. Overall, this system is connecting primarily to Magento 2 via Rest API (and there is a start with GraphQL)

to get started:

Git clone https://github.com/DivanteLtd/vue-storefront

cd vue-storefront
yarn install
npm run installer

and then yarn dev to flush the cache but vue changes should be compiled after a few second like a watch process.

Of course, the PWA that Magento 2 builds is also great but unfortunately it is moving fast and it is not clear when it will be ready to compete with VS (above system).

--> I did find it better to learn graphql and possibly easier to customise but it was possibly for the wrong reason at the time, this PWA was having raw css in the react files.

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

npm install

on your magento 2.3 install, you need to install Venia Sample Data (see https://magento-research.github.io/pwa-studio/venia-pwa-concept/install-sample-data/)

cd packages/venia-concept && npm run build

cd ../.. && npm run watch:venia

and here you should have a brand new PWA ready: it does seem to move fast as a month ago, there was a lot of WIP and today, i can see for instance sass integration that was missing. This second option may be better if you are ready to learn and build this PWA with the Magento community

First of all install Node js latest version using following command

- curl -sL https://deb.nodesource.com/setup_10.x | sudo bash -
- sudo apt-get install -y nodejs
- sudo apt install npm

Now go to Magento Root directory :

- cd var/www/html/pwa-magento/

Download PWA clone directory and install npm into this directory using following commands

- git clone https://github.com/magento-research/pwa-studio.git
- cd pwa-studio/
- sudo npm install
- cp packages/venia-concept/.env.dist packages/venia-concept/.env
- sudo npm run build

==========================================

if npx not found error PWA magento 2.3

- sudo npm i -g npx

if error found like this : Cannot find module 'envalid' then run following command

- sudo npm install i envalid
- sudo npm install envalid

if error like this then run following command : lerna ERR! npm run build -s exited 1 in '@magento/venia-concept'

- sudo npm restart
- sudo npm run stage:venia
- sudo npm cache clean -f
- sudo npm install -g n
- sudo n stable / sudo n latest (depends on version)

===========================================

- sudo npm i @magento/pwa-buildpack
- sudo npm i @magento/upward-js
- sudo npm i @magento/venia-concept

- sudo npm run build
- sudo npm run watch:venia
- sudo npm run watch:all