Local Development Setup for CSS and JS

This guide explains how to set up a local development environment to test CSS and JavaScript changes.

The goal is to run a local proxy (mitmproxy) that intercepts requests from the live liquipedia.net site and replaces the production CSS and JS files with your local, compiled versions.

This allows you to see your changes live on the real site before pushing them.

---

1. One-Time Setup: mitmproxy & Browser

A. Install mitmproxy

mitmproxy is a Python tool. We'll install it with pip.

# Install pip if you don't have it
sudo pacman -S python-pip

# Install mitmproxy
pip install mitmproxy

# Add the install location to your PATH
# Add this to your ~/.bashrc (or whatever shell you use)
export PATH="$PATH:/home/YOUR_USER/.local/bin"

# Reload your shell
source ~/.bashrc

B. Configure browser to Trust mitmproxy

mitmproxy needs to decrypt https traffic, and your browser will block this unless you tell it to trust mitmproxy.

1. Run mitmproxy: In a terminal, just run mitmproxy once.

   On Windows, you have to setup the computer proxy to localhost:8080 before can access the mitm.it url.

2. Get the Certificate: Open browser and visit http://mitm.it. Click your OS icon to download mitmproxy-ca-cert.pem.

3. Import Certificate:

   • In Brave / your browser, go to brave://settings/security.
   • Click "Manage certificates".
   • Go to the "Custom" page.
   • Click "Import..." and select the .pem file you just downloaded.
   • Click OK.

4. Disable System Proxy: Go back to your Arch Network Settings and disable the manual proxy.

C. Install Browser Proxy Extension

This is much easier than toggling your system proxy.

1. In Brave / your browser, install "Proxy SwitchyOmega" from the Chrome Web Store.
2. Open its Options.
3. Create a New profile named mitmproxy.
4. Set the profile to:
   • Protocol: HTTP
   • Server: 127.0.0.1
   • Port: 8080
5. Click "Apply changes".

---

2. One-Time Setup: Your Local Configs (optional)

A. mitmproxy Alias

To save you from typing the long mitmproxy command, add these functions to your ~/.bashrc (or ~/.zshrc):

Remember to replace the file paths.

# replaces both js and css files with local counterparts
function proxy_lp() {
  mitmproxy \
    --map-local "|liquipedia\.net/commons/load\.php.*only=styles|/PATH-TO-REPO/Lua-Modules/lua/output/css/main.css" \
    --map-local "|liquipedia\.net/commons/load\.php.*only=scripts|/PATH-TO-REPO/Lua-Modules/lua/output/js/main.js"
}

# replaces just the css file with local counterpart
function proxy_lp_css() {
  mitmproxy --map-local "|liquipedia\.net/commons/load\.php.*only=styles|/PATH-TO-REPO/Lua-Modules/lua/output/css/main.css"
}

# replaces just the js file with local counterpart
function proxy_lp_js() {
  mitmproxy --map-local "|liquipedia\.net/commons/load\.php.*only=scripts|/PATH-TO-REPO/Lua-Modules/lua/output/js/main.js"
}

Reload your shell with source ~/.bashrc.

B. Neovim Keymaps (can probably setup something similar in VS Code?)

Add this to your Neovim keymaps file to run the build with <leader>rb. These scripts run the JS/CSS or both build commands when operating within Lua-Modules.

vim.keymap.set("n", "<leader>rb", function()
  vim.notify("🚀 Running npm run build...", vim.log.levels.INFO)
  vim.fn.system('npm run build')

  if vim.v.shell_error == 0 then
	vim.notify("🎉 Liquipedia JS/CSS built successfully!", vim.log.levels.INFO)
  else
	vim.notify("❌ Liquipedia JS/CSS build failed!", vim.log.levels.ERROR)
  end
end, { noremap = true, silent = true, desc = "Build Liquipedia JS/CSS" })

vim.keymap.set("n", "<leader>rj", function()
  vim.notify("🚀 Running npm run build:js...", vim.log.levels.INFO)
  vim.fn.system('npm run build:js')

  if vim.v.shell_error == 0 then
	vim.notify("🎉 Liquipedia JS built successfully!", vim.log.levels.INFO)
  else
	vim.notify("❌ Liquipedia JS build failed!", vim.log.levels.ERROR)
  end
end, { noremap = true, silent = true, desc = "Build Liquipedia JS" })

vim.keymap.set("n", "<leader>rc", function()
  vim.notify("🚀 Running npm run build:css...", vim.log.levels.INFO)
  vim.fn.system('npm run build:css')

  if vim.v.shell_error == 0 then
	vim.notify("🎉 Liquipedia CSS built successfully!", vim.log.levels.INFO)
  else
	vim.notify("❌ Liquipedia CSS build failed!", vim.log.levels.ERROR)
  end
end, { noremap = true, silent = true, desc = "Build Liquipedia CSS" })

---

4. The Day-to-Day Workflow

You're all set. Here is your daily process.

1. Start the Proxy: Open a terminal and run your new alias:

   proxy_lp

   (Leave this terminal running).

2. Enable the Proxy in Brave: Click the Proxy SwitchyOmega icon in your toolbar and select the mitmproxy profile.

3. Edit and Build:

   • In Neovim, make your changes to any .scss or .js file inside the Lua-Modules directory.
   • When ready, press <leader>rb to build.
   • You'll see a "Build complete!" notification.

4. View Changes: Refresh the Liquipedia page in Brave. (Use Ctrl+Shift+R for a hard reload if your changes don't appear).

5. When You're Done:

   • Stop the proxy: Press q and y in the mitmproxy terminal.
   • Disable the proxy: Click the SwitchyOmega icon and select [Direct].