> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/mercuryworkshop/scramjet/llms.txt
> Use this file to discover all available pages before exploring further.
# Basic setup
> Step-by-step guide to set up Scramjet in your web application
This guide walks you through setting up Scramjet, a powerful web proxy framework that enables you to create isolated browsing contexts.
## Prerequisites
Before you begin, ensure you have:
* A web server capable of serving static files
* Service worker support in your target browsers
* The Scramjet distribution files (`scramjet.all.js`, `scramjet.wasm.wasm`, `scramjet.sync.js`)
## Installation
Place the Scramjet distribution files in your project directory. These files should be accessible via your web server:
```
/public/
scramjet.all.js
scramjet.wasm.wasm
scramjet.sync.js
```
Create a script to register Scramjet's service worker. This is essential for intercepting and proxying requests:
```javascript theme={null}
// Register the service worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js', {
scope: '/',
}).then((registration) => {
console.log('Scramjet service worker registered:', registration);
}).catch((error) => {
console.error('Service worker registration failed:', error);
});
}
```
The service worker file (`sw.js`) should import Scramjet using `importScripts('/scramjet.all.js')` and set up the fetch handler. See the [quickstart guide](/quickstart) for a complete service worker example.
The `scope` parameter defines the URL prefix that the service worker will intercept. By default, Scramjet uses `/scramjet/`.
After the service worker is registered and ready, load and initialize the Scramjet controller:
```javascript theme={null}
// Wait for service worker to be ready
await navigator.serviceWorker.ready;
// Load the controller module
const { ScramjetController } = $scramjetLoadController();
// Create a controller instance with configuration
const scramjet = new ScramjetController({
prefix: '/scramjet/',
flags: {
strictRewrites: true,
captureErrors: true,
},
});
// Initialize the controller
await scramjet.init();
```
Create an isolated iframe context for proxied browsing:
```javascript theme={null}
// Create a new Scramjet frame
const frame = scramjet.createFrame();
// Add the iframe to your page
document.body.appendChild(frame.frame);
// Navigate to a URL
frame.go('https://example.com');
```
## Complete example
Here's a full working example that ties everything together:
```html theme={null}
Scramjet Example
```
## Configuration options
The `ScramjetController` constructor accepts a configuration object with the following options:
The URL prefix for the proxy. Defaults to `/scramjet/`.
```javascript theme={null}
const scramjet = new ScramjetController({
prefix: '/proxy/',
});
```
Feature flags that control Scramjet's behavior. See [Configuration flags](/guides/configuration-flags) for details.
```javascript theme={null}
const scramjet = new ScramjetController({
flags: {
strictRewrites: true,
captureErrors: true,
sourcemaps: true,
},
});
```
Custom URL encoding/decoding functions. See [Custom codecs](/guides/custom-codecs) for details.
```javascript theme={null}
const scramjet = new ScramjetController({
codec: {
encode: (url) => btoa(url),
decode: (url) => atob(url),
},
});
```
Paths to Scramjet distribution files.
```javascript theme={null}
const scramjet = new ScramjetController({
files: {
wasm: '/scramjet.wasm.wasm',
all: '/scramjet.all.js',
sync: '/scramjet.sync.js',
},
});
```
## Next steps
Learn how to create and manage isolated browsing contexts
Handle navigation and download events
Customize Scramjet's behavior with feature flags
Implement custom URL encoding strategies