## Building a Simple Proxy Server to Showcase Wasm-Git In this tutorial, we demonstrate how to create a simple proxy server using Node.js to clone a GitHub repository with `wasm-git` and display the contents of the cloned repository on a webpage. This approach helps bypass the Cross-Origin Resource Sharing (CORS) restrictions typically encountered when trying to clone repositories directly from GitHub in the browser. ### Step 1: Setting Up the Proxy Server First, we create a Node.js server that serves an HTML page and a JavaScript file. It also acts as a proxy to forward requests to GitHub. #### `server.js` ```javascript import http from 'http'; import https from 'https'; import { parse } from 'url'; const PORT = process.env.PORT || 3000; const indexHtml = ` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wasm-Git Showcase</title> </head> <body> <h1>Wasm-Git Showcase</h1> <button id="cloneBtn">Clone Repository</button> <pre id="output"></pre> <script src="/client.js"></script> </body> </html> `; const clientJs = ` document.getElementById('cloneBtn').addEventListener('click', async () => { const lg2 = await import('https://cdn.jsdelivr.net/npm/wasm-git@0.0.13/lg2_async.js').then(r => r.default()); // Use the proxy server to clone the repository const repoUrl = 'http://localhost:3000/github/petersalomonsen/wasm-git.git'; await lg2.callMain(['clone', repoUrl, 'wasmgit']); // List the contents of the cloned repository const files = lg2.FS.readdir('/wasmgit'); document.getElementById('output').innerText = files.join('\\n'); }); `; const requestHandler = (req, res) => { const parsedUrl = parse(req.url); if (parsedUrl.pathname === '/') { res.writeHead(200, { 'Content-Type': 'text/html' }); res.end(indexHtml); } else if (parsedUrl.pathname === '/client.js') { res.writeHead(200, { 'Content-Type': 'application/javascript' }); res.end(clientJs); } else if (parsedUrl.pathname === '/favicon.ico') { res.writeHead(204); res.end(); } else if (parsedUrl.pathname.startsWith('/github')) { const targetPath = parsedUrl.path.replace('/github', ''); console.log(`Proxying request to: https://github.com${targetPath}`); const proxyOptions = { hostname: 'github.com', port: 443, path: targetPath, method: req.method, headers: { ...req.headers, host: 'github.com', }, }; const proxyReq = https.request(proxyOptions, (proxyRes) => { res.writeHead(proxyRes.statusCode, proxyRes.headers); proxyRes.pipe(res, { end: true, }); }); req.pipe(proxyReq, { end: true, }); proxyReq.on('error', (e) => { console.error(`Problem with request: ${e.message}`); res.writeHead(500, { 'Content-Type': 'text/plain' }); res.end('Internal Server Error'); }); } else { res.writeHead(404, { 'Content-Type': 'text/plain' }); res.end('Not Found'); } }; const server = http.createServer(requestHandler); server.listen(PORT, () => { console.log(`Proxy server is running on http://localhost:${PORT}`); }); ``` ### Step 2: Running the Server Save the script as `server.js` and run it using Node.js: ```bash node server.js ``` ### Step 3: Viewing the Results Open your browser and navigate to `http://localhost:3000`. You should see a simple webpage with a button labeled "Clone Repository". When you click this button, it triggers the cloning of the `wasm-git` repository via the proxy server. The contents of the cloned repository are then displayed on the webpage. ### Final Output Here's what the final output looks like:  ### Conclusion In this tutorial, we built a simple proxy server using Node.js to demonstrate cloning a GitHub repository with `wasm-git`. This setup helps bypass CORS restrictions and showcases the contents of the cloned repository directly in the browser. This approach can be extended to other projects where similar requirements exist. Feel free to customize and expand this setup based on your needs. Happy coding!