SvelteKit One Bundle screenshot

SvelteKit One Bundle

Author Avatar Theme by D velopment
Updated: 26 Jan 2023
9 Stars

Hacky solution to build SvelteKit project in a looking-like-one bundle.js

Categories

Overview

The SvelteKit-One-Bundle is a custom solution developed to address the limitation of the SvelteKit Static Adapter in rendering the application with a single bundle.js file. It provides a workaround by exploding and re-wrapping the project into an initial bundle and a custom index.html to load the bundle from. The final build is located in the dist folder.

Features

  • Single Bundle File: The solution ensures that the application is loaded and rendered using a single bundle.js file.
  • Custom index.html: A custom index.html file is generated to load the bundle.js file and render the application within the .overlay element.
  • Easy Development Preview: A development preview is available for testing and previewing the wrapped build.

Installation

To install and use the SvelteKit-One-Bundle, follow these steps:

  1. Ensure that Python is installed on your machine if you are using macOS.
  2. Configure the static adapter’s fallback in the svelte.config.js file to use the temporary bundle.html fallback, which will later be converted to bundle.js.
  3. Pre-compose the src/static/index.page file, which will become the index.html file after the build. This file should contain the .overlay element where the running application will be rendered.
  4. Run the provided Python command to initiate the build.

Summary

The SvelteKit-One-Bundle is a solution developed to address the limitation of the SvelteKit Static Adapter. It allows the application to be loaded and rendered using a single bundle.js file and provides a custom index.html to facilitate the rendering process. The installation process is straightforward and can be done by following a few simple steps.