DEV Community

Muhammad Talha Akbar
Muhammad Talha Akbar

Posted on

ReactJS and Laravel - Running through a basic setup - Part 1

#react #laravel #starter

Type the following command in your newly created Laravel 5.5 project:

php artisan preset react
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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",
Enter fullscreen mode Exit fullscreen mode

Now, once you have done the above. Quickly fire up your terminal and issue the following command:

npm install
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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) {}
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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'));
}
Enter fullscreen mode Exit fullscreen mode

with the lines:

if (document.getElementById('app')) {
    ReactDOM.render(<App />, document.getElementById('app'));
}
Enter fullscreen mode Exit fullscreen mode

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');
});
Enter fullscreen mode Exit fullscreen mode

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 id app.

At this point, if you run the following command:

npm run dev
Enter fullscreen mode Exit fullscreen mode

And wait for its completion. Then, run the PHP's little server through the following artisan command:

php artisan serve --port=80
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
jamesdelfini profile image
James •

thank you this, i was having trouble with laravel routing.

Collapse
 
yan2sambou profile image
Yann Deo.S •

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.