laravel react sample app

适用于 BigCommerce 的 Laravel React 应用程序

这是一个基本的 BigCommerce 应用程序，有两个屏幕、一个目录摘要视图和可以取消的订单列表，使用 Laravel 和 React 构建。

它旨在快速跟踪您将应用程序概念转化为可在 BigCommerce 控制面板中使用的内容的能力。实时商店可以在本地运行时安装此应用程序。

可以在此处阅读有关生成此应用程序所采取的步骤以及在 BigCommerce 中创建应用程序所需的步骤的演练。

先决条件和安装

在开始之前，您需要确保满足系统要求：

• PHP（安装指南）
• 作曲家（安装指南）
• Laravel（安装指南）

为了简化 PHP 开发并使您开发的应用程序能够轻松共享，您需要使用 Valet 或 Homestead，具体取决于您的操作系统：

• 本地 SSL 证书（推荐 Valet 或 Homestead 以简化设置）
  • Mac 操作系统：Valet（安装指南）
  • Windows / Linux：Homestead（安装指南）

我们将在下面的一些步骤中使用 Valet，但 Valet 和 Homestead 的托管和共享网站的功能是相似的。本教程中更重要的是如何配置 Laravel 以使用 React 并与 BigCommerce 连接。

安装 PHP 依赖项：

composer install

以及 JS 依赖：

npm install

要在 BigCommerce 商店上进行测试，您可以在 bigcommerce.com 上创建免费试用版，或通过注册成为技术合作伙伴来请求免费沙盒商店。

让 Laravel 和 React 一起运行

这是我们将为未来开发创建基线的地方：一个简单的应用程序，在浏览器中的特定 URL 加载并加载 React 组件而不是默认的 Laravel 屏幕。

创建新的 Laravel 代码库 您可以使用 Laravel 命令在 ~/Sites 目录中为应用程序创建初始样板，也可以使用 Composer：

composer global require laravel/installer
laravel new laravel-react-bigcommerce-app

或者

composer create-project laravel/laravel laravel-react-bigcommerce-app

访问应用程序地址以确保其在本地运行：

上面的命令完成后，我们需要设置目录，以便 Valet 可以安全地为应用程序提供服务。

 cd laravel-react-bigcommerce-app
valet link
valet secure

您现在应该能够在浏览器中访问以下 URL 并看到默认的 Laravel 欢迎屏幕：

https://laravel-react-bigcommerce-app.test

使用 Breeze 和 Inertia 将 React 设置为 JS 框架

Larvel Breeze 为构建具有身份验证功能的 Laravel 应用程序提供了一个最小且简单的起点。它由 Blade 和 Tailwind 提供动力，但可以使用 Inertia 配置为 SPA。在此示例中，我们将使用 React 为我们的前端提供支持。

首先我们来安装 Breeze：

composer require laravel/breeze --dev

然后我们安装react脚手架：

php artisan breeze:install react

注意：最后一个命令执行了npm install因此无需运行此命令。

最后，让应用程序运行：

npm run dev

现在您的控制台中应该可以使用Local url 来访问您的 React 应用程序

http://127.0.0.1:5173/

参考

https://laravel.com/docs/10.x/installation#your-first-laravel-project https://laravel.com/docs/10.x/starter-kits

贡献

欢迎请求请求。对于重大更改，请先打开一个问题来讨论您想要更改的内容。

执照

麻省理工学院