1

I have two react projects created by create-react-app kit which both will use same database and some shared models. For backend i've created one Laravel project and in it's public directory i've put React projects :

--Laravel project
 |-- app
 |-- bootstarp
 ...
 |-- public
   |-- frontend (react app)
   |-- panel (react app)
   |-- index.php (Laravel's index)
 ...
 |-- vendor
 |-- .env

Since i'm going to use Laravel just for REST api, i've set up 3 domains like :

frontend.local
panel.frontend.local
api.frontend.local

The reason for doing this, is that i don't want to recreate database or shared models for each project and right now everything works great. I can access projects and i can send api requests too. So my question is : Is this approach good ? and if it's not, how can i have one instance of Laravel app for two react apps.

Improve this question
4
  • Why don't you use Laravel Mix and just compile two react projects? Or just keep two separate instances of CRA. Commented Oct 3, 2017 at 16:54
  • Honeslty i'm new to Laravel and as long as i know react mix has a syntax like mix.react('app.jsx', 'public/js') but my react projects dont have an app.jsx and components are chunked into several js files in static/js.The reason for doing this is to only fetch required components when user visit the app. So i think if i use mix, it would put them all into one file again, am i right ? Commented Oct 3, 2017 at 17:12
  • You can mix and export multiple files. You only need to specify the entry point to each of the files as this is the best way to make your web apps extendable in the future. Have you looked into webpack code splitting? @Armin Commented Oct 7, 2017 at 15:37
  • @Win What i have right now is mix.react('resources/assets/js/app.js', 'public') and in app.js i have require('./bootstrap'); require('./src/main.8707543e'); This /main.8707543e is my entry point and loads other chunks when required. All other static files (chunks) are in public/static/. Right now everything works but i'm not sure if i'm doing it correctly. For code splitting i'm using github.com/thejameskyle/react-loadable to make my app load components on demand. Commented Oct 9, 2017 at 8:25

1 Answer 1

Reset to default
1

It might came late but i hope i solved it following this process.

  1. create a blabe view for each domain. i.e (frontend.blade.php, panel.blabe.php) in your view folder.
  2. cd into your resource folder in your laravel package and do a new react installation for only the panel using npx create-react-app panel, and use the laravel command for react to php artisan ui react. with this we now have two react application in one laravel. your resource folder should have a js folder and a panel folder now.
  3. Go to your public directory and create two folders frontend and panel respectively
  4. go to your webpack.mix.js file in your root laravel directory and add this line of code mix.react('resources/js/app.js', 'public/frontend/js') .react('resources/panel/src/index.js', 'public/panel/js') .sourceMaps();
  5. Now head back to your blade templates and call each javascript into the body i.e
    <body>
        <div id="root"></div>
        <script src="{{ asset('panel/js/app.js') }}"></script>
    </body>

for the panel, and

    <body>
        <div id="root"></div>
        <script src="{{ asset('frontend/js/app.js') }}"></script>
    </body>

for the front end.

  1. Lastly use each independent route to return each view page and run npm run watch. You can read more using the laravel mix documentation.
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.