Laravel Mix - Integrate web3 react app into laravel

Question

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:

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!

Fabian Sievert · Accepted Answer · 2022-04-04 12:47:06Z

2

+200

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/ .

edited Apr 4, 2022 at 12:47

answered Apr 4, 2022 at 12:41

Fabian Sievert

8807 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vincent La Over a year ago

Without OP posting the contents of his browser console, I'm going to assume it's something basic like not calling ReactDOM.createRoot() as you said. It could also be caused by a misconfiguration serving static assets, which a quick reading of the browser console can confirm or rule out.

rahman j89 · Accepted Answer · 2022-03-29 15:38:34Z

-1

Why not use Laravel breeze? It's the starter kit for laravel api backend. Here is the document:

https://laravel.com/docs/9.x/starter-kits#breeze-and-inertia

And you can use the nextjs version here:

https://github.com/laravel/breeze-next

answered Mar 29, 2022 at 15:38

rahman j89

8512 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Laravel Mix - Integrate web3 react app into laravel

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related