react js and existing Laravel project

Question

I've searched internet and no where I've found a complete solution for what I'm trying to achieve. I'm trying to:

1. Add react related modules to existing Laravel project.
2. Use existing gulp file to make all react related code available to my Laravel blade layouts.
3. Then put JSX code to my Laravel's public folder and use those components in the blade templates.

Here's how the structure of the existing gulp.js file looks like:

var elixir = require('laravel-elixir');

elixir(function (mix) {
    var cssFilesList = [
        ...
    ];

    var jsFooterFilesList = [
        ...
    ];

    var afterLoginjsFilesList = [
        ...
    ];

    elixir.config.assetsDir = 'custom/path';

    mix.styles(...);
    mix.scripts(...).scripts(more...);
    mix.version(...all of the above...)
});

I've tried to follow different tutorials like: this tutorial and this one

which more or less suggested me to update react related dependencies using npm , which I did. My package.json looks like:

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8"
  },
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "bootstrap-sass": "^3.0.0",
    "express": "^4.15.3",
    "ioredis": "^3.0.0",
    "laravel-elixir": "^2.0.0",
    "laravel-elixir-webpack-official": "^1.0.10",
    "laravel-elixir-webpack-react": "^1.0.1",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "require-dir": "^0.3.2",
    "socket.io": "^2.0.1"
  }
}

Now that the react related dependencies are installed, I've changed my gulp.js file so that it looks like the following:

var elixir = require('laravel-elixir');
require('laravel-elixir-webpack-official');

// configure webpack
Elixir.webpack.mergeConfig({
    babel: {
        presets: [
            'react',
            'es2015',
            'stage-0',
        ]
    }
})

elixir(function (mix) {
    var cssFilesList = [
        ...
    ];

    var jsFooterFilesList = [
        ...
    ];

    var afterLoginjsFilesList = [
        ...
    ];

    elixir.config.assetsDir = 'custom/path';

    mix.webpack('reactcode.js');

    mix.styles(...);
    mix.scripts(...).scripts(more...);
    mix.version(...all of the above...)
});

Now I'm trying to compile this by:

gulp

Which throws two of the following errors depending on what I'm including on the top of the gulp file. If I include the line:

require('laravel-elixir-webpack-official');

It says:

ReferenceError: Elixir is not defined
    at Object.<anonymous> (/path_to_project/node_modules/laravel-elixir-webpack-official/dist/WebpackTask.js:110:3)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/path_to_project/node_modules/laravel-elixir-webpack-official/dist/index.js:5:20)
    at Module._compile (module.js:570:32)

If I include the line:

require('laravel-elixir-webpack-react');

It says:

/path_to_project/node_modules/laravel-elixir-webpack-react/main.js:3
Elixir.ready(function() {
       ^

TypeError: Elixir.ready is not a function
    at Object.<anonymous> (/path_to_project/node_modules/laravel-elixir-webpack-react/main.js:3:8)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/path_to_project/gulpfile.js:4:1)
    at Module._compile (module.js:570:32)

All of these attempts were sort of hit and trial approaches as suggested by the above stated links.

Does anyone know a step by step method of exactly how this can be done? Any link or resource. Also if anyone can rectify what I might be doing wrong.

Any help is greatly appreciated.

Answer 1

EDIT 2021

Now that I have been working with React over the last 3.5 years, I believe I can answer my own question. In fact the question (or approach) itself is wrong.

I should have bundled React code using Webpack. Here are the steps -

1. Create a folder for your React sub project inside the Laravel directory, you can organize it as you wish.

2. Setup React with Webpack (out of scope for this edit), there are 100s of tutorials on net.

3. In development mode spin up dev server from Webpack. Typically localhost:8080 . Front end will communicate to the Laravel base using API/Json bridge.

4. Once you are satisfied with the dev version, generate production version of the React code. This will spit out JS bundles, CSS bundles and assets in the path you configured.

5. Pull these bundles in your normal Laravel template and boom - you have your React app running with the main framework being Laravel.

SOLVED

It eventually worked with the version of gulp.js where I had:

require('laravel-elixir-webpack-official');

This was initially throwing error like:

ReferenceError: Elixir is not defined

I upgraded the package laravel-elixir to 6.0.x, such that now it looks like the following in my package.json:

"laravel-elixir": "^6.0.0-0"

To produce a compiled JS file which includes React related code and your components, add something like the following to your gulp file:

mix.webpack('comp1.js', 'destination/to/public/directory', 'source/of/your/components/');

Please note I kept the source JS file name as comp1.js which had my react component code. I'll experiment soon to see if they could have different names.

Compile from the root of the project using gulp . This will generate your compiled file, which when included in your blade layout or view will let you render your component in your Laravel page.

And there we go, I now have a way to use React inside Laravel.

Notes

My npm version is:

3.10.10

And node version is:

6.12.0

Add this because I had issues updating packages when those versions were different, particularly when node was not LTS. Hope this helps.