Pengaturan PWA di Magento 2.3.0

1. Bagaimana kita bisa menggunakannya di Magento 2.3.0?
2. Di Magento 2.3.0, mereka mengklaim PWA didukung satu?
3. Bagaimana kita bisa mulai dengan fitur hebat ini untuk mengalami hal baru?

Untuk referensi lebih lanjut

** Mari kita mulai dengan instalasi Magento 2.3 dengan PWA **

1. Masukkan perintah berikut dalam DIR / var / www / html / (m230 adalah direktori Magento 2.3 saya):

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

2. Instal Magento dengan 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 protected] --admin-user=admin --admin-password=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1

3. Buat tema pwa dasar yang akan menjadi induk mereka untuk [tema PWA Venia.] [25]

• Untuk sekarang, mari kita repositori tema dasar clone base

4. Buat direktori app/design/frontend/Magento/pwadan salin semua file dan direktori tema dasar di sini.

• Mari kita periksa apakah tema base sudah tersedia atau belum.

• Run: php bin/magento setup:upgrade

• Dan arahkan ke Admin Magento Anda - > Konten -> Tema

5. Unduh proyek studio PWA.

6. Arahkan ke direktori root instalasi Magento Anda dan buat folder symlink Pwa yang menghubungkan ke direktori modul proyek (pwa-studio / paket / pwa-module).

• dari direktori ini saya menjalankan perintah saya - / var / www / html / m230

• Ini adalah direktori tempat sumber unduhan pwa saya adalah / var / www / html / PWA /

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

7. Tautkan direktori tema juga. Navigasikan ke direktori root instalasi Magento Anda dan buat folder symlink Pwa yang menghubungkan ke direktori modul proyek (pwa-studio / paket / konsep venia).

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

8. Sekarang navigasikan ke direktori konsep-konsep proyek pwa-studio Anda, salin .env.distke .envfile baru dan perbarui variabel dengan URL ke toko pengembangan Magento Anda.

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

cp .env.dist .env

9. Instal tema venia dan Modul Pwa:

run: php bin/magento setup:upgrade

kita dapat melihat tema venia berhasil diinstal.

10. Konfigurasikan tema venia dari admin->Content->Configuration

11. Navigasikan ke jalur ( /var/www/html/PWA/pwa-studio) jalankan:

npm install

atau

npm install webpack-dev-server -g

12. Dan Akhirnya Arahkan ke /var/www/html/PWA/pwa-studio/packages/venia-concept

npm start

Selamat! Anda telah mengatur lingkungan pengembangan Anda untuk proyek tema Venia.

Jika Anda memerlukan sesuatu yang siap untuk produksi secepatnya: Saya telah menginstal dan menggunakan sistem Vue Store Front (sistem open source, komunitas tersedia melalui jawaban yang kendur untuk pertanyaan meskipun saya memiliki beberapa masalah, tetapi secara keseluruhan sistem ini sangat berguna pada tahap ini dari integrasi PWA)

-> Ini menggunakan Vue daripada Bereaksi. Dan itu juga menggunakan ElasticSearch dan Docker. Secara keseluruhan, sistem ini terhubung terutama ke Magento 2 melalui Rest API (dan ada awal dengan GraphQL)

untuk memulai:

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

cd vue-storefront
yarn install
npm run installer

dan kemudian yarn devuntuk membersihkan cache tetapi perubahan vue harus dikompilasi setelah beberapa detik seperti proses menonton.

Tentu saja, PWA yang dibangun Magento 2 juga bagus tetapi sayangnya bergerak cepat dan tidak jelas kapan akan siap untuk bersaing dengan VS (sistem di atas).

-> Saya memang merasa lebih baik untuk belajar graphql dan mungkin lebih mudah untuk menyesuaikan tetapi mungkin karena alasan yang salah pada saat itu, PWA ini mengalami css mentah dalam file reaksi.

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

npm install

pada instalan magento 2.3 Anda, Anda perlu menginstal Venia Sample Data (lihat 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

dan di sini Anda harus memiliki PWA baru siap: sepertinya bergerak cepat sebulan yang lalu, ada banyak WIP dan hari ini, saya bisa melihat misalnya integrasi sass yang hilang. Opsi kedua ini mungkin lebih baik jika Anda siap untuk belajar dan membangun PWA ini dengan komunitas Magento

Pertama-tama instal Node js versi terbaru menggunakan perintah berikut

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

Sekarang pergi ke direktori Magento Root:

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

Unduh direktori klon PWA dan instal npm ke direktori ini menggunakan perintah berikut

- 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

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

jika npx tidak ditemukan kesalahan PWA magento 2.3

- sudo npm i -g npx

jika kesalahan ditemukan seperti ini: Tidak dapat menemukan modul 'envalid' kemudian jalankan perintah berikut

- sudo npm install i envalid
- sudo npm install envalid

jika error seperti ini maka jalankan perintah berikut: lerna ERR! npm run build -s keluar 1 di '@ 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

Anda dapat pergi ke blog berikut.

Cara Mengatur Magento 2.3 PWA

Juga, ini akan menjelaskan secara rinci tentang cara menggunakan Magento 2.3 PWA untuk situs web Anda dan penggunaannya.

Lihat Bekerja Magento 2.3 Demo PWA