Question

我使用laravel框架作为Restful API服务器，并作为SPA客户端渲染和路由我已经使用react create app kit，我构建反应项目。我按类型{{1}获取app.js和app.css文件}。
1.如何将此文件与laravel一起使用？
2.如何使用反应路由？
3.我如何正确部署？

Answer 1

我之前看到了你的问题，但我推迟了回答，所以我可以给你一个更完整的答案。我可以回答你的问题并有一个我希望有帮助的例子。

基本上，使用Laravel作为React（或JS）单页应用程序的API后端：

设置一个Laravel项目 - 它是后端，所以设置它和你想要的路线

1.a 建议为您的Laravel应用程序本身可能用于页面请求或其他事物（例如“/”）的常规URL提供SPI 单独/不同的URL API /...").

1.b Laravel（5 +左右，我的例子是5.1）附带了一个叫做“Elixir”的Gulp / build工具。它的设置是在resources / ...目录中查找脚本文件和视图等内容，因此我建议将脚本放在某些地方，如 resources / assets / scripts / app.js 或其他。< / p>
1.c（构建过程）假设您将React脚本放在 resources / assets / script 中，那么当您运行“gulp”并运行Elixir任务来构建应用程序时，它将放置捆绑的app.js文件到 public / js / app.js - 默认情况下，Laravel视图将public /目录视为其根目录，因此您可以在索引页中引用该构建的文件作为“js / app.js”。

1.d如果您不熟悉Gulp或Elixir，我建议您阅读此页面以获取概述：

https://laravel.com/docs/5.1/elixir
设置Laravel路由，索引页面和API内容。我建议路由'/'和所有NON-API（或已知）路由只是创建索引页面View，我们将加载app.js ReactJS应用程序文件。

2.a值得注意的是，在我的示例中，目前，我还没有实现React路由器，因此我暂时不会让所有React路由都离开。我认为这是你知道的，因为你的问题似乎是“如何使后端成为Laravel”。

Route :: get（'/'，function（）{return View :: make（'pages.index'）;}）;

Route :: group（['prefix'=＆gt;'api']，function（）{
```
Route::get('tasks', 'TodosController@index');
```
}）;

2.b设置路由以将请求映射到控制器操作，您可以在其中自定义响应。例如，您可以使用JSON响应JSON API：

<强> TodosController @索引

$current_tasks = array(
            array("id" => "00001", "task" => "Wake up", "complete" => true),
            array("id" => "00002", "task" => "Eat breakfast with coffee power", "complete" => true),
            array("id" => "00003", "task" => "Go to laptop", "complete" => true),
            array("id" => "00004", "task" => "Finish React + Laravel Example app", "complete" => false),
            array("id" => "00005", "task" => "Respond on StackOverflow", "complete" => false)
        );


        return response()->json($current_tasks);

就部署而言，您可能需要构建代码（我的示例）并将构建的版本的代码加载到您的生产索引页面或任何地方。您还将整体部署为laravel应用程序 - 您希望Laravel首先在外部看到路由，并希望React处理它自己的URL和路由。这样，比如说扩展SPA但需要相同的后端，只需在路由文件中将路由添加到Laravel应用程序作为例外/覆盖。

<强>资源/页/ index.blade.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>BLaravel 5.1 + ReactJS Single-Page App</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
    <link rel="stylesheet" href="css/app.css" />

    <!-- BACKUP SCRIPT CNDS, for React -->
    <!-- <script src="https://unpkg.com/react@15/dist/react.js"></script> -->
    <!-- <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> -->

  </head>
  <body>

    <!-- Container for React App -->
    <div class="container" id="react-app-container"></div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="js/app.js"></script>


  </body>
</html>

因为（就我所知）没有Plnkr这类东西，我制作了Laravel + React的本地开发版本来说明我制作你似乎要求的应用程序的方式。它目前托管在我的GitHub帐户上，因此请随意克隆它并按照自述文件使用它，如果它有帮助，或要求编辑/帮助/澄清。

https://github.com/b-malone/Laravel5-ReactJS-Boilerplate.git

构建/设置命令（参考） git clone ... [TEST/] && cd into [TEST/] composer install npm install cp .env.example .env gulp php artisan serve visit http://localhost:8000

如果这回答了你的问题，请告诉我。

干杯。

Answer 2

请找到在本地计算机上运行应用程序的步骤

第1步：

从git下载代码

第2步：

作曲家安装

第3步：

Npm安装

如果遇到问题，请执行以下步骤-跨环境NODE_ENV = development webpack --progress --hide-modules-

您需要使cross-env全局运行，而不是将其包含在项目中。

1）删除node_modules文件夹

2）运行npm install --global cross-env

3）从package.json文件devDependencies部分中删除“ cross-env”：“ ^ 5.0.1”。实际上，您可以跳过此步骤并保持package.json不变。若你宁可。

4）运行npm install --no-bin-links

5）运行npm运行开发

Laravel 5.4 ‘cross-env’ Is Not Recognized as an Internal or External Command

第4步：

Npm run dev

第5步： php工匠服务

如何部署反应laravel项目？

2 个答案: