Laravel v5.8 + ReactJS – Installation

Steve Clifton
May 19 · 3 min read

Here is a real simple guide to creating a Laravel/React app, and getting the page loaded in no time.

This is part of a series of stories I am writing, which will set the basis for a simple CRUD app.

Assumptions: You need to have a few things already installed..

composer, nodejs, npm, mysql/php (can be installed using brew, and this guide), laravel just to start…

Create a new Laravel App

$ laravel new AppName
$ cd AppName

Setup Laravel for React

$ php artisan preset react# Now initialise our setup
$ npm install
$ npm run dev

Homepage

Our main page should look something like this

views/welcome.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Example Site</title> <link rel="stylesheet" type="text/css" href="css/app.css"> <meta name="csrf-token" content="{{ csrf_token() }}"> </head>
<body>
<div id="example"></div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

Example.js

After this, we will need to run the npm run dev command to recompile our assets.

$ npm run dev

Create the new database

$ mysql -uroot -p1234mysql > create database AppName;
# Query OK, 1 row affected (0.00 sec)
mysql > exit;

.env

DB_DATABASE=AppName
DB_USERNAME=root
DB_PASSWORD=1234

Laravel Authentication

$ php artisan make:auth

Before migrating

If you are running MySQL5.7 (or another database), you can skip this step

Migrating

$ php artisan migrate

Lets check out our site

$ php artisan serve
# Laravel development server started: <http://127.0.0.1:8001>

For continued compiling of our assets, use this command in another terminal (leave the one with artisan serve open too, otherwise requests got nowhere to go) 😅

$ npm run watch

And there we have it!