- How we can use it in Magento 2.3.0?
- In Magento 2.3.0, they claim PWA is supported one?
- How can we start with this great feature to experience the new thing?
** 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 --email@example.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.]
- 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
11. Navigate to path (
npm install webpack-dev-server -g
12. And Finally Navigate to
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
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.
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