Files
bolt.diy/CONTRIBUTING/index.html
2025-02-10 21:44:49 +00:00

997 lines
40 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="prev" href="..">
<link rel="next" href="../FAQ/">
<link rel="icon" href="../assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.6.3">
<title>Contribution Guidelines - bolt.diy Docs</title>
<link rel="stylesheet" href="../assets/stylesheets/main.d7758b05.min.css">
<link rel="stylesheet" href="../assets/stylesheets/palette.06af60db.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#contribution-guidelines" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href=".." title="bolt.diy Docs" class="md-header__button md-logo" aria-label="bolt.diy Docs" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
bolt.diy Docs
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Contribution Guidelines
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6m0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4M7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"/></svg>
</label>
<input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 7H7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h10a5 5 0 0 0 5-5 5 5 0 0 0-5-5m0 8a3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3 3 3 0 0 1-3 3"/></svg>
</label>
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
<div class="md-search__suggest" data-md-component="search-suggest"></div>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/stackblitz-labs/bolt.diy" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</div>
<div class="md-source__repository">
bolt.diy
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href=".." class="md-tabs__link">
Welcome to bolt diy
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="./" class="md-tabs__link">
Contribution Guidelines
</a>
</li>
<li class="md-tabs__item">
<a href="../FAQ/" class="md-tabs__link">
Frequently Asked Questions (FAQ)
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted md-nav--integrated" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href=".." title="bolt.diy Docs" class="md-nav__button md-logo" aria-label="bolt.diy Docs" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>
</a>
bolt.diy Docs
</label>
<div class="md-nav__source">
<a href="https://github.com/stackblitz-labs/bolt.diy" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</div>
<div class="md-source__repository">
bolt.diy
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href=".." class="md-nav__link">
<span class="md-ellipsis">
Welcome to bolt diy
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Contribution Guidelines
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Contribution Guidelines
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#table-of-contents" class="md-nav__link">
<span class="md-ellipsis">
📋 Table of Contents
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#code-of-conduct" class="md-nav__link">
<span class="md-ellipsis">
🛡️ Code of Conduct
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#how-can-i-contribute" class="md-nav__link">
<span class="md-ellipsis">
🛠️ How Can I Contribute?
</span>
</a>
<nav class="md-nav" aria-label="🛠️ How Can I Contribute?">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#1-reporting-bugs-or-feature-requests" class="md-nav__link">
<span class="md-ellipsis">
1⃣ Reporting Bugs or Feature Requests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#2-code-contributions" class="md-nav__link">
<span class="md-ellipsis">
2⃣ Code Contributions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#3-join-as-a-core-contributor" class="md-nav__link">
<span class="md-ellipsis">
3⃣ Join as a Core Contributor
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#pull-request-guidelines" class="md-nav__link">
<span class="md-ellipsis">
✅ Pull Request Guidelines
</span>
</a>
<nav class="md-nav" aria-label="✅ Pull Request Guidelines">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#pr-checklist" class="md-nav__link">
<span class="md-ellipsis">
PR Checklist
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#review-process" class="md-nav__link">
<span class="md-ellipsis">
Review Process
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#coding-standards" class="md-nav__link">
<span class="md-ellipsis">
📏 Coding Standards
</span>
</a>
<nav class="md-nav" aria-label="📏 Coding Standards">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#general-guidelines" class="md-nav__link">
<span class="md-ellipsis">
General Guidelines
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#development-setup" class="md-nav__link">
<span class="md-ellipsis">
🖥️ Development Setup
</span>
</a>
<nav class="md-nav" aria-label="🖥️ Development Setup">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#1-initial-setup" class="md-nav__link">
<span class="md-ellipsis">
1⃣ Initial Setup
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#2-run-development-server" class="md-nav__link">
<span class="md-ellipsis">
2⃣ Run Development Server
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#testing" class="md-nav__link">
<span class="md-ellipsis">
🧪 Testing
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#deployment" class="md-nav__link">
<span class="md-ellipsis">
🚀 Deployment
</span>
</a>
<nav class="md-nav" aria-label="🚀 Deployment">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#deploy-to-cloudflare-pages" class="md-nav__link">
<span class="md-ellipsis">
Deploy to Cloudflare Pages
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#docker-deployment" class="md-nav__link">
<span class="md-ellipsis">
🐳 Docker Deployment
</span>
</a>
<nav class="md-nav" aria-label="🐳 Docker Deployment">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#development-environment" class="md-nav__link">
<span class="md-ellipsis">
🧑‍💻 Development Environment
</span>
</a>
<nav class="md-nav" aria-label="🧑‍💻 Development Environment">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#build-options" class="md-nav__link">
<span class="md-ellipsis">
Build Options
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#running-the-development-container" class="md-nav__link">
<span class="md-ellipsis">
Running the Development Container
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#production-environment" class="md-nav__link">
<span class="md-ellipsis">
🏭 Production Environment
</span>
</a>
<nav class="md-nav" aria-label="🏭 Production Environment">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#build-options_1" class="md-nav__link">
<span class="md-ellipsis">
Build Options
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#running-the-production-container" class="md-nav__link">
<span class="md-ellipsis">
Running the Production Container
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#coolify-deployment" class="md-nav__link">
<span class="md-ellipsis">
Coolify Deployment
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#vs-code-dev-containers-integration" class="md-nav__link">
<span class="md-ellipsis">
🛠️ VS Code Dev Containers Integration
</span>
</a>
<nav class="md-nav" aria-label="🛠️ VS Code Dev Containers Integration">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#steps-to-use-dev-containers" class="md-nav__link">
<span class="md-ellipsis">
Steps to Use Dev Containers
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#environment-variables" class="md-nav__link">
<span class="md-ellipsis">
🔑 Environment Variables
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../FAQ/" class="md-nav__link">
<span class="md-ellipsis">
Frequently Asked Questions (FAQ)
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="contribution-guidelines">Contribution Guidelines<a class="headerlink" href="#contribution-guidelines" title="Permanent link">&para;</a></h1>
<p>Welcome! This guide provides all the details you need to contribute effectively to the project. Thank you for helping us make <strong>bolt.diy</strong> a better tool for developers worldwide. 💡</p>
<hr />
<h2 id="table-of-contents">📋 Table of Contents<a class="headerlink" href="#table-of-contents" title="Permanent link">&para;</a></h2>
<ol>
<li><a href="#code-of-conduct">Code of Conduct</a></li>
<li><a href="#how-can-i-contribute">How Can I Contribute?</a></li>
<li><a href="#pull-request-guidelines">Pull Request Guidelines</a></li>
<li><a href="#coding-standards">Coding Standards</a></li>
<li><a href="#development-setup">Development Setup</a></li>
<li><a href="#testing">Testing</a></li>
<li><a href="#deployment">Deployment</a></li>
<li><a href="#docker-deployment">Docker Deployment</a></li>
<li><a href="#vs-code-dev-containers-integration">VS Code Dev Containers Integration</a></li>
</ol>
<hr />
<h2 id="code-of-conduct">🛡️ Code of Conduct<a class="headerlink" href="#code-of-conduct" title="Permanent link">&para;</a></h2>
<p>This project is governed by our <strong>Code of Conduct</strong>. By participating, you agree to uphold this code. Report unacceptable behavior to the project maintainers.</p>
<hr />
<h2 id="how-can-i-contribute">🛠️ How Can I Contribute?<a class="headerlink" href="#how-can-i-contribute" title="Permanent link">&para;</a></h2>
<h3 id="1-reporting-bugs-or-feature-requests">1⃣ Reporting Bugs or Feature Requests<a class="headerlink" href="#1-reporting-bugs-or-feature-requests" title="Permanent link">&para;</a></h3>
<ul>
<li>Check the <a href="#">issue tracker</a> to avoid duplicates.</li>
<li>Use issue templates (if available).</li>
<li>Provide detailed, relevant information and steps to reproduce bugs.</li>
</ul>
<h3 id="2-code-contributions">2⃣ Code Contributions<a class="headerlink" href="#2-code-contributions" title="Permanent link">&para;</a></h3>
<ol>
<li>Fork the repository.</li>
<li>Create a feature or fix branch.</li>
<li>Write and test your code.</li>
<li>Submit a pull request (PR).</li>
</ol>
<h3 id="3-join-as-a-core-contributor">3⃣ Join as a Core Contributor<a class="headerlink" href="#3-join-as-a-core-contributor" title="Permanent link">&para;</a></h3>
<p>Interested in maintaining and growing the project? Fill out our <a href="https://forms.gle/TBSteXSDCtBDwr5m7">Contributor Application Form</a>.</p>
<hr />
<h2 id="pull-request-guidelines">✅ Pull Request Guidelines<a class="headerlink" href="#pull-request-guidelines" title="Permanent link">&para;</a></h2>
<h3 id="pr-checklist">PR Checklist<a class="headerlink" href="#pr-checklist" title="Permanent link">&para;</a></h3>
<ul>
<li>Branch from the <strong>main</strong> branch.</li>
<li>Update documentation, if needed.</li>
<li>Test all functionality manually.</li>
<li>Focus on one feature/bug per PR.</li>
</ul>
<h3 id="review-process">Review Process<a class="headerlink" href="#review-process" title="Permanent link">&para;</a></h3>
<ol>
<li>Manual testing by reviewers.</li>
<li>At least one maintainer review required.</li>
<li>Address review comments.</li>
<li>Maintain a clean commit history.</li>
</ol>
<hr />
<h2 id="coding-standards">📏 Coding Standards<a class="headerlink" href="#coding-standards" title="Permanent link">&para;</a></h2>
<h3 id="general-guidelines">General Guidelines<a class="headerlink" href="#general-guidelines" title="Permanent link">&para;</a></h3>
<ul>
<li>Follow existing code style.</li>
<li>Comment complex logic.</li>
<li>Keep functions small and focused.</li>
<li>Use meaningful variable names.</li>
</ul>
<hr />
<h2 id="development-setup">🖥️ Development Setup<a class="headerlink" href="#development-setup" title="Permanent link">&para;</a></h2>
<h3 id="1-initial-setup">1⃣ Initial Setup<a class="headerlink" href="#1-initial-setup" title="Permanent link">&para;</a></h3>
<ul>
<li>Clone the repository:
<div class="highlight"><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>git<span class="w"> </span>clone<span class="w"> </span>https://github.com/stackblitz-labs/bolt.diy.git
</code></pre></div></li>
<li>Install dependencies:
<div class="highlight"><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a>pnpm<span class="w"> </span>install
</code></pre></div></li>
<li>Set up environment variables:</li>
<li>Rename <code>.env.example</code> to <code>.env.local</code>.</li>
<li>Add your API keys:
<div class="highlight"><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a><span class="nv">GROQ_API_KEY</span><span class="o">=</span>XXX
<a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a><span class="nv">HuggingFace_API_KEY</span><span class="o">=</span>XXX
<a id="__codelineno-2-3" name="__codelineno-2-3" href="#__codelineno-2-3"></a><span class="nv">OPENAI_API_KEY</span><span class="o">=</span>XXX
<a id="__codelineno-2-4" name="__codelineno-2-4" href="#__codelineno-2-4"></a>...
</code></pre></div></li>
<li>Optionally set:<ul>
<li>Debug level: <code>VITE_LOG_LEVEL=debug</code></li>
<li>Context size: <code>DEFAULT_NUM_CTX=32768</code></li>
</ul>
</li>
</ul>
<p><strong>Note</strong>: Never commit your <code>.env.local</code> file to version control. Its already in <code>.gitignore</code>.</p>
<h3 id="2-run-development-server">2⃣ Run Development Server<a class="headerlink" href="#2-run-development-server" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a>pnpm<span class="w"> </span>run<span class="w"> </span>dev
</code></pre></div>
<p><strong>Tip</strong>: Use <strong>Google Chrome Canary</strong> for local testing.</p>
<hr />
<h2 id="testing">🧪 Testing<a class="headerlink" href="#testing" title="Permanent link">&para;</a></h2>
<p>Run the test suite with:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a>pnpm<span class="w"> </span><span class="nb">test</span>
</code></pre></div>
<hr />
<h2 id="deployment">🚀 Deployment<a class="headerlink" href="#deployment" title="Permanent link">&para;</a></h2>
<h3 id="deploy-to-cloudflare-pages">Deploy to Cloudflare Pages<a class="headerlink" href="#deploy-to-cloudflare-pages" title="Permanent link">&para;</a></h3>
<div class="highlight"><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1" href="#__codelineno-5-1"></a>pnpm<span class="w"> </span>run<span class="w"> </span>deploy
</code></pre></div>
<p>Ensure you have required permissions and that Wrangler is configured.</p>
<hr />
<h2 id="docker-deployment">🐳 Docker Deployment<a class="headerlink" href="#docker-deployment" title="Permanent link">&para;</a></h2>
<p>This section outlines the methods for deploying the application using Docker. The processes for <strong>Development</strong> and <strong>Production</strong> are provided separately for clarity.</p>
<hr />
<h3 id="development-environment">🧑‍💻 Development Environment<a class="headerlink" href="#development-environment" title="Permanent link">&para;</a></h3>
<h4 id="build-options">Build Options<a class="headerlink" href="#build-options" title="Permanent link">&para;</a></h4>
<p><strong>Option 1: Helper Scripts</strong></p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a><span class="c1"># Development build</span>
<a id="__codelineno-6-2" name="__codelineno-6-2" href="#__codelineno-6-2"></a>npm<span class="w"> </span>run<span class="w"> </span>dockerbuild
</code></pre></div>
<p><strong>Option 2: Direct Docker Build Command</strong></p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1" href="#__codelineno-7-1"></a>docker<span class="w"> </span>build<span class="w"> </span>.<span class="w"> </span>--target<span class="w"> </span>bolt-ai-development
</code></pre></div>
<p><strong>Option 3: Docker Compose Profile</strong></p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-8-1" name="__codelineno-8-1" href="#__codelineno-8-1"></a>docker<span class="w"> </span>compose<span class="w"> </span>--profile<span class="w"> </span>development<span class="w"> </span>up
</code></pre></div>
<h4 id="running-the-development-container">Running the Development Container<a class="headerlink" href="#running-the-development-container" title="Permanent link">&para;</a></h4>
<div class="highlight"><pre><span></span><code><a id="__codelineno-9-1" name="__codelineno-9-1" href="#__codelineno-9-1"></a>docker<span class="w"> </span>run<span class="w"> </span>-p<span class="w"> </span><span class="m">5173</span>:5173<span class="w"> </span>--env-file<span class="w"> </span>.env.local<span class="w"> </span>bolt-ai:development
</code></pre></div>
<hr />
<h3 id="production-environment">🏭 Production Environment<a class="headerlink" href="#production-environment" title="Permanent link">&para;</a></h3>
<h4 id="build-options_1">Build Options<a class="headerlink" href="#build-options_1" title="Permanent link">&para;</a></h4>
<p><strong>Option 1: Helper Scripts</strong></p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-10-1" name="__codelineno-10-1" href="#__codelineno-10-1"></a><span class="c1"># Production build</span>
<a id="__codelineno-10-2" name="__codelineno-10-2" href="#__codelineno-10-2"></a>npm<span class="w"> </span>run<span class="w"> </span>dockerbuild:prod
</code></pre></div>
<p><strong>Option 2: Direct Docker Build Command</strong></p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-11-1" name="__codelineno-11-1" href="#__codelineno-11-1"></a>docker<span class="w"> </span>build<span class="w"> </span>.<span class="w"> </span>--target<span class="w"> </span>bolt-ai-production
</code></pre></div>
<p><strong>Option 3: Docker Compose Profile</strong></p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-12-1" name="__codelineno-12-1" href="#__codelineno-12-1"></a>docker<span class="w"> </span>compose<span class="w"> </span>--profile<span class="w"> </span>production<span class="w"> </span>up
</code></pre></div>
<h4 id="running-the-production-container">Running the Production Container<a class="headerlink" href="#running-the-production-container" title="Permanent link">&para;</a></h4>
<div class="highlight"><pre><span></span><code><a id="__codelineno-13-1" name="__codelineno-13-1" href="#__codelineno-13-1"></a>docker<span class="w"> </span>run<span class="w"> </span>-p<span class="w"> </span><span class="m">5173</span>:5173<span class="w"> </span>--env-file<span class="w"> </span>.env.local<span class="w"> </span>bolt-ai:production
</code></pre></div>
<hr />
<h3 id="coolify-deployment">Coolify Deployment<a class="headerlink" href="#coolify-deployment" title="Permanent link">&para;</a></h3>
<p>For an easy deployment process, use <a href="https://github.com/coollabsio/coolify">Coolify</a>:</p>
<ol>
<li>Import your Git repository into Coolify.</li>
<li>Choose <strong>Docker Compose</strong> as the build pack.</li>
<li>Configure environment variables (e.g., API keys).</li>
<li>Set the start command:
<div class="highlight"><pre><span></span><code><a id="__codelineno-14-1" name="__codelineno-14-1" href="#__codelineno-14-1"></a>docker<span class="w"> </span>compose<span class="w"> </span>--profile<span class="w"> </span>production<span class="w"> </span>up
</code></pre></div></li>
</ol>
<hr />
<h2 id="vs-code-dev-containers-integration">🛠️ VS Code Dev Containers Integration<a class="headerlink" href="#vs-code-dev-containers-integration" title="Permanent link">&para;</a></h2>
<p>The <code>docker-compose.yaml</code> configuration is compatible with <strong>VS Code Dev Containers</strong>, making it easy to set up a development environment directly in Visual Studio Code.</p>
<h3 id="steps-to-use-dev-containers">Steps to Use Dev Containers<a class="headerlink" href="#steps-to-use-dev-containers" title="Permanent link">&para;</a></h3>
<ol>
<li>Open the command palette in VS Code (<code>Ctrl+Shift+P</code> or <code>Cmd+Shift+P</code> on macOS).</li>
<li>Select <strong>Dev Containers: Reopen in Container</strong>.</li>
<li>Choose the <strong>development</strong> profile when prompted.</li>
<li>VS Code will rebuild the container and open it with the pre-configured environment.</li>
</ol>
<hr />
<h2 id="environment-variables">🔑 Environment Variables<a class="headerlink" href="#environment-variables" title="Permanent link">&para;</a></h2>
<p>Ensure <code>.env.local</code> is configured correctly with:</p>
<ul>
<li>API keys.</li>
<li>Context-specific configurations.</li>
</ul>
<p>Example for the <code>DEFAULT_NUM_CTX</code> variable:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-15-1" name="__codelineno-15-1" href="#__codelineno-15-1"></a><span class="nv">DEFAULT_NUM_CTX</span><span class="o">=</span><span class="m">24576</span><span class="w"> </span><span class="c1"># Uses 32GB VRAM</span>
</code></pre></div>
</article>
</div>
<script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
</div>
<div class="md-social">
<a href="https://github.com/stackblitz-labs/bolt.diy" target="_blank" rel="noopener" title="bolt.diy" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</a>
<a href="https://thinktank.ottomator.ai/" target="_blank" rel="noopener" title="bolt.diy Discourse" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M225.9 32C103.3 32 0 130.5 0 252.1 0 256 .1 480 .1 480l225.8-.2c122.7 0 222.1-102.3 222.1-223.9S348.6 32 225.9 32M224 384c-19.4 0-37.9-4.3-54.4-12.1L88.5 392l22.9-75c-9.8-18.1-15.4-38.9-15.4-61 0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128"/></svg>
</a>
<a href="https://x.com/bolt_diy" target="_blank" rel="noopener" title="bolt.diy on X" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9zm-24.8 373.8h39.1L151.1 88h-42z"/></svg>
</a>
<a href="https://bsky.app/profile/bolt.diy" target="_blank" rel="noopener" title="bolt.diy on Bluesky" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2 42.1-31.6 110.3-56 110.3 21.8 0 15.5-8.9 130.5-14.1 149.2-18.2 64.8-84.4 81.4-143.3 71.3C456 322 482.2 380 425.6 438c-107.4 110.2-154.3-27.6-166.3-62.9-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8c-12 35.3-59 173.1-166.3 62.9-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1 10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "..", "features": ["navigation.tabs", "navigation.sections", "toc.follow", "toc.integrate", "navigation.top", "search.suggest", "search.highlight", "content.tabs.link", "content.code.annotation", "content.code.copy"], "search": "../assets/javascripts/workers/search.f8cc74c7.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
<script src="../assets/javascripts/bundle.f1b6f286.min.js"></script>
</body>
</html>