如何部署反應laravel項目？

我使用laravel框架作爲Restful API服務器，並作爲SPA客戶端呈現和作出反應，我已經使用了反應創建應用程序工具包，我構建了反應項目。我通過類型npm run build獲取app.js和app.css文件。
1.如何使用laravel文件？
2.如何使用反應路由？
3.如何正確部署它？如何部署反應laravel項目？

來源

2017-06-04 Eslam Tahoon

我早些時候看到你的問題，但我延遲迴答，所以我可以給你一個更完整的答案。我可以回答你的問題，並有一個我希望可以幫助的例子。

基本上，使用Laravel作爲API後端的陣營（或JS）單頁的應用程序：

設置一個Laravel項目 - 它的後端，所以設置它和路線你想

1.A 建議讓您的網址爲SPI 單獨/不同從正常的網址，您的Laravel應用程序本身可能用於網頁請求或其他東西（如「/ API/...」）。

1.b Laravel（5+左右，我的例子是5.1）帶有一個名爲「Elixir」的Gulp/build工具。它設置爲在resources/...目錄中查找腳本文件和視圖等內容，因此我建議將腳本放在某處，如resources/assets/scripts/app.js或其他東西。

1.C（構建過程）假設你把你的陣營腳本資源/資產/腳本，那麼當你運行「吞掉」和藥劑任務運行用於構建應用程序，它將把捆綁，應用程序.js文件轉換成public/js/app.js - 默認情況下，Laravel視圖將public /目錄視爲其根目錄，因此您可以在索引頁面中將該構建文件引用爲「js/app.js」。

1.D如果咕嘟咕嘟或藥劑不熟悉的，我鼓勵你給這個頁面讀取的概述：

https://laravel.com/docs/5.1/elixir
設置爲Laravel的途徑，你的索引頁和API的東西。我建議將路由'/'和所有非API（或已知）路由設置爲索引頁面視圖，我們將在其中加載app.js ReactJS應用程序文件。

2.a值得注意的是，在我的例子中，目前我還沒有實現React Router，所以我現在只剩下所有的React路由。我認爲這是你知道的，因爲你的問題似乎是「如何讓後端成爲Laravel」。

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

路線::組（[ '前綴'=> 'API']，函數（）{
```
Route::get('tasks', '[email protected]'); 
```
}）;

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/[email protected]/dist/react.js"></script> --> 
    <!-- <script src="https://unpkg.com/[email protected]/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的本地開發版+迴應以說明我製作這種應用程序的方式，您似乎要求。它目前託管在我的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

請讓我知道如果這個回答您的問題或沒有。

乾杯。

來源

2017-06-08 18:48:08 RoboBear

謝謝你救了我 –

沒問題！我很高興它幫助！ – RoboBear

如何部署反應laravel項目？

回答

相關問題