Laravel Mix - Integrate web3 react app into laravel

user_2847689 0
Viewed 368

I have created a web3 app with react. As I now need an additional centralized backend for other data operations I want to use laravel.

I have the following folder structure:

enter image description here

I created the following files to compile the app with mix:

webpack.mix.js:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

/*
mix.js('resources/js/app.js', 'public/js')
    .react()
    .sass('resources/sass/app.scss', 'public/css');
*/
mix.js('react-app/src/App.js', 'public/js')
    .webpackConfig(require('./webpack.config'))
    .react()
    .css('react-app/src/styles/reset.css', 'public/css')
    .css('react-app/src/styles/styles.css', 'public/css')
    .css('react-app/src/App.css', 'public/css')

webpack.config.js:

module.exports = {
    resolve: {
        fallback: {
            "stream": require.resolve("stream-browserify"),
            "crypto": require.resolve("crypto-browserify"),
            "http": require.resolve("stream-http"),
            "https": require.resolve("https-browserify"),
            "os": require.resolve("os-browserify/browser"),
        },
    },
};

My view welcome.blade.php in laravel looks like the following:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <!-- Styles -->

    <link href="{{ asset('css/App.css') }}" rel="stylesheet">
    <link href="{{ asset('css/styles.css') }}" rel="stylesheet">
    <link href="{{ asset('css/reset.css') }}" rel="stylesheet">

</head>
<body>
<!-- React root DOM -->
<div id="App">
</div>
<!-- React JS -->
<script src="{{ asset('js/App.js') }}" defer></script>
</body>
</html>

The compilation works fine, but when I run the route to welcome.blade.php I get a blank page back.

Any suggestions what I am doing wrong?

I appreciate your replies!

laravel-mix laravel webpack reactjs
2 Answers

This does not seem like a problem with mix.

What I do suspect, is that your App.js does not actually render the components.

You need to call ReactDOM.createRoot() somewhere after the DOM is available and attach your <App/> to it.

import * as ReactDOM from 'react-dom/client';
import App from 'App';

const elem = document.getElementById('App');
const root = ReactDOM.createRoot(elem);
root.render(<App/>); // whatever initialization you may need goes here

This should be your top-level JS file.

Optionally, and for a bit more flexibility, you could read and follow the excellent tutorial from Joe at https://joeczubiak.com/laravel-plus-react/ .

user_147815150
user_149786140
Related