Magento 2.3.0'da PWA Kurulumu

1. Magento 2.3.0'da nasıl kullanabiliriz?
2. Magento 2.3.0'da PWA'nın desteklendiğini iddia ediyorlar mı?
3. Yeni şeyi deneyimlemek için bu harika özellikle nasıl başlayabiliriz?

Daha fazla referans için

** PWA ile Magento 2.3 kurulumuyla başlayalım **

1. DIR / var / www / html / (m230, Magento 2.3 dizinimdir) dizinine şu komutu girin:

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

2. Magento'yu Komut Satırı ile kurun:

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 Venia teması] için ebeveyn olacak temel pwa teması oluşturun. [25]

• Şimdilik klon temel pwa tema deposunu edelim.

4. Dizin oluşturun app/design/frontend/Magento/pwave temel temanın tüm dosya ve dizinlerini buraya kopyalayın.

• Temel temanın kullanılabilir olup olmadığını kontrol edelim.

• Run: php bin/magento setup:upgrade

• Ve Magento Yönetici-> İçerik-> Temalarınıza gidin

5. PWA stüdyo projesini indirin.

6. Magento kurulumunuzun kök dizinine gidin ve projenin modül dizinine (pwa-studio / Packages / pwa-module) bağlanan bir Pwa symlink klasörü oluşturun.

• Bu dizinden komutumu çalıştırıyorum - / var / www / html / m230

• Bu benim pwa indirilen kaynak / var / www / html / PWA /

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

Tema temasını da bağlayın. Magento kurulumunuzun kök dizinine gidin ve projenin modül dizinine (pwa-studio / paketleri / venia-concept) bağlayan bir Pwa symlink klasörü oluşturun.

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

8. Şimdi pwa-studio projenizin venia-concept dizinine gidin, .env.distyeni bir .envdosyaya kopyalayın ve URL ile değişkenleri Magento geliştirme mağazanıza güncelleyin.

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

cp .env.dist .env

9. venia tema ve Pwa Modülü yükleyin:

run: php bin/magento setup:upgrade

venia temasının başarıyla yüklendiğini görebiliriz.

10. venia temasını yapılandırın admin->Content->Configuration

11. path ( /var/www/html/PWA/pwa-studio) çalıştırmasına gidin :

npm install

veya

npm install webpack-dev-server -g

12. Ve Son olarak Şuraya Git: /var/www/html/PWA/pwa-studio/packages/venia-concept

npm start

Tebrikler! Venia tema projesi için geliştirme ortamınızı oluşturdunuz.

En kısa sürede üretime hazır bir şeye ihtiyacınız varsa: Sistem Vue Store Front'u kurdum ve kullandım (açık kaynak sistemi, birkaç isabetli ve özlememe rağmen sorulara gevşek cevaplarla ulaşılabilir, ancak genel olarak sistem bu aşamada çok yararlıdır PWA entegrasyonunun)

-> Tepki yerine Vue kullanır. Ayrıca, Elastik Arama ve Docker'ı da kullanır. Genel olarak, bu sistem öncelikle Rest API aracılığıyla Magento 2'ye bağlanıyor (ve GraphQL ile bir başlangıç ​​var)

başlamak:

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

cd vue-storefront
yarn install
npm run installer

ve yarn devönbelleği temizlemek için, ancak bir izleme işlemi gibi birkaç saniye sonra vue değişiklikleri derlenmelidir.

Tabii ki, Magento 2'nin inşa ettiği PWA da harika ama maalesef hızlı hareket ediyor ve VS ile ne zaman yarışmaya hazır olacağı belli değil (sistem üstü).

-> Graphql öğrenmek için daha iyi buldum ve özelleştirmek için daha kolay buldum ama o zamanlar yanlış bir sebepti, bu PWA tepki dosyalarında ham css vardı.

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

npm install

magento 2.3 kurulumunuzda Venia Örnek Verilerini kurmanız gerekir (bkz. 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

ve burada yepyeni bir PWA hazır olmalı: bir ay önce hızlı hareket ediyor gibi görünüyor, çok fazla WIP vardı ve bugün, örneğin eksik olan sass entegrasyonunu görebiliyorum. Magento topluluğu ile bu PWA'yı öğrenmeye ve oluşturmaya hazırsanız, bu ikinci seçenek daha iyi olabilir

Her şeyden önce, aşağıdaki komutu kullanarak Node js son sürümünü yükleyin

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

Şimdi Magento Kök dizinine gidin:

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

PWA klon dizinini indirin ve aşağıdaki komutları kullanarak npm'yi bu dizine yükleyin

- 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 bulunamadı hatası PWA magento 2.3

- sudo npm i -g npx

hata şu şekilde bulunursa: 'envalid' modülü bulunamıyor ve ardından aşağıdaki komutu çalıştırın

- sudo npm install i envalid
- sudo npm install envalid

böyle bir hata varsa aşağıdaki komutu çalıştırın: lerna ERR! npm run build -s, '@ magento / venia-concept' da 1 numaradan çıktı

- 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

Aşağıdaki bloga gidebilirsiniz.

Magento 2.3 PWA Kurulumu

Ayrıca, web siteniz ve kullanımınız için Magento 2.3 PWA'nın nasıl kullanılacağı hakkında ayrıntılı olarak açıklanacaktır.

Magento 2.3 PWA Demosunu Kontrol Edin