การตั้งค่า PWA ใน Magento 2.3.0

1. เราจะใช้มันใน Magento 2.3.0 ได้อย่างไร?
2. ใน Magento 2.3.0 พวกเขาอ้างว่า PWA ได้รับการสนับสนุนหรือไม่
3. เราจะเริ่มด้วยคุณสมบัติที่ยอดเยี่ยมนี้เพื่อสัมผัสกับสิ่งใหม่ได้อย่างไร?

สำหรับการอ้างอิงเพิ่มเติม

** เริ่มจากการติดตั้ง Magento 2.3 กับ PWA **

1. ป้อนคำสั่งต่อไปนี้ใน DIR / var / www / html / (m230 เป็นไดเรกทอรี Magento 2.3 ของฉัน):

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

2. ติดตั้ง Magento ด้วย 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. สร้างธีม pwa พื้นฐานซึ่งจะเป็นพาเรนต์สำหรับธีม [PWA Venia] [25]

• สำหรับตอนนี้ให้พื้นที่เก็บข้อมูลชุดรูปแบบโคลนฐาน pwa

4. สร้างไดเรกทอรีapp/design/frontend/Magento/pwaและคัดลอกไฟล์และไดเรกทอรีทั้งหมดของชุดรูปแบบพื้นฐานที่นี่

• ตรวจสอบชุดรูปแบบพื้นฐานพร้อมใช้งานหรือไม่

• Run: php bin/magento setup:upgrade

• และไปที่ Magento Admin-> Content-> Themes

5. ดาวน์โหลดโครงการ PWA studio

6. นำทางไปยังไดเรกทอรีรากของการติดตั้ง Magento ของคุณและสร้างโฟลเดอร์ Pwa symlink ที่ลิงก์ไปยังไดเรกทอรีโมดูลของโครงการ (pwa-studio / packages / pwa-module)

• จากไดเรกทอรีนี้ฉันเรียกใช้คำสั่งของฉัน - / var / www / html / m230

• นี่คือไดเรกทอรีที่ pwa ที่ฉันดาวน์โหลดมาคือ/ var / www / html / PWA /

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

7. เชื่อมโยงไดเรกทอรีของชุดรูปแบบด้วยไปที่ไดเรกทอรีรากของการติดตั้ง Magento ของคุณและสร้างโฟลเดอร์ Pwa symlink ที่ลิงก์ไปยังไดเรกทอรีโมดูลของโครงการ (pwa-studio / packages / venia-concept)

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

8. ไปที่ไดเรกทอรี Venia-concept ของโครงการ pwa-studio ของคุณคัดลอก.env.distลงใน.envไฟล์ใหม่และอัพเดตตัวแปรด้วย URL ไปยัง Magento store store

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

cp .env.dist .env

9. ติดตั้งธีม venia และโมดูล Pwa:

run: php bin/magento setup:upgrade

เราสามารถเห็นชุดรูปแบบ venia ติดตั้งสำเร็จแล้ว

10. กำหนดค่าธีมของ venia จาก admin->Content->Configuration

11. นำทางไปยังเส้นทาง ( /var/www/html/PWA/pwa-studio) รัน:

npm install

หรือ

npm install webpack-dev-server -g

12. และในที่สุดก็ไปที่ /var/www/html/PWA/pwa-studio/packages/venia-concept

npm start

ขอแสดงความยินดี! คุณได้ตั้งค่าสภาพแวดล้อมการพัฒนาของคุณสำหรับโครงการธีม Venia

หากคุณต้องการบางสิ่งบางอย่างพร้อมสำหรับการผลิตโดยเร็ว: ฉันได้ติดตั้งและใช้ระบบVue Store Front (ระบบโอเพ่นซอร์สแล้วชุมชนจะพร้อมใช้งานผ่านการตอบคำถามแบบหน่วงแม้ว่าฉันจะได้รับความนิยมบ้างเล็กน้อย แต่โดยรวมแล้วระบบนี้มีประโยชน์มาก ของการรวม PWA)

-> มันใช้ Vue แทนที่จะทำปฏิกิริยา และยังใช้ ElasticSearch และ Docker โดยรวมแล้วระบบนี้เชื่อมต่อกับ Magento 2 เป็นหลักผ่าน Rest API (และมีการเริ่มต้นด้วย GraphQL)

ที่จะเริ่มต้น:

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

cd vue-storefront
yarn install
npm run installer

จากนั้นyarn devเพื่อล้างแคช แต่ควรมีการรวบรวมการเปลี่ยนแปลง vue หลังจากผ่านไปสองสามวินาทีเช่นกระบวนการดู

แน่นอนว่า PWA ที่ Magento 2 สร้างนั้นยอดเยี่ยม แต่น่าเสียดายที่มันเคลื่อนที่เร็วและไม่ชัดเจนว่าเมื่อใดที่จะพร้อมที่จะแข่งขันกับ VS (เหนือระบบ)

-> ฉันพบว่ามันดีกว่าที่จะเรียนรู้ graphql และอาจปรับแต่งได้ง่ายกว่า แต่มันอาจเป็นเพราะเหตุผลที่ไม่ถูกต้องในเวลานี้กปภ. นี้มี css ดิบในไฟล์ตอบสนอง

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

npm install

ใน magento 2.3 การติดตั้งของคุณคุณต้องติดตั้งข้อมูลตัวอย่าง Venia (ดู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

และที่นี่คุณควรเตรียม PWA ใหม่ให้พร้อม: ดูเหมือนว่าจะเคลื่อนไหวเร็วเมื่อเดือนที่แล้วมี WIP มากมายและวันนี้ฉันสามารถเห็นอินสแตนซ์การรวม sass ที่ขาดหายไป ตัวเลือกที่สองนี้อาจดีกว่าถ้าคุณพร้อมที่จะเรียนรู้และสร้าง PWA นี้กับชุมชนวีโอไอพี

ก่อนอื่นติดตั้ง Node js เวอร์ชั่นล่าสุดโดยใช้คำสั่งต่อไปนี้

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

ตอนนี้ไปที่ไดเรกทอรี Root Magento:

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

ดาวน์โหลดไดเร็กทอรี PWA โคลนและติดตั้ง npm ในไดเร็กทอรีนี้โดยใช้คำสั่งต่อไปนี้

- 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

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

ถ้า npx ไม่พบข้อผิดพลาด PWA magento 2.3

- sudo npm i -g npx

หากพบข้อผิดพลาดเช่นนี้: ไม่พบโมดูล 'envalid' จากนั้นเรียกใช้คำสั่งต่อไปนี้

- sudo npm install i envalid
- sudo npm install envalid

หากเกิดข้อผิดพลาดเช่นนี้ให้เรียกใช้คำสั่งต่อไปนี้: lerna ERR! npm run build -s ออกจาก 1 ใน '@ 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

คุณสามารถไปที่บล็อกต่อไปนี้

วิธีการติดตั้ง Magento 2.3 PWA

มันจะอธิบายรายละเอียดเกี่ยวกับวิธีการใช้ Magento 2.3 PWA สำหรับเว็บไซต์และการใช้งานของคุณ

ตรวจสอบ Working Magento 2.3 PWA Demo