How to deploy React/Laravel project?

I can answer your questions and have an example.

Basically, to use Laravel as an API backend for a React (or JS) Single-Page application:

  1. 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:

https://laravel.com/docs/5.1/elixir

  1. 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);
  1. 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

Tags:

Php

Laravel

Reactjs

Laravel 5

Recent Posts