React Laravel Starter

A React Laravel Starter Project.

Inspired by React Laravel and Go Starter Kit.

After cloning the project remember to create a .env file and generate a key:

cp .env.example .env
php artisan key:generate

Features

• Laravel 5.4
• React with Redux
• Server Side Rendering (with PHP V8JS)
• Hot Module Reloading
• React Router v4 and Redux Router v3
• Styled SCSS Components
• ImmutableJS
• Eslint and Stylelint
• BDD Testing via Mocha, Chai, Enzyme and Sinon
• Service Worker Support (for Progressive Web Apps)
• Yarn

V8 and PHPV8 Setup

Install V8JS from source or as a pre-built binary:

sudo add-apt-repository ppa:pinepain/libv8-5.2
sudo apt-get update
sudo apt-get install libv8-5.2

Install PHPV8:

cd /tmp
git clone https://github.com/phpv8/v8js.git
cd v8js
phpize
./configure --with-v8js=/opt/v8
make
make test
sudo make install

You may need to add the extension to your php.ini files:

extension=v8js.so

Check your installed v8 extension is enabled:

php --ri v8js

React Laravel Config

This project depends on React Laravel.

Republish the React Laravel config:

php artisan vendor:publish

Check your config/react.php file still looks like:

return [
    'source'            => base_path('node_modules/react/dist/react.js'),
    'dom-source'        => base_path('node_modules/react-dom/dist/react-dom.js'),
    'dom-server-source' => base_path('node_modules/react-dom/dist/react-dom-server.js'),
    'components'        => public_path('bundle.server.js')
];

Build, Run & Test

Run in the project root:

composer install
yarn install

# Dev:
npm run start:dev

# Prod:
npm run build

# Test:
npm run test

# Lint:
npm run lint

Hot Module Replacement

To get the hot module replacement to work with the webapp, you may need to install a forwarder plugin if you're using Homestead.

Also update your resources/webpack.client.js file to match your app URL:

host = process.env.HOST || 'rls.local'

Limitations

Currently the React components are rendered after the Laravel route has been matched.

Consequently, the Router context cannot be used to redirect the app on the server.

Therefore you should avoid using 'Redirect' within React Router.

Alternatively you could rely on Laravel to handle redirects, and create separate routes and views for use cases such as authenticated pages.