Sapper: Export doesn't create static HTML pages

Created on 29 May 2019  路  3Comments  路  Source: sveltejs/sapper

When I run npx sapper export it exports only the _src/routes/index.svelte_ component as a static _HTML_ page which makes me unable to access any other page through the address bar. This problem occurs only on the deployed site, not on localhost.

Pages are accessible only through <a/> link elements on the homepage and the only solution I found is to create a _.htaccess_ file to redirect every path to exported _index.html_ and let it handle the requested path.

I created a new sapper project and exported it, it does export all svelte components from _src/routes_ as HTML pages, but I noticed when I remove any <a/> link element from the _Nav.svelte_ component, only the page that is linked to that <a/> element doesn't get exported as HTML file.

Am I missing something?

Most helpful comment

The problem occurred because I wrapped all _HTML_ elements in the __layout.svelte_ component with {#if}{/if} block to show the contents of the site after the promise was resolved. Probably the <a> elements weren't available for _crawler_ on initial render. I placed <a> element outside of {#if}{/if}block, now the page gets exported as static _HTML_ file.
Maybe I should try with {#await}{/await} block.

All 3 comments

When you run export, sapper will crawl your site following any links. If no link to a page exists then a static page will not be saved. This is explained in the docs.

Wherever I put the <a> element with the link to another page, it will not export the linked page for some reason. On a fresh project, it works as expected.

The problem occurred because I wrapped all _HTML_ elements in the __layout.svelte_ component with {#if}{/if} block to show the contents of the site after the promise was resolved. Probably the <a> elements weren't available for _crawler_ on initial render. I placed <a> element outside of {#if}{/if}block, now the page gets exported as static _HTML_ file.
Maybe I should try with {#await}{/await} block.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

matt3224 picture matt3224  路  4Comments

freedmand picture freedmand  路  4Comments

Rich-Harris picture Rich-Harris  路  4Comments

arxpoetica picture arxpoetica  路  4Comments

Rich-Harris picture Rich-Harris  路  3Comments