How to display React Components with laravel routes?

JavaScript
,
1

I installed React within laravel…Everything is cool and setup but I am facing a big confusion here!

I’ve learned about page routing in laravel and I’ve done the following:

  1. Created HomeController.php file:
<?php 
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller {

    #Home page
    public function index() {
        return view('welcome');
    }
    #About page
    public function about() {
        return view('shared.main.about');
    }
    #FAQ Page
    public function faq() {
        return view('shared.main.faq');
    }
}
?>
  1. Created about.blade.php
<div class="panel panel-default about-panel">
	ABOUT
</div>
  1. Created a Route in web.php
Route::get('/', 'HomeController@index')->name('index');
Route::get('/about', 'HomeController@about')->name('about');
Route::get('/faq', 'HomeController@faq')->name('faq');```

The confusion I have is:
How do I display the `About.js` React page instead of creating about.blade.php?

or should I create it and then add `<script src={{asset('js/About.js')}}></script>`?
Even though I did this and it didn't work.

Or should I just ignore that and use React Router without worrying about laravel Route?

Also since I've read to many tutorials of "React Router with laravel" I got more confused. A help will be appreciated :slight_smile: 

Thank you
2

Yup, do that. The whole point of using React is to build a SPA, so declare one route one the server and render your React app onto that page.

If you need additional client-side routing, use React router. The only caveat here is that you’ll have to declare additional routes on the server too (in case the page is loaded directly) and forward them accordingly.

2 Likes
3

I would recommend to set-up the project as two separate code bases. The Laravel code base as the rest api and the react one as your front-end. Its not very typical to merge the two into a single project when building a progressive web app. Not to mention this decouples one from the other making it easier to swap out one or the other in the future with newer technologies or languages.

4

To be fair, they are relatively decoupled this way. Aside from the API and associated logic, all you’re doing in the Laravel app is declaring a couple or routes and one view to render the React app into.

If you wanted to swap out the backend for Rails, for example, you should be able to drop the React app into a Rails project (which implements the same API) and with minimal configuration, have things work.

1 Like
5

Perhaps for a single developer but if this project were split between a team I would prefer the PHP back-end devs to manage only the REST API and front-end devs only worry about the front-end. Separating the project into two separate repositories / code bases fulfills those goals easier than having one single repo.

2 Likes
6

Fair enough, but at what point would you hook the two together? When you’re developing locally it’d be easy enough to start two servers and make requests from one to the other, but when it comes to deployment, you’ll want everything on the same domain. I’m not familiar with Laravel, so how would one handle things in this case?

7

The REST API doesn’t have to be on the same domain and in most cases isn’t. You can use CORS to bypass the cross-origin policy restrictions on http requests to other domains on the client side. There is a package in Laravel to do just that.

8

The REST API doesn’t have to be on the same domain and in most cases isn’t. You can use CORS to bypass the cross-origin policy restrictions

Yeah, CORS isn’t really the problem, rather that hosting the apps on separate domains introduces some degree of latency. This is probably not a problem if your app doesn’t make many network requests, but otherwise, I would have thought that serving the React app from within the Laravel app was an easy win.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.