search

mauricedb / server-side-rendering-with-create-react-app

Server-side Rendering with Create-React-App
https://medium.com/@maurice.de.beijer/react-server-side-rendering-with-webpack-c4da49c87c34
MIT License
32 stars 16 forks source link

ssr not working #3

Closed scaledrop closed 6 years ago

scaledrop commented 6 years ago

Hi @mauricedb , ssr not working with the given configuration. Can you please suggest what could be the issue. Have you checked it in the view-source. Was everything rendering the same as it was rendering client side? Please help.

mauricedb commented 6 years ago

Hi @scaledrop,

Can you clarify on what you mean with ssr not working with the given configuration and what you have tried to do?

scaledrop commented 6 years ago

I just tried running the app with the same config of yours. But when i see in the view-source only {react-app} is coming written inside root element, the whole app should come rendered instead from the server. Or is there any other port, it is opening with ssr (server side rendering) functionality?

scaledrop commented 6 years ago

I tried the following. 1. npm run ssr , 2. serve -s build but nothing happened. Still app is not rendering from the server. @mauricedb What to do next? Your help will be appreciated.

mauricedb commented 6 years ago

You need to run npm run start:ssr' and then go tohttp://localhost:3001`.

When I look at the resulting served HTML I see the rendered application. Its compressed but after formatting it looks like:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
      <meta name="theme-color" content="#000000">
      <link rel="manifest" href="/manifest.json">
      <link rel="shortcut icon" href="/favicon.ico">
      <title>React App</title>
      <link href="/static/css/main.c17080f1.css" rel="stylesheet">
   </head>
   <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root">
         <div class="App" data-reactroot="">
            <header class="App-header">
               <img src="/static/media/logo.ee7cd8ed.svg" class="App-logo" alt="logo"/>
               <h1 class="App-title">Welcome to React</h1>
            </header>
            <p class="App-intro">To get started, edit <code>src/App.js</code> and save to reload.</p>
         </div>
      </div>
      <script type="text/javascript" src="/static/js/main.b4305b4b.js"></script>
   </body>
</html>
scaledrop commented 6 years ago

Yes, it works. Thanks man!

mauricedb commented 6 years ago

Great 👍