Type the following command in your newly created Laravel 5.5 project:
php artisan preset react
Done with it? See your package.json
updated? Great, don't close it! We have some work to do there. In your devDependencies
; add the following:
"bootstrap": "^4.0.0-beta",
"popper.js": "^1.12.6",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"reactstrap": "^5.0.0-alpha.3",
"redux": "^3.7.2",
"redux-form": "^7.1.1"
Once you're done with the above, notice I have added Bootstrap 4 Beta package there? Yup, keep it. With that said, remove the bootstrap-sass
and jquery
declaration from devDependencies
:
"bootstrap-sass": "^3.3.7",
...
"jquery": "^3.1.1",
Now, once you have done the above. Quickly fire up your terminal and issue the following command:
npm install
Hope you don't have network issues. If you were lucky enough to get the packages installed, move to /resources/assets/sass
directory. Open variables.scss
file in an editor of your choice and get rid of all the content in it. Next, open app.scss
from the same sass
directory and change it to:
// Variables
@import "variables";
// Bootstrap
@import "~bootstrap/scss/bootstrap";
Now, you have everything setup for Bootstrap 4 at the CSS side.
Move to /resources/assets/js/
directory and open bootstrap.js
for editing. Once you have that file opened, rush to remove the following lines:
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
} catch (e) {}
Also, open app.js
file (next to bootstrap.js
) which actually, is configured to be the entry point for your JS code. Once you have it opened, see:
require('./components/Example');
In this line, just replace /Example
with /App
. That's better. Don't worry; just follow the next steps and you will know why I did it (or, you are clever enough to already guess it.)
Laravel comes with Example components which are useful to check quickly if everything is setup correctly according to your chosen preset. Look into components directory, you'll see 2 files: ExampleComponent.vue
and Example.js
. Delete ExampleComponent.vue
file because we don't need it. Then rename Example.js
to App.js
and keep yourself ready to type some ES6 along with JSX. If you notice, we replaced /Example
with /App
in app.js
because we were about to rename Example.js
to App.js
in the components
directory.
At this point, you can wipe everything off from App.js
in your components directory or keep the example code. If you decide to do the latter, I would suggest a few basic changes.
Rename the component class name from Example
to App
and change the following lines:
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
with the lines:
if (document.getElementById('app')) {
ReactDOM.render(<App />, document.getElementById('app'));
}
Moving on; quickly open web.php
file which resides in /routes
directory relative to your Laravel project. Remove the only route you see and replace it with:
Route::group(['prefix' => 'ajax'], function() {
// all routes that don't need to go to react-router
});
Route::get('/{path?}', function () {
return view('web');
});
Notice that we have a special route group that matches only those routes that have a prefix ajax/
to their URL. This route group will help us have such a react-router
setup that can render appropriate components without using #
-based URLs. However, the route declaration outside of AJAX route group matches every URL no matter what it is and return web
view in response.
Next, move to /resources/views
directory and rename welcome.blade.php
and change it to web.blade.php
or whatever you prefer. Just make sure the view name matches with the one we specified in the routes/web.php
. (I'll assume you renamed it to web.blade.php
)
Open web.blade.php
and replace its contents with something like Bootstrap 4 HTML Starter Content. Whatever you do, make sure of the following three things:
- There is a
<link>
tag referring to/app.css
file. - There is a
<script>
tag with its src set to/app.js
file. - There is a
<div>
in the<body>
tag with an idapp
.
At this point, if you run the following command:
npm run dev
And wait for its completion. Then, run the PHP's little server through the following artisan command:
php artisan serve --port=80
You'll now be able to navigate to http://127.0.0.1
and see everything in action. (I'm assuming you didn't touch the example code in the Example
component).
After all of the fuss, you will be able to write React components with:
- React Router
- Redux
- Redux Forms
- Reactstrap
This concludes Part 1 of our ReactJS and Laravel - Running through a basic setup. Considering the response on the part 1, I'll be making a part 2 in which I will be setting up Authentication System with the same setup in Laravel and React.
Do notice the npm packages above were chosen after significant time spending so, keep them and check out their getting started guides to prevent yourself from headaches.
Top comments (2)
thank you this, i was having trouble with laravel routing.
hi please , where is part 3?. and how to do views dasboard with her call js , css .. layout dashboard different of web.blade.php,dashboard view like admin-lte for example.