Multi Route/ Page App

[ChrisKnightLDN]

Is your feature request related to a problem? Please describe. Our 'default' setting is for our applications to exist on a single page - for certain types of application this is fine. Sometimes it might provide a better user experience to break long pages into separate individual pages. This would potentially give greater focus on specific sections of data, increased share-ability via routes/ urls and more flexibility when designing.

Describe the solution you'd like Allow multiple pages and have the urls work on our current hosting. This should be possible using sveltekit SSG.

Describe alternatives you've considered Different hosting solutions with a different server setup - eg. aws/ netlify

Additional context @mikeldn has some worthwhile argument as to why we might NOT want to do this in certain scenarios, but I believe it should definitely be possible using our current server setup and the correct build output/ settings. A prototype to test/ prove this would be useful

[jamesscottbrown]

The EV Charging Dashboard is an example of this working, but it is definitely not a minimal example.

The key things are to:

• change the adaptor from @sveltejs/adapter-auto to @sveltejs/adapter-static in svelte.config.js
• enable pre-rendering of pages by adding export const prerender = true; to src/routes/layouts.js
• make sure that links go to the correct pages: nginx is configured to strip off trailing URLs, and your project will be served from a base URL like /<project-name> rather than the root URL /; set paths.base appropriately in the config object defined in svelte.config.js, and construct links using the base store imported from $app/paths
• if you need to check which page is loaded (e.g., to conditionally style links on a nav bar), you can import the page store from $app/stores

Previously, there was a problem where trying to directly load pages other than the index page failed with a 404 error (but navigating to them by clicking on links from the index page worked fine). This was because an .html file was being generated for each page, but nginx was only looking for a file whose name matched the URL path exactly (rather than also looking for a file whose name matched the URL path with .html concatenated to the end). I fixed this by adding the directive try_files $uri $uri.html $uri/ =404; to the server block of the /etc/nginx/sites-enabled/default config file.

[ChrisKnightLDN]

I think the changes you outline should already be the defaults contained in https://github.com/Greater-London-Authority/ldn-viz-svelte-starter-template could you double check those?

[jamesscottbrown]

I think the changes you outline should already be the defaults contained in https://github.com/Greater-London-Authority/ldn-viz-svelte-starter-template could you double check those?

The changes listed in my first and third bullet points are alrteady made in the template.

I;ve added a PR to enable prerendering: https://github.com/Greater-London-Authority/ldn-viz-svelte-starter-template/pull/3

The use of the base and page stores provided by SvelteKit aren't currently docuemnted or illustrated in the template repo.

[jamesscottbrown]

We now have a such apps deployed.