This guide covers the setup of Ultraviolet (UV), including creating a new frontend or integrating an existing one. If you need assistance, feel free to DM me on Discord @crllect.
Start by downloading the template available in this repository.
-
Clone the most recent version of Ultraviolet from here. You can either build it yourself or download the
.tgzfile. -
Unzip the downloaded file. (Note that on windows, you cant extract
.tgzfiles without win-rar, 7zip or any other program.Search up "tgz to zip" online, and then convert it to zip so you can extract it)
-
Inside the
distdirectory (titaniumnetwork-dev-ultraviolet-x.x.x/package/dist), download all.jsfiles and place them inpublic/uv.
- Note: I have attached my own modified UV files, but they may be out of date. If you dont want to clone and build everything, just use my files
Place all your frontend code, including assets, inside the public directory of the template.
- Note: The
.gitignorein the template already excludes node modules. - Open the
server.jsfile in the template and modify it according to the instructions provided in the file.
In your html, add the following to <head>
<script src="/uv/uv.bundle.js"></script>
<script src="/uv/uv.config.js"></script>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", () => {
navigator.serviceWorker.register("/uv/sw.js", {
scope: __uv$config.prefix,
});
});
}
</script>Now, if you know what your doing, in your JS, all you need to do is this:
location.href = __uv$config.prefix + __uv$config.encodeUrl(url);
If that didn't make sense, its ok.
Im going go ahead and assume you know the basics of html and css,
Start off by having an iframe window with no src. Add the class and iframeWindow, you can name it something else, but change the JS appropriately.
<iframe id="iframeWindow" class="iframeWindow"></iframe>Then add a text input to your html:
<input type="text" id="urlInput" placeholder="Enter URL here">
<button id="searchButton">Search Text</button>add this to your JS, if you changed the class or ID name, change it in here too:
document // makes it so you can press enter to submit as opposed to just being able to press a button
.getElementById("urlInput")
.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
event.preventDefault();
document.getElementById("searchButton").click();
}
});
document.getElementById("searchButton").onclick = function (event) {
event.preventDefault();
let url = document.getElementById("urlInput").value; // If no periods are detected in the input, search google instead
let searchUrl = "https://www.google.com/search?q=";
if (!url.includes(".")) {
url = searchUrl + encodeURIComponent(url);
} else {
if (!url.startsWith("http://") && !url.startsWith("https://")) { // if no http or https is detected, add https automatically
url = "https://" + url;
}
}
iframeWindow.src = __uv$config.prefix + __uv$config.encodeUrl(url);
};Only do this the first time:
- Open a terminal in the directory of your project in VSCode, this is as easy and
ctrl-shift-Con your project, and runnpm i @tomphttp/bare-server-node express
- Note: Renaming the template after running the next command will cause it to stop working. Rename the template to your repository name before runnng
npm i @tomphttp/bare-server-node express. If you want to rename it after uninstall using npm or delete the package files and the node_modules directory
- Add
"type": "module"topackage.json. Example:
Before:
{
"dependencies": {
"@tomphttp/bare-server-node": "^2.0.1",
"express": "^4.18.2"
}
}After:
{
"dependencies": {
"@tomphttp/bare-server-node": "^2.0.1",
"express": "^4.18.2"
},
"type": "module"
}- Note: don't forget the comma after the ending curly bracket of
dependencies
Every time you start it up:
You can start it by typing node server.js into the terminal window, you can now visit it localy by typing localhost:Port into a web browser
- Note: The default port is 8080
There are infinately many ways to do this, replit does not any form of proxies, and has spotty uptime, so that will usually be a no-go. Many hosts such as vercel and cloudflare are static hosts, meaning they cant support the backend logic required for UltraViolet. Solution: A solution I have found is to use either a bare metal or cheap online service to host the bare server, and something like cloudflare or vercel to host the frontend
- Note: If you end up using two seperate services for front end and backend, then you need to go to
public/uv/uv.config.jsand change the bare server to your bare server. Example:
/*global Ultraviolet*/
self.__uv$config = {
prefix: '/uv/service/',
bare: 'INSERT YOUR BARE SERVER HERE, IF IN THE SAME SERVICE AS FRONTEND PUT: /bare/ IF AN EXTERNAL SERVICE: https://link.external.service/bare/',
encodeUrl: Ultraviolet.codec.xor.encode,
decodeUrl: Ultraviolet.codec.xor.decode,
handler: '/uv/uv.handler.js',
client: '/uv/uv.client.js',
bundle: '/uv/uv.bundle.js',
config: '/uv/uv.config.js',
sw: '/uv/uv.sw.js',
};
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent