ReactJS and Laravel - Running through a basic setup - Part 1
Tags: react, laravel, starter
Published: 2017-10-26 17:13:00

---
title: ReactJS and Laravel - Running through a basic setup - Part 1
published: true
description: We look at how you can wire up ReactJS and Laravel quickly to get you started with your next Web Application
tags: react, laravel, starter
---

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

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.