External Files

Many projects are built on top of existing libraries, such as Bootstrap or Material UI which offer distribution via a CDN. However, serving the files from the CDN is not usually the best option - it would require a less strict Content Security Policy and no longer benefits from a shared cache. Hence it's better to serve the files directly from your own server in the same manner you distribute your other static assets.

However, ease of deployment is a big concern, since nearly every web project is a good target for continuous integration and continuous delivery (CI/CD). Hence one might be tempted to actually store these external files in their own repository. This is definitely simple from a CI/CD perspective, but makes versioning a pain and leads to spuriously large commits and repositories.

To avoid this issue, Vanilla Plus JS can be configured to have source code files downloaded if they do not exist. After downloading they will go through standard processing – which will also make them CSP-friendly, even if they otherwise might not be. For example, the inline SVGs in many minified CSS files will be outlined for you. The following is an example of how to configure vanillaplusjs.json to download (or update) bootstrap if it's not available (or is out of date). Note that the parts of the configuration not related to external files are not shown.

{
    "external_files": {
        "src/public/css/lib/bootstrap.min.css": {
            "url": "https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css",
            "integrity": "sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
        },
        "src/public/js/lib/bootstrap.min.js": {
            "url": "https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js",
            "integrity": "sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
        }
    }
}

It's recommended you rebuild after changing external files, even if just by closing and restarting the vanillaplusjs dev --watch command. For performance, these files are not typically rechecked by the dev server except on first launch.