Let’s initiate a discussion!!
Follow the below steps to install and set up PWA in 2.3 :
Prerequisite :
You must have a version of NodeJS >=10.14.1 , and Yarn > = 1.13.0. I suggest using the Latest versions of both are recommended.
1 ) Use the following command :
1 |
composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition /var/www/html/m23 |
/var/www/html/m23 is a Magento installation directory.
2 ) Install Magento by Command Line:
1 |
php bin/magento setup:install --base-url=http://localhost/m23 --db-host=localhost --db-name=nik_m23 --db-user=root --db-password=webkul --admin-firstname=John --admin-lastname=Doe --admin-email=test@webkul.com --admin-user=admin --admin-password=admin123 --backend-frontname=admin_magento --language=en_US --currency=USD --timezone=Asia/Tbilisi --cleanup-database --use-rewrites=1 |
While you have completed with Magento installation, Now
3 ) Now clone pwa-studio repository :
1 |
https://github.com/magento-research/pwa-studio.git |
1 |
git clone https://github.com/magento-research/pwa-studio.git |
I have cloned this repository in magento root directory ex: /var/www/html/m23
4 ) You will see the pwa-studio directory in /var/www/html/m23.
Enter into this directory :
1 |
cd pwa-studio/ |
5 ) Run :
1 |
yarn install |
6 ) Specify the Magento backend server in .env file. you can see the .env.dist file in
/var/www/html/m23/pwa-studio/packages/venia-concept/ direcoty. If you are not
able see, enable show hidden files. Now create .env file from this env.dist
1 |
cp packages/venia-concept/.env.dist packages/venia-concept/.env |
7 ) Open this .env file and find MAGENTO_BACKEND_URL. Here configure your
local Magento 2.3 instance, my case it is :
1 |
MAGENTO_BACKEND_URL="https://magento2-pwa.com/" |
7.1 Generate SSL certificate because PWA features require an HTTPS Secure Domain. From the root directory of PWA (/PWA-studio) run the below command:
1 |
yarn buildpack create-custom-origin packages/venia-concept |
Note: 7.1 Feature requires administrative access.
8 ) Now let’s install sample data for venia-theme to make it good-looking.
9 ) Run the following command in the Magento root directory setup the repository for the sample data in https://repo.magento.com: composer config –no-interaction –ansi repositories.venia-sample-data composer https://repo.magento.com
9 ) Require in the sample data :
1 |
composer require --no-interaction --ansi magento/venia-sample-data:* |
10 ) Now go back to pwa-studio directory /var/www/html/m23/pwa-studio and start Server.
1 |
yarn run build |
The above command maybe gives the permission error, so run the below command with sudo.
1 |
sudo yarn run build |
12 ) Run the server, Use any of the following commands from the project root directory to start the server:
1 2 3 |
yarn run watch:venia yarn run watch:all yarn run build && yarn run stage:venia |
Last steps to run the following commands :
1 2 3 4 5 |
bin/magento setup:upgrade bin/magento indexer:reindex bin/magento cache:flush |
You are Done! 🙂
[crayon-64261bbfd9dbf311073525/] Using above fucntion Images can be imported directly from...
Override view block using di.xml and add the below code...
You can check a list of called layout XML for...
If you want to remove all leading zero's from order,...
We will create a new category page layout and use...
Let our Magento expert connect to discuss your requirement.
We offer Magento
certified developers.
Our Magento clientele
is 500+.
We sign NDA for the
security of your projects.
We’ve performed 100+
Magento migration projects.
Free quotation
on your project.
Three months warranty on
code developed by us.