Search code examples
cloudflaresveltekit

sveltekit static adapter does not work on cloudflare pages


I have a sveltekit website that I deployed to cloudflare pages, the problem is that when I deploy the app with the static adapter and try to visit the site it says "No webpage was found for the web address" but when I use the cloudflare adapter it works successfully, so I was intending to use the cloudflare adapter but I noticed that the number of "Functions requests today" was increasing although my app does not have any functions (some how every request is counted as a server function), So what am I doing wrong here?


Solution

  • When you run npm run build does the build directory contain an index.html file? If not you may need to specify prerender.default = true like so:

    import adapter from '@sveltejs/adapter-static';
    
    /** @type {import('@sveltejs/kit').Config} */
    const config = {
        kit: {
            adapter: adapter(),
            prerender: {
                default: true
            }
        }
    };
    
    export default config;
    

    With that you should get a /build directory that contains index.html. Next just follow the instructions from Cloudflare Pages documentation for deploying your site https://developers.cloudflare.com/pages/framework-guides/deploy-anything/

    These instructions include the following:

    Deploying with Cloudflare Pages

    Deploy your site to Pages by logging in to the Cloudflare dashboard > Account Home > Pages and selecting Create a project. Select the new GitHub repository that you created and, in the Set up builds and deployments section, provide the following information:

    Configuration option Value
    Production branch main
    Build command (optional) <YOUR_BUILD_COMMAND>
    Build output directory <YOUR_BUILD_DIR>

    Unlike many of the framework guides, the build command and build directory for your site are going to be completely custom. If you do not need a build step, leave the Build command field empty and specify a Build output directory. The build output directory is where your application's content lives.

    After configuring your site, you can begin your first deploy. Your custom build command (if provided) will run, and Pages will deploy your static site.

    For the complete guide to deploying your first site to Cloudflare Pages, refer to the Get started guide.

    After you have deployed your site, you will receive a unique subdomain for your project on *.pages.dev. Cloudflare Pages will automatically rebuild your project and deploy it. You will also get access to preview deployments on new pull requests, so you can preview how changes look to your site before deploying them to production.

    From these instructions it looks like you only need to set Production branch to your main branch (or which ever branch you would like deployed) and Build output directory to build (unless otherwise specified in your svelte.config.json). Ensure that your .gitignore does not include the /build directory unless you want to use the Build command config then go ahead and do that.