search

BuildForSDG / Phenom-Frontend

Team-056 frontent solution for BuildForSDG 2020 Innovation challenge.
MIT License
0 stars 5 forks source link

Information on React with Laravel(Lumen) #4

Closed onyijne closed 4 years ago

onyijne commented 4 years ago

Information needed to serve as guide A brief research on using React with Laravel(Lumen) would be helpful as a guide to us while building our solution.

What information do we need We need information on technical guides, what will work best and any known challenge and how to fix it if any.

prominded commented 4 years ago

Lumen, being a micro framework for developing microservices in laravel ecosystem does not require any special integration with React. React consumes lumen services much like any other services.

So if our backend application is developed as microservices using lumen, React simply make api calls using tools like axios to fetch data from d server & render it in DOM. However, oAuth or built-in Api authentication should be setup to control access to the Api services.

Laravel may also be setup as a full stack MVC web framework; we may then require very specific React integration since laravel comes shipped with Vuejs by default.

So, I ll prepare notes on integrating React with Laravel should we require the MVC framework option in our project, but using React with Lumen micro framework is generally through api calls.

onyijne commented 4 years ago

Okay thanks, if by 8pm no update from @maryabik then the backend framework will be assigned to @bhimbho

prominded commented 4 years ago

Using React with Laravel/Lumen Web Framework

/ Before setting up React, open and observe the contents of the default vue files in resources/js/app.js and resources/js/components/ExampleComponent.vue in Laravel project using your preferred IDE (Visual studio code or phpstorm) /

/ Open a command prompt on the Laravel application root and execute this command on php artisasan /

$ php artisan preset react

/The above command configures react to be used instead of vue./

/ The default vue file resources/js/components/ExampleComponent.vue will been replaced with resources/js/components/Example.js, while the the content of resources/js/app.js was modified to use react components /

/ Run "npm install" to install all the required javascript packages and react dependencies /

$ npm install

/ The above command generates a node_modules directory and other config files in your project root to manage and track node dependencies /

/ Rename Example.js to index.js in resources/js/components /

/ Change the line "require('./components/Example')" in app.js to "require('./components/Index')" /

/ To start dev. server and test application, run comnand below /

$ php artisan serve

onyijne commented 4 years ago

@uchennaibekwe is of the view we stick to Lumen.

onyijne commented 4 years ago

it’s been resolved we go with Lumen.
Please help us with a brief guide on detecting an authenticated user