Magento – PWA Setup in Magento 2.3.0

magento2.3pwapwa-studio

  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?

Best Answer

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.

Related Topic