How to deploy React/Laravel project?

Question

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 to deploy it correctly?

Answer 1

we can simplify our task by this bash script.ssh

#!/bin/bash
#install updates
sudo  apt-get update
sudo  apt-get upgrade
#install nginx
sudo apt-get install nginx
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash
#install nodejs
sudo apt-get install -y nodejs
#status of install ndoe and nginx
node -v
sudo service nginx status
#clone repo of project in server
git clone https://github.com/your_new_project.git
cd your_new_project
npm run build 
#(first time,it downlod lib,and files )
npm run build  
#(second time,he build and run it)
cd build/
ls
ls static/
#now tell nginx server (listen :80/ root :path of build folder/ location :index.html)   

Create a project file

sudo nano /etc/nginx/sites-available/react_counter

server {
   server_name your_IP domain.com www.domain.com;
   root /home/username/React-counter-app/build;
   index index.html index.htm;
   location / {
   try_files $uri /index.html =404;
   }
}

server_name put your IP address root we use this to give the server the application located in the disk index The main file

Enable the file by linking to the sites-enabled dir

sudo ln -s /etc/nginx/sites-available/react_counter /etc/nginx/sites-enabled

Test NGINX config

$ sudo nginx -t

Restart Nginx Server

$ sudo systemctl restart nginx

Open your browser and go to http://youripaddress

Thanks for reading. @syedasadrazadevops

Answer 2

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

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

3. 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

Answer 3

Please find the steps to run app in your local machine

Step 1:

Download the code from git

Step 2:

Composer install

Step 3:

Npm install

Please do following steps if you face - cross-env NODE_ENV=development webpack --progress --hide-modules --

You need to make cross-env working globally instead of having it in the project.

1) remove node_modules folder

2) run npm install --global cross-env

3) remove "cross-env": "^5.0.1", from package.json file devDependencies section. Actually, you can skip this step and keep package.json intact. If you prefer.

4) run npm install --no-bin-links

5) run npm run dev

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

Step 4:

Npm run dev

Step 5: Php artisan serve