如何部署反应laravel项目？

我使用laravel框架作为Restful API服务器,并作为SPA客户端渲染和路由我做反应创建应用程序工具包,我构建反应项目.我按类型获取app.js和app.css文件npm run build.
1.如何使用laravel这个文件？
2.如何使用反应路由？
3.我如何正确部署它？

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

基本上,使用Laravel作为React(或JS)单页面应用程序的API后端:

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

1.a 建议使您的SPI的URL与Laravel应用程序本身可能用于页面请求或其他事物(例如"/ api/...")的普通URL 分开/不同.

1.b Laravel(5 +左右,我的例子是5.1)附带了一个叫做"Elixir"的Gulp/build工具.它的设置是在resources/...目录中查找脚本文件和视图等内容,因此我建议将脚本放在某些地方,如resources/assets/scripts/app.js等.

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(或已知)路由只是使Index页面View,我们将加载app.js ReactJS应用程序文件.

2.a值得注意的是,在我的例子中,目前我还没有实现React路由器,所以我暂时离开所有React路由.我假设这是你知道的,因为你的问题似乎是"如何使后端成为Laravel".

Route :: get('/',function(){return View :: make('pages.index');});

Route :: group(['prefix'=>'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

因为(就我所知)没有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

如果这回答了你的问题,请告诉我.

干杯.