Setting up Laravel React JS SPA application

3 min readJun 13, 2020

This article will show you how to configure a Laravel project to build a SPA application using React JS. I assume you are already familiar with the Laravel framework and React JS to a certain extent.

First, you need to install the Laravel application. You can following the installation guidelines mentioned on the official Laravel documentation page, https://laravel.com/docs/7.x/installation.

Then in the project root folder, you need to run the following commands.

npm install
php artisan ui react (If your Laravel version is lower than 7, you need to run “php artisan preset react” instead)
npm install && npm run dev

Then you need to declare a route in the routes.php file as follow.

Route::get('/', function () {
    return view('layouts.superadmin-app');
});

In my case, I am building an Admin panel for the Superadmin user so that I named the view file as layouts/superadmin-app.blade.php cause I like to keep things separate.

Following is the content of the layouts/superadmin-app.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <title>Laravel React JS SPA</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" id="csrf-token" content="{{ csrf_token() }}">
    <link href="{{ asset('css/superadmin/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">

    </div>
    <script src="{{ asset('js/superadmin/app.js') }}"></script>
</body>
</html>

As you can see, storing the asset files in the superadmin folders so that I need to tweak webpack.mix.js file a little bit as follow.

mix.react('resources/js/app.js', 'public/js').react('resources/js/superadmin/app.js', 'public/js/superadmin/')
    .sass('resources/sass/app.scss', 'public/css').sass('resources/sass/superadmin/app.scss', 'public/css/superadmin/');

Then I created resources/sass/superadmin/app.scss file with the following content.

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Bootstrap
@import '~bootstrap/scss/bootstrap';

Literally, the file is pretty much empty. I will leave the styling bit for you cause I am only showing you the fundamental installation.

Before we move onto the JavaScript part, we need to install the following npm package.

npm install react-router-dom

Then you need to create the two React JS components as follows.

resources/js/superadmin/components/Dashboard.js

import React from 'react';

class Dashboard extends React.Component {
    render() {
        return <h3>Welcome to the Dashboard page.</h3>
    }
}

export default Dashboard;

resources/js/superadmin/components/ItemList.js

import React from 'react';

class ItemList extends React.Component {
    render() {
        return <h3>Welcome to the Item List page.</h3>
    }
}

export default ItemList;

Then you need to create a React JS component to declare routes as follow.

resources/js/superadmin/components/routes.js

import React from 'react';
import { Route, Switch } from 'react-router-dom'
import Dashboard from './components/Dashboard';
import ItemList from './components/ItemList';

class Routes extends React.Component {
    render() {
        return (
            <Switch>
                <Route exact path='/' component={Dashboard} />
                <Route path='/item-list' component={ItemList} />
            </Switch>
        )
    }
}

export default Routes;

Finally, you create resources/js/superadmin/app.js file.

require('../bootstrap');

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Link } from 'react-router-dom'
import Routes from './routes';

class App extends React.Component {
    render() {
        return (
            <Router>
                <div>
                    <Link to={'/superadmin'}>Dashboard</Link> |
                    <Link to={'/superadmin/item-list'}>Items</Link>
                    <Routes />
                </div>
            </Router>
        )
    }
}

export default App;

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

That’s it. Now, if you visit the page, you will see a basic SPA application with two links as follow.

From here, you can continue building your SPA application based on your need. Hope you find this article helpful. Cheers……

Setting up Laravel React JS SPA application

Written by Wai Hein

No responses yet