buhodev / sveltekit-tailwind-starter

SvelteKit + TailwindCSS + TypeScript starter template
38 stars 10 forks source link

static site generation #1

Open marksteven opened 1 year ago

marksteven commented 1 year ago

Have tried using your starter project and adding static site pages. Using Svelte static site generator https://kit.svelte.dev/docs/adapter-static

Following the usual steps the site starts fine (npm run dev) but does not build correctly. (npm run build) At a loss as to why.

Hoping you might have an answer? Regards Mark

buhodev commented 1 year ago

Hi, Mark. Sorry for the late response. I suppose the issue might have been due to 2 reasons: 1) incompatibilities between the version of the adapter at the time you installed it, and the versions of the other svelte packages that were specified a long time ago in the package.json on this template. 2) issues with the prerender option and the dynamic language routes [lang=lang] used by typesafe-i18n (ex. /en/ or /es/)

I updated the repo, cleaned it a little bit, replaced typesafe-i18n with @inlang/sdk-js and now you can use the adapter-static with no problems. You just need to change this in your svelte.config.js:

-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';

const config = {
...
    kit: {
-       adapter: adapter(),
+       adapter: adapter({strict: false}),
        alias: {
            $actions: 'src/lib/actions',
            $components: 'src/lib/components',
            $icons: 'src/lib/icons',
            $stores: 'src/lib/stores',
            $utils: 'src/lib/utils'
        },
+       prerender: {
+           // avoid throwing a prerendering error when using adapter-static and inlang dynamic routes
+           handleHttpError: 'warn'
+       }
    }
...
},
marksteven commented 1 year ago

Hi , Thanks for that and no issue with the time. Gave the project a go with your new build and after adding static adapter plus adding your suggestion(above)to svelte.config.js it again starts fine npm run dev But npm run build still threw error. "@sveltejs/adapter-static: all routes must be fully prerenderable, but found the following routes that are dynamic:

kit: { adapter: adapter({ pages: 'build', assets: 'build', fallback: undefined, precompress: false, strict: true }), alias: { $actions: 'src/lib/actions', $components: 'src/lib/components', $icons: 'src/lib/icons', $stores: 'src/lib/stores', $utils: 'src/lib/utils' }, prerender: { // avoid throwing a prerendering error when using adapter-static and inlang dynamic routes handleHttpError: 'warn' } },

buhodev commented 1 year ago

I then added a +layout.js with "export const prerender = true;"

I think this is not necessary when using the adapter static, since this is the default behaviour (to prerender all pages)

But npm run build still threw error.

Sorry, my bad. The strict property should be set to false, not true. I edited the comment above to fix the error. This is how it should be changed:

const config = {
...
    kit: {
-       adapter: adapter({strict: true}),
+       adapter: adapter({strict: false}),
    }
...
}

Note: It may not be the best solution, but it's a workaround.

Can you try and tell me if it works? Thanks in advance :)

marksteven commented 1 year ago

Hi Again, Well the answer is kind of yes and no so Ill explain. I altered the config.js file to reflect eg changed to false and tried a npm run dev which worked Then tried npm run build and that too built successfully plus automatically made a blank +layout.ts
not with "export const prerender = true;" Looking in the build folder there is no index.html page but as it all worked locally I thought I would try to put it on the cloud which I know from past experience needed the static pages to be there. It went up successfully as far as the cloud was concerned but the home page rendered below "This XML file does not appear to have any style information associated with it. The document tree is shown below.

AccessDenied Access Denied CF42JAKA1ZVB9V7F QI/cQMa2CI3IVriQY1CbB2vOxM9SaH+HkZeWXElqeM4jvomXHF1UxgRLCjwM8BTNOpacs0SFsmA= " Of course changing the false back to true will render the home page but breaks the i18n. I again added a +server.js with export const prerender = true; But that didnt build either So any ideas on how to get the home page rendered so the App can be accessed but not break the Lang?