4 |
5 |
6 | 
7 |
8 |
25 |
26 |
27 |
28 |
29 |
Boxer
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
TL;DR:
150 |DOCKERFILE -> Universal Wasm Binary
151 |152 | Smaller, Safer, Faster, (much more) Universal 153 |
154 | 155 |156 | 157 | Check out our Github! 158 | 159 |
160 | 161 | or, get updates + early access to our release:
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
174 |
175 | 176 |
177 |
178 |
179 | 180 |
Overview
181 |Boxer is an open-source project designed to reimagine cloud computing by transitioning from traditional container technology to WebAssembly (Wasm) based distributions, known as "Boxes" or "WasmBoxes".
182 | 183 |Motivation
184 |While containers have been a cornerstone of cloud computing, they come with significant drawbacks. They often result in larger, less efficient deployments with slower startup times and rely heavily on the underlying operating system/kernel for security, which can introduce vulnerabilities and platform lock-in.
185 | 186 |Solution: Boxer
187 |Boxer (A.K.A "Wasm-Boxer") offers a new solution by providing tooling for converting existing containerized workloads and definitions into near-universally deployable Wasm distributions. These "Boxes" offer environments comparable to those provided by containers but are vastly more efficient thanks to the lightweight, sandboxed execution capabilities of WebAssembly.
188 | 189 |
190 |
191 |
192 |
193 |
Key Advantages of WebAssembly:
196 |-
197 |
- Reduced Overhead: Wasm's compact binary instruction format ensures lightweight execution, drastically cutting down the overhead seen in traditional containers. 198 |
- Enhanced Performance: The efficiency of Wasm leads to improved performance and smaller, more efficient deployments, perfectly suited for cloud computing. 199 |
- Superior Security: Wasm's memory-safe, isolated execution environment provides a higher level of security, independent of the operating system. 200 |
- Run (almost) Everywhere Wasm can run anywhere there is a WebAssembly runtime, including browsers, servers, and embedded devices; existing runtimes are available for a wide variety of architectures. 201 |
213 |
214 |
215 |
216 | 217 | 218 | 219 | -------------------------------------------------------------------------------- /boxer.dev/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', () => { 2 | const modePreference = window.matchMedia("(prefers-color-scheme: dark"); 3 | if (modePreference.matches) { 4 | document.getElementById('view-mode').checked = true; 5 | viewMode(); 6 | } 7 | }); 8 | 9 | document.getElementById('fetchFiles').onclick = async function () { 10 | const repoUrl = document.getElementById('repoUrl').value; 11 | gitHubFiles(repoUrl); 12 | }; 13 | 14 | document.getElementById('repoUrl').addEventListener('keydown', async function (e) { 15 | if (e.key === 'Enter') { 16 | const repoUrl = document.getElementById('repoUrl').value; 17 | gitHubFiles(repoUrl); 18 | } 19 | }); 20 | 21 | document.getElementById('view-mode').addEventListener("click", () => { 22 | viewMode(); 23 | }); 24 | 25 | let terminal; 26 | 27 | document.getElementById('deployButton').onclick = function () { 28 | document.getElementById('dashboard').style.display = "none"; 29 | terminal = new Terminal(); 30 | terminal.open(document.getElementById('terminal')); 31 | }; 32 | 33 | document.getElementById('returnButton').onclick = function () { 34 | document.getElementById('dashboard').style.display = "block"; 35 | terminal.dispose(); 36 | }; 37 | 38 | const gitHubFiles = async (repoUrl) => { 39 | const fileListElement = document.getElementById('fileList'); 40 | fileListElement.innerHTML = ''; 41 | 42 | const match = repoUrl.match(/github\.com\/([^\/]+)\/([^\/]+)/); 43 | console.log(match); 44 | if (!match) { 45 | alert('Invalid GitHub URL'); 46 | return; 47 | } 48 | 49 | const [_, owner, repo] = match; 50 | const apiUrl = `https://api.github.com/repos/${owner}/${repo}/contents`; 51 | 52 | try { 53 | const response = await fetch(apiUrl); 54 | if (!response.ok) { 55 | throw new Error(`Error fetching repository contents: ${response.statusText}`); 56 | } 57 | 58 | const files = await response.json(); 59 | files.forEach(file => { 60 | const listItem = document.createElement('li'); 61 | const link = document.createElement('a'); 62 | link.href = `https://github.com/${owner}/${repo}/blob/main/${file.path}`; // need to change the link to also get the branch name (if main doesnt exist it will send to a 404 not found) 63 | link.target = '_blank'; // Open link in a new tab 64 | link.textContent = file.path; 65 | listItem.appendChild(link); 66 | fileListElement.appendChild(listItem); 67 | }); 68 | } catch (error) { 69 | alert('Failed to fetch repository contents: ' + error.message); 70 | } 71 | }; 72 | 73 | const dockerfileLang = (language) => { 74 | switch (true) { 75 | case (language === 'python'): 76 | document.getElementById('dockerText').value = "# From Dockers official Python image: https://hub.docker.com/_/python\n\nFROM python:3\n\nWORKDIR /usr/src/app\n\nCOPY requirements.txt ./\nRUN pip install --no-cache-dir -r requirements.txt\n\nCOPY . .\n\nCMD [ 'python', './your-daemon-or-script.py' ]\n"; 77 | break; 78 | case (language === 'ruby'): 79 | document.getElementById('dockerText').value = "# From Dockers official Ruby image: https://hub.docker.com/_/ruby\n\nFROM ruby:3.3\n\n# Throw errors if Gemfile has been modified since Gemfile.lock\nRUN bundle config --global frozen 1\n\nWORKDIR /usr/src/app\n\nCOPY Gemfile Gemfile.lock ./\nRUN bundle install\n\nCOPY . .\n\nCMD [ './your-daemon-or-script.rb' ]\n"; 80 | break; 81 | default: 82 | document.getElementById('dockerText').value = "# From Dockers official GCC image: https://hub.docker.com/_/gcc\n\nFROM gcc:4.9\nCOPY . /usr/src/myapp\nWORKDIR /usr/src/myapp\nRUN gcc -o myapp main.c\nCMD ['./myapp']\n"; 83 | 84 | } 85 | }; 86 | 87 | const viewMode = () => { 88 | if (document.getElementById('view-mode').checked) { 89 | document.body.classList.remove('light-mode'); 90 | document.body.classList.add('dark-mode'); 91 | document.getElementById('github-icon').src = "img/github-dark.png"; 92 | } else { 93 | document.body.classList.remove('dark-mode'); 94 | document.body.classList.add('light-mode'); 95 | document.getElementById('github-icon').src = "img/github-light.png"; 96 | } 97 | }; -------------------------------------------------------------------------------- /boxer.dev/python-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
Boxer - Deploy a Python App Now
125 |
126 |
127 |
128 |
129 |
152 |
153 |
154 |
194 |
195 |
196 |
197 |
--------------------------------------------------------------------------------
/boxer.dev/python.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
130 |
144 |
145 |
131 |
132 |
133 |
135 | (Dockerfile)
136 |
142 |
143 |
146 |
147 |
148 |
149 |
150 |
151 |
148 |
149 |
150 |
15 |
76 |
16 |
36 |
17 | 
19 |
20 | Boxer
18 |
19 | 21 | Deploy a Python App Now 22 |
23 |
24 |
35 |
25 |
31 |
34 | Light/Dark
26 | 30 |
37 |
75 |
38 |
44 |
39 | 
40 |
41 |
42 |
43 |
40 |
41 |
42 |
45 |
74 |
46 |
52 | Github Files:
47 |
48 |
51 | -
49 |
53 |
73 |
54 |
61 |
55 |
60 | Dockerfile:
56 | 58 | 59 |
62 |
65 |
68 |
71 |
72 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/boxer.dev/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
6 | color: var(--text-color);
7 | }
8 |
9 | .light-mode {
10 | --bg-img: url("img/boxer-bg-light.png");
11 | --bg-img-mobile: url("img/boxer-bg-light-mobile.png");
12 | --text-color: black;
13 | --text-box: linear-gradient(lightgrey, lightgrey) padding-box,
14 | linear-gradient(white, #9ef4ff) border-box;
15 | --button-color: #9ef4ff;
16 | --button-box-shadow: #6399a0 0 2px 4px, #6399a0 0 7px 13px -3px, #8edbe5 0 -3px 0 inset;
17 | --button-box-shadow-active: #5e9299 0 3px 7px inset;
18 | --button-box-shadow-focus: #5e9299 0 0 0 1.5px inset, #6399a0 0 2px 4px, #6399a0 0 7px 13px -3px, #5e9299 0 -3px 0 inset
19 | }
20 |
21 | .dark-mode {
22 | --bg-img: url("img/boxer-bg-dark.png");
23 | --bg-img-mobile: url("img/boxer-bg-dark-mobile.png");
24 | --text-color: white;
25 | --text-box: linear-gradient(#0d1017, #0d1017) padding-box,
26 | linear-gradient(#0d1017, rebeccapurple) border-box;
27 | --button-color: #FCFCFD;
28 | --button-box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
29 | --button-box-shadow-active: #D6D6E7 0 3px 7px inset;
30 | --button-box-shadow-focus: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset
31 | }
32 |
33 | body {
34 | background-image: var(--bg-img);
35 | overflow: hidden;
36 | }
37 |
38 | .header {
39 | display: flex;
40 | justify-content: space-between;
41 | padding: 10px;
42 | margin: 20px;
43 | }
44 |
45 | .brand {
46 | display: flex;
47 | align-items: center;
48 | }
49 |
50 | .boxerLogo {
51 | height: 75px;
52 | width: 50px;
53 | }
54 |
55 | /* Containter for our Light/Dark mode switch */
56 | .mode-switch {
57 | position: relative;
58 | display: inline-block;
59 | width: 50px;
60 | height: 24px;
61 | }
62 |
63 | /* Will hide default checkbox */
64 | .mode-switch input {
65 | opacity: 0;
66 | width: 0;
67 | height: 0;
68 | }
69 |
70 | /* The track */
71 | .slider {
72 | position: absolute;
73 | cursor: pointer;
74 | background-color: #ccc;
75 | border-radius: 24px;
76 | width: 100%;
77 | height: 100%;
78 | transition: background-color 0.3s;
79 | }
80 |
81 | /* Rounded slider */
82 | .slider::before {
83 | content: "";
84 | position: absolute;
85 | height: 20px;
86 | width: 20px;
87 | left: 4px;
88 | bottom: 2px;
89 | background-color: white;
90 | border-radius: 50%;
91 | transition: transform 0.3s;
92 | }
93 |
94 | /* Toggled state */
95 | .mode-switch input:checked+.slider {
96 | background-color: rebeccapurple;
97 | }
98 |
99 | .mode-switch input:checked+.slider::before {
100 | transform: translateX(22px);
101 | }
102 |
103 | .container {
104 | height: 90vh;
105 | width: 100vw;
106 | display: flex;
107 | flex-direction: column;
108 | }
109 |
110 | .repo {
111 | width: 60vw;
112 | height: 20vh;
113 | margin-bottom: 20px;
114 | display: flex;
115 | align-self: center;
116 | justify-content: center;
117 | align-items: center;
118 | gap: 10px;
119 | }
120 |
121 | .repoWrapper {
122 | width: 60%;
123 | display: flex;
124 | align-items: center;
125 | background: var(--text-box);
126 | border: 1px solid transparent;
127 | border-radius: 10px;
128 | padding: 10px;
129 | border-radius: 10px;
130 | }
131 |
132 |
133 | .repoUrl {
134 | border: hidden;
135 | background-color: transparent;
136 | flex: 1;
137 | font-size: 20px;
138 | }
139 |
140 | input.repoUrl:focus {
141 | outline: none;
142 | }
143 |
144 |
145 | #fetchFiles {
146 | height: 30px;
147 | }
148 |
149 |
150 | .subContainer {
151 | width: 100vw;
152 | height: 50vh;
153 | display: flex;
154 |
155 | }
156 |
157 | .githubCode {
158 | display: flex;
159 | flex-direction: column;
160 | align-items: center;
161 | }
162 |
163 | .codebase {
164 | width: 50vw;
165 | display: flex;
166 | justify-content: center;
167 | height: 400px;
168 | padding: 15px 0px 15px 0px;
169 | }
170 |
171 | .fileList {
172 | column-width: 115px;
173 | }
174 |
175 | ul {
176 | list-style: none;
177 | }
178 |
179 | a {
180 | position: relative;
181 | text-decoration: none;
182 | }
183 |
184 | a::before {
185 | content: '';
186 | position: absolute;
187 | width: 100%;
188 | height: 1px;
189 | background-color: var(--text-color);
190 | bottom: 0;
191 | left: 0;
192 | transform-origin: right;
193 | transform: scaleX(0);
194 | transition: transform .3s ease-in-out;
195 | }
196 |
197 | a:hover::before {
198 | transform-origin: left;
199 | transform: scaleX(1);
200 | }
201 |
202 | .docker {
203 | width: 50vw;
204 | display: flex;
205 | align-items: center;
206 | }
207 |
208 | .dockerFile {
209 | display: flex;
210 | padding: 0px 10px 0px 0px;
211 | gap: 20px;
212 | }
213 |
214 | .dockerText {
215 | width: 550px;
216 | height: 400px;
217 | background: var(--text-box);
218 | border: 1px solid transparent;
219 | border-radius: 10px;
220 | padding: 10px;
221 | font-size: 15px;
222 | }
223 |
224 | textarea.dockerText:focus {
225 | outline: none;
226 | }
227 |
228 | .textBox {
229 | display: flex;
230 | flex-direction: column;
231 | align-items: center;
232 | gap: 10px;
233 | }
234 |
235 | .dockerLang {
236 | display: flex;
237 | flex-direction: column;
238 | gap: 10px;
239 | }
240 |
241 | .codeLang {
242 | border: hidden;
243 | background-color: transparent;
244 | }
245 |
246 |
247 | .button {
248 | align-items: center;
249 | align-self: center;
250 | background-color: var(--button-color);
251 | border-radius: 4px;
252 | border-width: 0;
253 | box-shadow: var(--button-box-shadow);
254 | box-sizing: border-box;
255 | color: black;
256 | display: inline-flex;
257 | height: 48px;
258 | justify-content: center;
259 | padding-left: 16px;
260 | padding-right: 16px;
261 | transition: box-shadow .15s, transform .15s;
262 | user-select: none;
263 | -webkit-user-select: none;
264 | touch-action: manipulation;
265 | white-space: nowrap;
266 | will-change: box-shadow, transform;
267 | font-size: 18px;
268 | }
269 |
270 | .button:focus {
271 | box-shadow: var(--button-box-shadow-focus);
272 | }
273 |
274 | .button:hover {
275 | transform: translateY(-2px);
276 | cursor: pointer;
277 | }
278 |
279 | .button:active {
280 | box-shadow: var(--button-box-shadow-active);
281 | transform: translateY(2px);
282 | }
283 |
284 |
285 | @media (max-width: 600px) {
286 | * {
287 | margin: 0;
288 | padding: 0;
289 | box-sizing: border-box;
290 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
291 | }
292 |
293 | body {
294 | overflow: scroll;
295 | background-image: var(--bg-img-mobile);
296 | }
297 |
298 | .header {
299 | display: flex;
300 | flex-direction: column;
301 | align-items: center;
302 | }
303 |
304 | .container {
305 | display: flex;
306 | flex-direction: column;
307 | }
308 |
309 | .subContainer {
310 | display: flex;
311 | flex-direction: column;
312 | }
313 |
314 | .repoWrapper {
315 | width: 100vw;
316 | display: flex;
317 | }
318 |
319 | .docker {
320 | width: 100vw;
321 | display: flex;
322 | flex-direction: column-reverse;
323 |
324 | }
325 |
326 | .dockerText {
327 | width: 80vw;
328 | height: 300px;
329 | resize: none;
330 | }
331 |
332 | .dockerLang {
333 | display: flex;
334 | flex-direction: row;
335 | }
336 | }
337 |
338 | #terminal {
339 | width: 100%;
340 | background-image: var(--bg-img);
341 | }
--------------------------------------------------------------------------------
/examples/c/async_server.c:
--------------------------------------------------------------------------------
1 | #include