如何部署React laravel项目? [英] How to deploy react laravel project?
问题描述
我将laravel框架用作Restful API服务器，并作为SPA客户端渲染进行响应，并使用我使用react create app kit进行路由时，构建了react project.按类型npm run build获取app.js和app.css文件.
1.如何在laravel中使用此文件?
2.如何使用React路由?
3.我如何正确部署它?
我早些时候看到了您的问题，但是我推迟了回答，所以我可以给您更完整的答案.我可以回答您的问题，并举一个例子，希望对您有所帮助.
基本上，要将Laravel用作React(或JS)单页应用程序的API后端:
-
设置一个Laravel项目-它是后端，因此设置它以及所需的路线
1.a 建议将SPI的URL与您的Laravel应用本身可能用于页面请求或其他用途(例如"/api/...").
1.b Laravel(大约5岁以上，我的示例是5.1)与一个名为"Elixir"的Gulp/构建工具打包在一起.它的设置是在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，建议您阅读此页面以获取概述:
-
设置Laravel的路由，索引页面和API内容.我建议路由"/"和所有NON-API(或已知)路由以仅创建索引"页面视图，在该视图中，我们将加载app.js ReactJS应用程序文件.
2.a值得注意的是，在我的示例中，目前我还没有实现React Router ，因此我暂时不考虑所有React路由.我假设这是您所知道的，因为您的问题似乎是如何使后端成为Laravel".
Route :: get('/'，function(){return View :: make('pages.index');});
Route :: group(['prefix'=>'api']，函数(){
Route::get('tasks', 'TodosController@index');});
2.b设置路由以将请求映射到控制器操作，您可以在其中自定义响应.例如，您可以使用JSON来响应JSON API:
TodosController @ index
$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首先在外部看到Routes，并希望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帐户上，因此可以随时克隆它，并按照README的要求使用它(如果有帮助的话)，或要求进行编辑/帮助/说明.
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
请告诉我这是否回答了您的问题.
干杯.
I use laravel framework as Restful API server, and react as SPA client render and for routing i have used react create app kit, I build react project.I get app.js and app.css files by type npm run build.
1.How to use this file with laravel?
2.how use react routing ?
3.How i deploy it correctly?
I saw your question earlier, but I delayed answering so I could give you a more complete answer. I can answer your questions and have an example that I hope helps.
Basically, to use Laravel as an API backend for a React (or JS) Single-Page application:
setup a Laravel project - it's the backend, so setup it and the routes you want
1.a Suggestion Make your URLs for the SPI separate/distinct from normal URLs your Laravel app itself might use for page requests or other things (such as "/api/...").
1.b Laravel (5+ or so, my example is 5.1) comes packaged with a Gulp/build tool called "Elixir". It's setup to look for things like scripts files and views in the resources/... directory, so I suggest putting your scripts in some place like resources/assets/scripts/app.js or something.
1.c (Build Process) Assuming you put your React scripts in resources/assets/script, then when you run "gulp" and the Elixir task runs for building the app, it will put the bundled, app.js file into public/js/app.js -- Laravel views by default think of the public/ directory as their root directory, so you can reference that built file in your index page as "js/app.js".
1.d If Gulp or Elixir are unfamiliar to you, I encourage you to give this page a read for an overview:
setup the Routes for Laravel, your Index page and the API stuff. I suggest routing '/' and all NON-API (or known) routes to just make the Index page View, where we'll load the app.js ReactJS application file.
2.a It's worth noting that in my example, currently, I have not implemented the React Router, so I'm leaving all React routes alone for the moment. I'm assuming this is something you know since your questions seems to be "how to make the Backend be Laravel".
Route::get('/', function () { return View::make('pages.index'); });
Route::group(['prefix' => 'api'], function () {
Route::get('tasks', 'TodosController@index');});
2.b Setup the Routes to map requests to controller actions, where you can customize your response. For example, you can respond with JSON for a JSON API:
TodosController@index
$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);
- As far as deployment goes, you'll probably need to build the code (my example does) and load the built version of the code into your production Index page or wherever. You'll also deploy it overall as a laravel app -- you want Laravel seeing the Routes first externally and want React to handle it's own URLs and routes. This way, say you expand the SPA but want the same backend, you just add routes to your Laravel app as exceptions/overrides in the routes file.
resources/pages/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>
Because there's (as far as I know) no Plnkr for this sort of thing, I made a local development version of Laravel + React to illustrate my way of making the kind of app you seem to be asking for. It's currently hosted on my GitHub account, so feel free to clone it and follow the README and use it if it helps, or ask for edits/help/clarification.
https://github.com/b-malone/Laravel5-ReactJS-Boilerplate.git
Build/Setup Commands (Reference)
git clone ... [TEST/] && cd into [TEST/]
composer install
npm install
cp .env.example .env
gulp
php artisan serve
visit http://localhost:8000
Please let me know if this answers your questions or not.
Cheers.
这篇关于如何部署React laravel项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
