How to setup StencilJS components on S3 and CloudFront

Question

I have a few components and I want to deploy them into S3 and make them reachable with CloudFront.

My problem is that I don't know what file(s) I need to upload to S3 and which file needs CloudFront needs to point to as entry point.

Here's my stencil.config.tsx:

import { Config } from '@stencil/core';

export const config: Config = {
    namespace: 'stencil-test',
    taskQueue: 'async',
    outputTargets: [
        {
            type: 'dist',
            esmLoaderPath: '../loader',
            dir: './build/dist'
        },
        {
            type: 'www',
            serviceWorker: null // disable service workers
        }
    ]
};

I tried executing npm run build that generated a couple of folders: build/loader and build/dist there's a lot of stuff within each folder but I have no idea how which folder and files are supposed to do what.

It was hoping the build command would generate a minified file that contained all the stuff needed (is this how it works?) so I could eventually do something like the following where I want to use my components:

<script type="module" src='https://cdn.jsdelivr.net/npm/[email protected]/dist/myname.js'></script>

Can anyone offer some guidance or point me towards any resources?

Answer 1

The www output target is meant for generating apps and not really relevant for component libraries. To host your components, you should upload the whole generated dist folder. Only the files that the client needs are downloaded, which depends on the client and which components they access (lazy-loading). So you don't need to worry about the amount of files. See https://stenciljs.com/docs/distribution.

To start, Stencil was designed to lazy-load itself only when the component was actually used on a page. There are many benefits to this approach, such as simply adding a script tag to any page and the entire library is available for use, yet only the components actually used are downloaded.

---

If you want to generate a single bundle containing all your components, there's an output target called dist-custom-elements-bundle. For the differences to dist you can have a look at the same docs link above.

One of the main differences is that loading the script doesn't automatically register the components for you, you'll have to either do it manually per component (using customElements.define(), or define them all using the defineCustomElements() export. The official documentation for that output target is https://stenciljs.com/docs/custom-elements.