1

first time question-asker on stack-overflow.

I am working on a reactJS SPA, and need to optimize for SEO. To that end, I've integrated react-helmet to dynamically update metadata with the high-level components that are viewed. Unfortunately this isn't consistently sufficient for Google or Facebook's crawlers. After some research, I learned that react-snapshot was a good option, as it crawls the SPA and generates static html files to be served initially as the js package loads - which should result in crawlers seeing the appropriate metadata for each route.

I've integrated react-snapshot as the documents suggested, and by running the

npm run build

command, all of the static files are generating as expected. However, when I start the system locally (port 3000) for testing, it looks like the static files are not served to the browser. By looking at the source, it shows that the default index.html is all that is showing up. I don't know what I am either not doing, or am doing wrong. Any advice would be appreciated!

UPDATE: So after two days of head -> wall I realized that create-react-app doesn't automatically host the build version (which is where the static pages are contained). In order to see if the files are being served correctly, it is best to globally install the serve package, and use that to temporarily host your app on the local machine.

npm install -g serve

Once it's installed, build the application as outlined in the react-snapshot documentation, and then run the build version of your app using:

serve -s build
Zachary Fejes
  • 58
  • 10
  • 1
    Did you change your `ReactDOM.render()`? Should be `ReactDOM.render(render( , document.getElementById('root') );`. Note the extra `render` call inside. – Chase DeAnda Oct 11 '17 at 20:59
  • Hey Chase, thanks for the suggestion. I'll give it a try - though I thought the docs suggested replacing ReactDOM.render() with render() entirely, as oppose to nesting them? – Zachary Fejes Oct 12 '17 at 15:57
  • **Update**: Unfortunately the suggestion didn't do the trick. As per the documentation: `- import ReactDOM from 'react-dom'; + import { render } from 'react-snapshot'; - ReactDOM.render( + render( , document.getElementById('root') );` – Zachary Fejes Oct 12 '17 at 16:31

1 Answers1

0

So for anyone who comes across this because they were similarly confused, I've discovered what I was doing incorrectly.

When using the npm start command with create-react-app, it starts up a server with hot-updating on localhost, but it does not serve the build version (even if you have built it manually). As this is where the static files generated by react-stapshot live, they will not be served to the browser in this way.

If you want to test the minified build version of your project, including those static files, (and you still want to do it locally) you need to use some kind of server package. In my case, I used the Serve module as follows:

npm install -g serve

One that is installed globally, build your project, and then set up the server once it is ready.

npm run build
serve -s build

This will start up your build version on the localhost - which will allow you test out the build version of your app - including the static react-snapshot files.

Zachary Fejes
  • 58
  • 10