- Bagaimana kita bisa menggunakannya di Magento 2.3.0?
- Di Magento 2.3.0, mereka mengklaim PWA didukung satu?
- Bagaimana kita bisa mulai dengan fitur hebat ini untuk mengalami hal baru?
Jawaban:
** 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 --admin-email=admin@admin.com --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]
4. Buat direktori app/design/frontend/Magento/pwa
dan 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.dist
ke .env
file 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 dev
untuk 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.
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