9
  1. How we can use it in Magento 2.3.0?
  2. In Magento 2.3.0, they claim PWA is supported one?
  3. How can we start with this great feature to experience the new thing?
7

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

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.

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.

  • I have followed the same steps. After this I got a Pwadevserver frontend url but not able to reach by that url. Please see attached screenshot. prnt.sc/m4tlbx – user00247 Jan 9 at 9:51
  • Please follow this URL - github.com/magento-research/pwa-studio/issues/236 – Aditya Shah Jan 22 at 13:43
  • after successful setup it gives a new pwadevserverurl where i can see pwa but when i run my base url of project it shows default magento theme. so how can i run pwa on my base url. My base url is localhost/M231 and after yarn build new url i got is : 0.0.0.0:10000. – Satish Dubariya Apr 22 at 5:51
  • @Aditya Shah, Using the above tutorial am I able to set up in My localhost in Xampp? – Sanjay Gohil Jun 24 at 10:52
  • cp .env.dist .env ---------getting error .env.dist': No such file or directory – Shiwani Aug 13 at 5:31
4

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

3

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
0

You can go to the following blog.

How to Setup Magento 2.3 PWA

Also, it will explain in detail about how to use Magento 2.3 PWA for your website and use.

Check Working Magento 2.3 PWA Demo

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.