Pengaturan PWA di Magento 2.3.0


Jawaban:


8

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 --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]

  • 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.


Saya telah mengikuti langkah yang sama. Setelah ini, saya mendapatkan URL frontwave Pwadevserver tetapi tidak dapat menjangkau dengan URL tersebut. Silakan lihat screenshot terlampir. prnt.sc/m4tlbx
user00247


setelah setup berhasil itu memberikan pwadevserverurl baru di mana saya dapat melihat pwa tetapi ketika saya menjalankan url basis proyek saya itu menunjukkan tema magento default. jadi bagaimana saya bisa menjalankan pwa di url basis saya. Url basis saya adalah localhost / M231 dan setelah benang membangun url baru yang saya dapatkan adalah: 0.0.0.0:10000 .
Satish Dubariya

@Aditya Shah, Menggunakan tutorial di atas apakah saya dapat mengatur di localhost saya di Xampp?
Sanjay Gohil

cp .env.dist .env --------- mendapatkan kesalahan .env.dist ': Tidak ada file atau direktori seperti itu
Shomita

4

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


Ketika saya menjalankan perintah untuk mendapatkan url ini ---- magento-venia-concept-nbypk.local.pwadev: 8884 @Herve Dapatkah Anda membantu saya dengan ini?
Shomita

4

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.