Thiết lập PWA trong Magento 2.3.0

1. Làm thế nào chúng ta có thể sử dụng nó trong Magento 2.3.0?
2. Trong Magento 2.3.0, họ cho rằng PWA được hỗ trợ?
3. Làm thế nào chúng ta có thể bắt đầu với tính năng tuyệt vời này để trải nghiệm điều mới?

Để tham khảo thêm

** Hãy bắt đầu với cài đặt Magento 2.3 với PWA **

1. Nhập lệnh sau vào DIR / var / www / html / (m230 là thư mục Magento 2.3 của tôi):

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

2. Cài đặt Magento theo dòng lệnh:

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. Tạo chủ đề pwa cơ sở sẽ là cha mẹ của chúng cho [chủ đề PWA Venia.] [25]

• Để bây giờ cho phép kho lưu trữ chủ đề pwa cơ sở.

4. Tạo thư mục app/design/frontend/Magento/pwavà sao chép tất cả các tập tin và thư mục của chủ đề cơ sở ở đây.

• Hãy kiểm tra chủ đề cơ sở có sẵn hay không.

• Run: php bin/magento setup:upgrade

• Và điều hướng đến Quản trị viên Magento của bạn-> Nội dung-> Chủ đề

5. Tải về dự án studio PWA.

6. Điều hướng đến thư mục gốc của cài đặt Magento của bạn và tạo thư mục liên kết tượng trưng Pwa liên kết đến thư mục mô-đun của dự án (pwa-studio / gói / pwa-mô-đun).

• từ thư mục này tôi chạy lệnh của tôi - / var / www / html / m230

• Đây là thư mục chứa nguồn tải xuống pwa của tôi là / var / www / html / PWA /

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

7. Liên kết thư mục chủ đề. Định hướng đến thư mục gốc của cài đặt Magento của bạn và tạo thư mục liên kết tượng trưng Pwa liên kết đến thư mục mô-đun của dự án (pwa-studio / gói / venia-concept).

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

8. Bây giờ điều hướng đến thư mục khái niệm venia của dự án pwa-studio của bạn, sao chép .env.distvào một .envtệp mới và cập nhật các biến với URL vào cửa hàng phát triển Magento của bạn.

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

cp .env.dist .env

9. Cài đặt chủ đề venia và Mô-đun Pwa:

run: php bin/magento setup:upgrade

chúng ta có thể thấy chủ đề venia được cài đặt thành công.

10. Cấu hình chủ đề venia từ admin->Content->Configuration

11. Điều hướng đến đường dẫn ( /var/www/html/PWA/pwa-studio) chạy:

npm install

hoặc là

npm install webpack-dev-server -g

12. Và cuối cùng điều hướng đến /var/www/html/PWA/pwa-studio/packages/venia-concept

npm start

Xin chúc mừng! Bạn đã thiết lập môi trường phát triển của mình cho dự án chủ đề Venia.

Nếu bạn cần một cái gì đó sẵn sàng để sản xuất càng sớm càng tốt: Tôi đã cài đặt và sử dụng hệ thống Vue Store Front (hệ thống nguồn mở, cộng đồng có sẵn thông qua các câu trả lời chậm chạp cho các câu hỏi mặc dù tôi đã có một vài lần nhấn và bỏ lỡ nhưng nói chung hệ thống rất hữu ích ở giai đoạn này của hội nhập PWA)

-> Nó sử dụng Vue chứ không phải React. Và nó cũng sử dụng ElasticSearch và Docker. Nhìn chung, hệ thống này đang kết nối chủ yếu với Magento 2 thông qua API nghỉ ngơi (và bắt đầu với GraphQL)

để bắt đầu:

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

cd vue-storefront
yarn install
npm run installer

và sau đó yarn devđể xóa bộ đệm nhưng các thay đổi vue nên được biên dịch sau vài giây như một quy trình xem.

Tất nhiên, PWA mà Magento 2 xây dựng cũng rất tuyệt nhưng thật không may, nó đang di chuyển nhanh và không rõ khi nào nó sẽ sẵn sàng cạnh tranh với VS (hệ thống trên).

-> Tôi đã thấy tốt hơn khi học graphql và có thể dễ dàng tùy chỉnh hơn nhưng có thể vì lý do sai tại thời điểm đó, PWA này đã có css thô trong các tệp phản ứng.

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

npm install

trên bản cài đặt magento 2.3 của bạn, bạn cần cài đặt Dữ liệu mẫu Venia (xem 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

và ở đây bạn nên chuẩn bị một PWA hoàn toàn mới: nó dường như di chuyển nhanh như một tháng trước, có rất nhiều WIP và ngày nay, tôi có thể thấy sự tích hợp sass bị thiếu. Tùy chọn thứ hai này có thể tốt hơn nếu bạn sẵn sàng tìm hiểu và xây dựng PWA này với cộng đồng Magento

Trước hết cài đặt Node js phiên bản mới nhất bằng lệnh sau

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

Bây giờ hãy vào thư mục Magento Root:

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

Tải xuống thư mục bản sao PWA và cài đặt npm vào thư mục này bằng các lệnh sau

- 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

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

nếu không tìm thấy npx lỗi PWA magento 2.3

- sudo npm i -g npx

nếu tìm thấy lỗi như thế này: Không thể tìm thấy mô-đun 'envalid' thì hãy chạy lệnh sau

- sudo npm install i envalid
- sudo npm install envalid

nếu lỗi như thế này thì chạy lệnh sau: lerna ERR! npm run build -s đã thoát 1 trong '@ 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

Bạn có thể vào blog sau.

Cách cài đặt Magento 2.3 PWA

Ngoài ra, nó sẽ giải thích chi tiết về cách sử dụng Magento 2.3 PWA cho trang web của bạn và sử dụng.

Kiểm tra Magento 2.3 PWA Demo