search

iansinnott / react-static-boilerplate

A boilerplate for building static sites with Webpack 2, React and React Router
107 stars 16 forks source link

react app empty when static files loaded on production server #21

Closed kyliepace closed 7 years ago

kyliepace commented 7 years ago

Hey, thanks for this boilerplate. It's my first time generating multiple static files from react-router, and this project is helping me to make sense of it all.

However, I have a problem when I try to load the .html files on my server and I wonder if there's something basic I'm missing, or a setting I haven't configured yet...hopefully.

When I go directly to https://[domain name]/[my project]/index.html, the page renders and all the css and images appear correctly. But then the vendor and webpack javascript files finish loading and the react app completely empties in the DOM.

Do I need to do something within this webpack config to prevent this from happening, or am I looking in the wrong place and this is a server issue?

Thanks!

iansinnott commented 7 years ago

Hm, that is odd. React should only attach its event handlers if it sees that everything is already rendered, so something is definitely amiss here. Could you provide a reproduction repository?

Make sure that the output HTML has all the data-reactid information.

kyliepace commented 7 years ago

Thanks for the quick reply!

I figured this out and it was just the order of the root div and scripts in the template.js file. I moved the scripts to be before the root app, and the page stopped disappearing. 

<body>
        <script src={manifest['vendor.js']} />
        <script src={manifest['app.js']} />
        <div id='root' dangerouslySetInnerHTML={{ __html: body }} />
</body>