Complete the react example

alexandcote commented 6 years ago

Really nice lib guys ! 🎉 I completed the example for react ~with react-redux~. I await your suggestions if you think of a better implementation. ✌️ Yeah

lalitmee commented 6 years ago

Hey @alexandcote , can you tell me that for server-side-rendering we have to change APP_ENV=production. But when I am changing it to production, it is giving some error.

Error

The command "'/mnt/shared/lib/node_modules' '/home/ubuntu/workspace/storage/app/ssr/bd4c4bdee8f5d3a1b823ada60f33e432.js'" failed.\n
\n
Exit Code: 126(Invoked command cannot execute)\n
\n
Working directory: /home/ubuntu/workspace/public\n
\n
Output:\n
================\n
\n
\n
Error Output:\n
================\n
sh: 1: exec: /mnt/shared/lib/node_modules: Permission denied\n
(View: /home/ubuntu/workspace/resources/views/welcome.blade.php)
"""

welcome.blade.php


<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Laravel + React server side rendering example</title>
   <link rel="stylesheet" href="{{ mix('css/app.css') }}">
   <script defer src="{{ mix('js/react/entry-client.js') }}"></script>
</head>
<body class="bg-paper font-sans leading-normal text-grey-darkest border-t-4 border-orange-light">
   {!! ssr('js/react/entry-server.js')
       ->fallback('<div id="app"></div>')
       ->render() !!}

</body>
</html>


Please help me.. :innocent: ```

sushantlp commented 6 years ago

Hey there,

everything is working fine but in welcome.blade.php

<body class="bg-paper font-sans leading-normal text-grey-darkest border-t-4 border-orange-light">
        {!! ssr('js/react/entry-server.js')
            ->fallback('<div id="app"></div>')
            ->render() !!}   
    </body>

the code inside {} is not rendering on the page.

welcome.blade.php

<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel + React server side rendering example</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    <script defer src="{{ mix('js/react/entry-client.js') }}"></script>
</head>
<body class="bg-paper font-sans leading-normal text-grey-darkest border-t-4 border-orange-light">
    {!! ssr('js/react/entry-server.js')
        ->fallback('<div id="app"></div>')
        ->render() !!}

</body>
</html>

This is my welcome.blad.php file. Please help me.

lalitmee commented 6 years ago

Yeah @sushantlp , the same problem I am facing. I don't know why that ssr in body tag is not working. Hey @alexandcote , can you help us? :innocent:

alexandcote commented 6 years ago

Hi guys,

I may be able to help you.

@lalitmee Did you create the folder /storage/app/ssr ? Do you use Homestead ? Are you sure you can run node without sudo ?

@sushantlp Do you put the APP_ENV to production in the .env file like @lalitmee said ?

lalitmee commented 6 years ago

@alexandcote yeah, I am using homestead. Actually, I am using your project. I tried to run your repo but it is also giving some error. When I am clicking on react it is showing this error.

"""
The command "/usr/local/bin/node /home/lalit/Desktop/Github/laravel-server-side-rendering-examples/storage/app/ssr/67daedbf9d433eab88b866519d36c8d8.js" failed.\ ▶
\n
Exit Code: 1(General error)\n
\n
Working directory: /home/lalit/Desktop/Github/laravel-server-side-rendering-examples/public\n
\n
Output:\n
================\n
\n
\n
Error Output:\n
================\n
Warning: Failed prop type: The prop `context` is marked as required in `StaticRouter`, but its value is `undefined`.\n
    in StaticRouter\n
/home/lalit/Desktop/Github/laravel-server-side-rendering-examples/storage/app/ssr/67daedbf9d433eab88b866519d36c8d8.js:10920\n
var html = __WEBPACK_IMPORTED_MODULE_4_react_dom_server___default()(__WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(\n
                                                                   ^\n
\n
TypeError: __WEBPACK_IMPORTED_MODULE_4_react_dom_server___default(...) is not a function\n
    at Object.<anonymous> (/home/lalit/Desktop/Github/laravel-server-side-rendering-examples/storage/app/ssr/67daedbf9d433eab88b866519d36c8d8.js:10920:68)\n
    at __webpack_require__ (/home/lalit/Desktop/Github/laravel-server-side-rendering-examples/storage/app/ssr/67daedbf9d433eab88b866519d36c8d8.js:20:30)\n
    at Object.defineProperty.value (/home/lalit/Desktop/Github/laravel-server-side-rendering-examples/storage/app/ssr/67daedbf9d433eab88b866519d36c8d8.js:10887: ▶
    at __webpack_require__ (/home/lalit/Desktop/Github/laravel-server-side-rendering-examples/storage/app/ssr/67daedbf9d433eab88b866519d36c8d8.js:20:30)\n
    at /home/lalit/Desktop/Github/laravel-server-side-rendering-examples/storage/app/ssr/67daedbf9d433eab88b866519d36c8d8.js:63:18\n
    at Object.<anonymous> (/home/lalit/Desktop/Github/laravel-server-side-rendering-examples/storage/app/ssr/67daedbf9d433eab88b866519d36c8d8.js:66:10)\n
    at Module._compile (module.js:660:30)\n
    at Object.Module._extensions..js (module.js:671:10)\n
    at Module.load (module.js:573:32)\n
    at tryModuleLoad (module.js:513:12)\n
 (View: /home/lalit/Desktop/Github/laravel-server-side-rendering-examples/resources/views/react.blade.php)
"""

sushantlp commented 6 years ago

@alexandcote yeah, I put production in .env file

alexandcote commented 6 years ago

@lalitmee your view need to passe the context like this:

{!! ssr('js/react/entry-server.js')
            // Share the packages with the server script through context
            ->context('packages', $packages)
            // If ssr fails, we need a container to render the app client-side
            ->fallback('<div id="app"></div>')
            ->render() !!}
<script>
    // Share the packages with the client script through a JS variable
    window.__PRELOADED_STATE__ = @json(['packages' => $packages])
</script>

The controller:

<?php
namespace App\Http\Controllers;
class ReactController extends Controller
{
    public function __invoke()
    {
        return view('react', [
            'packages' => $this->getPackages(),
        ]);
    }
    private function getPackages() : array
    {
        $path = public_path('packages.json');
        $contents = file_get_contents($path);
        return json_decode($contents, true);
    }
}

@sushantlp can you confirm me that your files look like this ?

If you have a github repo with your projet I can look at it and find the problem... Maybe it will be easier.

lalitmee commented 6 years ago

Hey @alexandcote , I am having a repo of my code. Can you look at it? Please.

I have modified your repo according to my need. Please check.

alexandcote commented 6 years ago

@lalitmee Ok you push this to a other level. I propose you a working version of your example here. If you need to do fetch api data from Javascript, you will need to resolve the promise before render the application. You will have to made some changes in the server-entry.js. You can check the vuejs-hacknews-example, it could guide you with that. Otherwise, my example work ✌️

lalitmee commented 6 years ago

Hey @alexandcote , thank you for giving the working example. It's working and yeah I also got success in API request. The ssr tag in the body is also working. But I have a doubt that it is mentioned in the example that if server-side-rendering would be happening, it will show a tag in the HTML elements data-server-rendered="true". I am talking about this image. Can you clarify that what's happening?

And yeah, Thank you so much for helping.

alexandcote commented 6 years ago

@lalitmee When a VueJS application use SSR, it's add this data attribute. React don't have the same behaviour.

lalitmee commented 6 years ago

@alexandcote , Thank you so much. you helped a lot. :innocent:

sebastiandedeyne commented 6 years ago

Hi @alexandcote,

Huge thanks for this PR, and for helping people out here!

This looks pretty much ready to merge for me, the only thing I'm doubting about is adding redux. What do you think about keeping things simple and just using React + router? Redux doesn't seem to bring anything to the table here.

alexandcote commented 6 years ago

Hi @sebastiandedeyne,

Huge thanks at you for this lib 😄 I made the change that you suggested and remove redux dependency.

sebastiandedeyne commented 6 years ago

Thanks!

spatie / laravel-server-side-rendering-examples

Complete the react example #3