Sapper/Svelte.js - 如何指定客户端资产位置？

Question

I have a Sapper.js application that I have successfully running on AWS Lambda. Lambda is able to deliver the server-side generated HTML created by Sapper to AWS API Gateway which then serves the app to the user. I am using S3 to host the client side assets (scripts, webpack chunks, etc). The S3 bucket is on a different domain than API Gateway.

The issue I'm having is that I need to set an asset prefix for these scripts so that Sapper can find them. Currently all of my client side scripts include relative links and look like this: <script src="/client/be33a1fe9c8bbaa6fa9d/SCRIPT_NAME.js"></script> I need to have them look like this: <script src="https://AWS_S3_BUCKET_ENDPOINT.com/client/be33a1fe9c8bbaa6fa9d/SCRIPT_NAME.js"></script>

Looking in the Sapper docs , I see that I can specify a base url for the client and server. However, changing this base url breaks my app and causes the Lambda rendering the pages to return 404 errors.

I know that when using, say, Next.js, I can accomplish this by modifying the next.config.js file to include the following:

module.exports = {
  assetPrefix: "https://AWS_S3_BUCKET_ENDPOINT.com/client",
}

But I don't know how to do this in Sapper. Do I need to modify the bundler (using webpack) config? Or is there some other way?

Thank you.

Answer 1

I think I've figured it out.

I had to change two sapper files. First I went into sapper/dist/webpack.js and modified it like so:

'use strict';

var __chunk_3 = require('./chunk3.js');

var webpack = {
    dev: __chunk_3.dev,

    client: {
        entry: () => {
            return {
                main: `${__chunk_3.src}/client`
            };
        },

        output: () => {
            return {
                path: `${__chunk_3.dest}/client`,
                filename: '[hash]/[name].js',
                chunkFilename: '[hash]/[name].[id].js',
                // change this line to point to the s3 bucket client key
                publicPath: "https://AWS_S3_BUCKET_ENDPOINT.com/client"
            };
        }
    },

    server: {
        entry: () => {
            return {
                server: `${__chunk_3.src}/server`
            };
        },

        output: () => {
            return {
                path: `${__chunk_3.dest}/server`,
                filename: '[name].js',
                chunkFilename: '[hash]/[name].[id].js',
                libraryTarget: 'commonjs2'
            };
        }
    },

    serviceworker: {
        entry: () => {
            return {
                'service-worker': `${__chunk_3.src}/service-worker`
            };
        },

        output: () => {
            return {
                path: __chunk_3.dest,
                filename: '[name].js',
                chunkFilename: '[name].[id].[hash].js',
                // change this line to point to the s3 bucket root
                publicPath: "https://AWS_S3_BUCKET_ENDPOINT.com"
            }
        }
    }
};

module.exports = webpack;
//# sourceMappingURL=webpack.js.map

Then I had to modify sapper/runtime/server.mjs so that the main variable points to the bucket like so:

...

const main = `https://AWS_S3_BUCKET_ENDPOINT.com/client/${file}`;

...

Testing with the basic sapper webpack template, I can confirm that the scripts are loading from the s3 bucket successully. So far this all looks good. I will mess around with the sapper build command next to make it so I can pass these hacks in as command line arguments so I don't have to hardcode them every time.

Now, I'm not sure if this will hold up as the app becomes more complicated. Looking into the sapper/runtime/server.mjs file, I see that the req.baseUrl property is referenced in several different locations and I don't know if my hacks will cause any issues with this. Or anywhere else in sapper for that matter.

If anyone with more experience with the Sapper internals is reading, let me know in the comments if I screwed something up 👍