Magento 2.3.0中的PWA设置

1. 我们如何在Magento 2.3.0中使用它？
2. 在Magento 2.3.0中，他们声称PWA受支持吗？
3. 我们如何从这个强大的功能开始体验新事物？

更多参考

**让我们开始使用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主题，它将作为[PWA Venia主题] [25]的父主题。

• 现在，让我们克隆基础pwa主题存储库。

4.创建目录app/design/frontend/Magento/pwa并在此处复制基本主题的所有文件和目录。

• 让我们检查基本主题是否可用。

• Run: php bin/magento setup:upgrade

• 并导航到您的Magento 管理员->内容->主题

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.现在，导航到pwa-studio项目的venia-concept目录，将其复制.env.dist到新.env文件中，并使用URL将变量更新到您的Magento开发商店。

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而不是React。它还使用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在react文件中包含原始的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：它似乎在一个月前发展很快，在制品数量很多，而今天，我可以看到缺少的sass集成。如果您准备与Magento社区一起学习和构建此PWA，则第二种选择可能会更好。

首先使用以下命令安装Node js最新版本

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

现在转到Magento Root目录：

- 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在'@ 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

您可以转到以下博客。

如何设置Magento 2.3 PWA

此外，它将详细说明如何将Magento 2.3 PWA用于您的网站和使用。

检查工作 Magento 2.3 PWA演示