Magento 2.3.0でのPWAのセットアップ


9
  1. Magento 2.3.0でどのように使用できますか?
  2. Magento 2.3.0では、PWAはサポートされていると主張していますか?
  3. この優れた機能から新しいことを体験するにはどうすればよいでしょうか。

magento pwa studioに基づいたプロジェクトを作成する必要があります。詳細についてはmagento.stackexchange.com / a / 299021/27183を確認してください
santhoshnsscoe

回答:


8

詳細については

** PWAを使用したMagento 2.3のインストールから始めましょう**

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をインストールします。

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テーマ]の親となるベースPWAテーマを作成します。

  • とりあえず、ベースのPWAテーマリポジトリを複製しましょう。

4.ディレクトリapp/design/frontend/Magento/pwaを作成し、ここにベーステーマのすべてのファイルとディレクトリをコピーします。

  • 基本テーマが利用可能かどうか確認してみましょう。

  • Run: php bin/magento setup:upgrade

  • Magentoの[管理]-> [コンテンツ]-> [テーマ]に移動します

5. PWAスタジオプロジェクトをダウンロードします。

6. Magentoインストールのルートディレクトリに移動し、プロジェクトのモジュールディレクトリ(pwa-studio / packages / pwa-module)にリンクするPwa symlinkフォルダーを作成します。

  • このディレクトリからコマンドを実行します- / 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-studio / packages / venia-concept)にリンクするPwa symlinkフォルダーを作成します。

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

8.次に、pwa-studioプロジェクトのvenia-conceptディレクトリに移動.env.distし、新しい.envファイルにコピーして、Magento開発ストアのURLで変数を更新します。

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テーマプロジェクトの開発環境を設定しました。


私は同じステップに従いました。この後、PwadevserverフロントエンドURLを取得しましたが、そのURLで到達できません。添付のスクリーンショットをご覧ください。prnt.sc/m4tlbx
user00247


セットアップが成功すると、pwaを表示できる新しいpwadevserverurlが表示されますが、プロジェクトのベースURLを実行すると、デフォルトのmagentoテーマが表示されます。だから私は私のベースURLでpwaをどのように実行できますか?私のベースURLはlocalhost / M231で、糸のビルド後、新しいURLは0.0.0.0:10000です。
サティシュドゥバリヤ

@Aditya Shah、上記のチュートリアルを使用して、Xamppのローカルホストに設定できますか?
Sanjay Gohil

cp .env.dist .env --------- getting error .env.dist ':No such file or directory
Shomita

4

すぐに本番環境で使用できるものが必要な場合:私はシステムVue Store Front(オープンソースシステム、コミュニティへの質問への回答が少ない)をインストールして使用しましたが、ヒットとミスがいくつかありましたが、この段階ではシステム全体が非常に便利ですPWA統合の)

-> ReactではなくVueを使用します。また、ElasticSearchとDockerも使用します。全体として、このシステムは主にRest APIを介してMagento 2に接続しています(そして、GraphQLから始めています)

始めるには:

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

cd vue-storefront
yarn install
npm run installer

その後、yarn devキャッシュをフラッシュするが、VUEの変更は、時計のプロセスのようないくつかの秒後にコンパイルする必要があります。

もちろん、Magento 2が作成するPWAも素晴らしいですが、残念ながら速く動いており、いつVS(システム上)と競合する準備ができるかは明確ではありません。

-> graphqlを学ぶ方が適切であり、おそらくカスタマイズが容易であることがわかりましたが、それはおそらく間違った理由であった可能性があります。このPWAは、反応ファイルに未加工のCSSを含んでいました。

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

npm install

magento 2.3インストールでは、Venia Sample Dataをインストールする必要があります(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を準備する必要があります。1か月前のように速く動いているように見えます。多くのWIPがあり、今日では、たとえば欠落していたsass統合を確認できます。この2番目のオプションは、MagentoコミュニティーでこのPWAを学び、構築する準備ができている場合に適しています。


このURLを取得するコマンドを実行しているとき---- magento-venia-concept-nbypk.local.pwadev:8884 @Herveこれを手伝ってくれますか?
Shomita

4

まず、次のコマンドを使用してNode js最新バージョンをインストールします

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

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 not foundエラーPWA magento 2.3の場合

- sudo npm i -g npx

このようなエラーが見つかった場合:モジュール 'envalid'が見つからない場合は、次のコマンドを実行します

- sudo npm install i envalid
- sudo npm install envalid

このようなエラーが発生した場合は、次のコマンドを実行します。lernaERR!npm run build -sは '@ magento / venia-concept'で1を終了しました

- 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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.