Setting up Laravel React JS SPA application

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.

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

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.

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

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

resources/js/superadmin/components/ItemList.js

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

resources/js/superadmin/components/routes.js

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

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……

Software Developer based in the UK, used to work in Singapore, but originally from Myanmar.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store