Static
Run a static web server in any browser.
Our static template is powered by the NPM package static-browser-server, which is documented here in case you'd like to use it outside of Sandpack.
Install static browser server
npm i static-browser-server
Setup the static server
To setup a static browser server, setup a preview controller pointing to the static-browser-server preview files hosted on a wildcard domain. We're hosting the latest version at CodeSandbox on https://preview.sandpack-static-server.codesandbox.io, but feel free to self-host it.
// Map of files const files = new Map<string, string>(["index.html", "Hello world!"]); // Setup a preview controller const controller = new PreviewController({ baseUrl: "https://preview.sandpack-static-server.codesandbox.io", // Function to get the file content for the server this can also be async getFileContent: (filepath) => { const content = files.get(filepath); if (!content) { throw new Error("File not found"); } return content; }, }); // Initialize the preview // This will start up a relay frame and return a url which you can use to show the preview const previewUrl = await this.previewController.initPreview(); // Create a preview frame and set the src url to the returned preview url const iframe = document.createElement("iframe"); iframe.setAttribute("src", previewUrl);