Saving sub routes

[AndreyNikiforov]

Thanks for a very nice library, @geelen . I am learning how I can use it with my brand new create-react-app test site and noticing behavior that I do not understand. I would appreciate your help explaining.

I created the following site structure (urls):

• / - home
• /shop -- list of shopping categories
• /shop/pizza -- list of products in shopping category
• /shop/pizza/margherita -- product page

snapshot output:
? Starting crawling http://localhost:2999
?? Saving / as /index.html
?? Saving /shop as /shop.html
?? Saving /shop/pizza as /shop/pizza.html
?? Saving /shop/pizza/margherita as /shop/pizza/margherita.html

I run "serve build" and navigate to different urls using Chrome. Here is observed behavior:

• / -- works as expected and home page is loaded
• /shop -- loads folder view of the /shop/ url -- wrong
• /shop/pizza -- loads folder view of the /shop/pizza/url -- wrong
• /shop/pizza/margherita -- returns 404 -- wrong

What is the best approach to handle sub routes? May be I am missing http server config that should handle file layout produced by react-snapshot (other than always serving 200.html for all requests)?

One solution is for every url always produce folder and index.html inside (assuming http server always serves index.html as default doc for folders). My structure will look like:

/index.html
/shop/index.html
/shop/pizza/index.html
/shop/pizza/margherita/index.html

Thanks,
Andrey

[AndreyNikiforov]

Found another possible solution to my situation: generating all links in the app with trailing slashes:
/
/shop/
/shop/pizza/
/shop/pizza/margherita/

Then react-snapshot generates folders with index.html files in them and "serve" serves them as expected:

/index.html
/shop/index.html
/shop/pizza/index.html
/shop/pizza/margherita/index.html

[geelen]

Oh interesting! What webserver were you using on the rendered output? I think it just needs to automatically try appending .html before falling back to a directory listing. pushstate-server should do this automatically btw.

[AndreyNikiforov]

@geelen I am using serve. Workaround with trailing slashes works for me. Having it supported out of the box would be nicer.

[AndreyNikiforov]

@gleen pushstate-server will serve index.html for all routes, so I do not need react-snapshot at all, correct?

[benjamminj]

@AndreyNikiforov @geelen
Experienced this exact same issue trying to statically render some blog posts. So the path structure looks somewhat as follows

/
/blog
/blog/post-1
/blog/post-2

I'm curious what most hosts do regarding path resolution — for example, if I were to use react-snapshot to prerender my routes and throw the static site up on gh-pages or netlify or any other static host, would I get the folder of /blog or /blog.html consistently?

I think the idea of zero-configuration prerendering is absolutely awesome, just curious about whether the way nested folders are handled would lead to unexpected behavior.

[jasan-s]

@AndreyNikiforov @geelen I am having a similar issue trying to serve static html for subroutes. Root route "/" works just as expected serving index.html. But any subroute ("/signIn", "/signUp") the same static index.html is again getting served, Even though my build directory has the static html files for the subroutes as signIn.html and signUp.html. Due to this initially the index.html is rendered on subroutes and then then main.js takes over and renders the correct components. See #52

[jasan-s]

I 'm using create react app, and it seems like route document is being served from the service worker. Could this be the issue?