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:
- 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
- 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 installnpm installcp .env.example .envgulpphp artisan servevisit http://localhost:8000
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
we can simplify our task by this bash script.ssh
#!/bin/bash#install updatessudo apt-get updatesudo apt-get upgrade#install nginxsudo apt-get install nginxcurl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash#install nodejssudo apt-get install -y nodejs#status of install ndoe and nginxnode -vsudo service nginx status#clone repo of project in servergit clone https://github.com/your_new_project.gitcd your_new_projectnpm run build #(first time,it downlod lib,and files )npm run build #(second time,he build and run it)cd build/lsls 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 addressroot we use this to give the server the application located in the diskindex 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 -tRestart Nginx Server
$ sudo systemctl restart nginxOpen your browser and go to http://youripaddress
Thanks for reading.