Bolt.new Tutorial: How to Build and Deploy Full-Stack Web Apps with Simple Prompts (Beginner Guide)

Ayush Tyagi • September 13, 2026

Bolt.new is an AI-powered in-browser development platform that allows anyone to prompt, build, edit, and deploy full-stack web applications using plain English. Powered by StackBlitz WebContainers, it executes an entire Node.js server, installs npm packages, runs live terminal commands, and connects external databases directly inside your browser window without requiring local software or terminal setup.

What Makes Bolt.new Different from Other AI Coding Tools?

Most AI coding assistants only generate raw code snippets that you have to manually copy, paste, debug, and configure on your machine. Bolt.new executes live code inside your active browser tab:

  • Full-Stack Runtime: Unlike Claude Artifacts, which are restricted to single-file client-side HTML, CSS, and lightweight React components, Bolt.new runs a back-end server, creates multi-file project directories, installs npm libraries, and supports API routes.
  • Zero Local Setup: Unlike desktop IDEs like Cursor AI, which require managing Git, local Node runtimes, environment variables, and local terminal shells, Bolt.new operates entirely in the cloud.
  • Instant Visual Feedback: Every prompt triggers automated code generation, package installation, and live hot reloading in an integrated real-time preview panel.

Understanding the Bolt.new Workspace

Navigating to bolt.new opens a clean two-pane development workspace:

+-----------------------------------------------------------------------+
|  [Bolt.new Top Bar: Project Name | Tokens Left | Deploy | GitHub]     |
+-----------------------------------+-----------------------------------+
|                                   |                                   |
|       CHAT & PROMPT INTERFACE     |         LIVE APPLICATION          |
|                                   |             PREVIEW               |
|  - AI Thought Process             |                                   |
|  - Terminal & Shell Logs          |  (Renders interactive app here)   |
|  - Code Diffs & File Edits        |                                   |
|                                   |  [Toggle Preview / Code View]     |
+-----------------------------------+-----------------------------------+
|  [Prompt Input Box: "Describe..."]            [Enhance Prompt Button] |
+-----------------------------------------------------------------------+
  • Prompt Input & Chat Pane (Left): Where you enter instructions, review terminal command execution, and track code changes.
  • Live Preview / Code Pane (Right): Displays your interactive web application. You can toggle between the rendered UI and raw project files (src/, package.json, etc.).
  • Top Navigation Bar: Displays remaining token allowances, project controls, GitHub export options, and one-click deployment buttons.

Step 1: Write an Architectural Master Prompt

The quality of your finished application depends heavily on your initial prompt. Generic requests (e.g., "Make an invoice app") produce barebone templates. A production-ready architecture prompt defines the core feature set, preferred tech stack, styling rules, and preloaded mock data.

Copy and paste this master prompt into the Bolt.new input bar:

Build a modern, responsive Freelance Invoice & Quotation Generator web application using React, Vite, Tailwind CSS, and Lucide React icons.

Key Features:
1. Header: Brand name, invoice title, auto-generated invoice number, and issue/due date pickers.
2. Client & Business Details: Editable sender and recipient info fields with an option to upload/preview a company logo.
3. Line Items Table: Add, edit, and delete multiple line items with columns for Description, Quantity, Unit Price, and Line Total. Include Tax Rate (%) and Discount input fields.
4. Calculation Engine: Automatically compute Subtotal, Tax Amount, Discount, and Grand Total dynamically.
5. Export & Print: A clean "Print / Download PDF" action button formatted using browser print stylesheets.
6. Design: Clean dashboard layout, modern slate/indigo color palette, accessible inputs, and pre-filled placeholder data so the app looks complete immediately.
Pro Tip: Before pressing Enter, click the Enhance Prompt button (the sparkle icon) beside the input box. Bolt.new expands your prompt with developer best practices, accessibility rules, and edge-case handling.

Step 2: Inspect the Automated Build Process

Once submitted, Bolt.new coordinates four sequential build stages:

  1. Environment Initialization: A browser-based WebContainer boots an isolated Node.js environment.
  2. Dependency Installation: The agent compiles package.json and runs npm install for necessary libraries (e.g., lucide-react, clsx).
  3. Directory Structuring: It generates the complete project tree (/src/components/, /src/types/, /src/utils/).
  4. Live Rendering: It launches the Vite development server (npm run dev) and displays the working app in the preview panel.

Test the rendered interface immediately: fill out editable fields, add new rows, test total calculations, and ensure the layout scales properly on mobile view.

Step 3: Refine Sequentially (The "One Feature at a Time" Rule)

Avoid bundling several major updates into a single prompt. Asking for multiple sweeping changes at once increases the risk of build script errors or premature token consumption. Request refinements iteratively:

Follow-up Prompt 1: Currency Selector & Local Persistence

Add a currency selection dropdown (USD $, EUR €, GBP £, INR ₹) in the top-right corner that dynamically updates all table calculations and total displays. Save the invoice data to localStorage so data persists across browser refreshes.

Follow-up Prompt 2: Visual Invoice Themes

Add a "Template Style" toggle in the sidebar with two options:
1. "Modern Minimalist" (current clean slate styling)
2. "Corporate Classic" (navy headers, formal borders, structured layout)
Switching templates should re-theme the document without clearing existing user input.

Step 4: Connect Backend Authentication & Storage with Supabase

To move past browser-local storage and allow users to create accounts and save invoices to a remote database, integrate Supabase:

  1. Click the Connect to Supabase button in the top-right corner of the workspace.
  2. Sign in or authenticate your Supabase account to link your project.
  3. After linking, submit this prompt to configure database schema migrations and authentication:
Connect our app to the linked Supabase instance.
1. Create a Supabase table named 'invoices' with columns for id, user_id, invoice_number, client_data (JSON), items (JSON), and total_amount.
2. Add a simple email/password authentication modal (Sign Up / Log In).
3. Ensure logged-in users can save invoices to their personal cloud account and load past saved invoices from a sidebar history drawer.

Bolt.new sets up database migrations, configures @supabase/supabase-js, injects environment keys into .env, and builds the authentication forms.

Step 5: Deploy Your Web Application to a Live URL

When your app is ready, deploy it to the public web using either of two methods:

Option A: One-Click Netlify Deployment (Fastest)

  1. Click the Deploy button in the top-right navigation bar.
  2. Select Deploy to Netlify.
  3. Authenticate your Netlify account if prompted.
  4. Bolt triggers a production build (npm run build) and provides an active SSL-secured URL (e.g., https://your-app-name.netlify.app).

Option B: Export to GitHub (Full Code Ownership)

  1. Click the GitHub icon in the header.
  2. Select Create Repository.
  3. Assign a repository name and choose Public or Private visibility.
  4. Bolt pushes all source files, dependencies, and configurations to your GitHub profile, allowing you to clone the repo locally or host it on Vercel, Cloudflare Pages, or AWS.

Comparison: Bolt.new vs. Cursor AI vs. Claude Artifacts

Feature Bolt.new Claude Artifacts Cursor AI
Primary Use Case Full-stack web apps in minutes Single-page UI prototypes & widgets Production software engineering
Runtime Environment In-browser WebContainer (Node.js) Isolated iframe sandbox Local machine / VS Code fork
Package Support (npm) Full dynamic npm installation Limited pre-bundled libraries Unrestricted local access
Database & Backend Native Supabase integration None (Mock state only) Any database / backend API
Deployment 1-Click Netlify / Cloud hosting Claude interface view only Manual deployment pipeline
Difficulty Beginner Absolute Beginner Intermediate to Advanced

5 Best Practices for Prompting Bolt.new

  • Specify Lightweight Frameworks: Request Vite, React, and Tailwind CSS for rapid compilation within WebContainers.
  • Avoid Heavy Native Binaries: Avoid modules requiring C++ builds or Python backends (e.g., FFmpeg, large machine learning models), as WebContainers run strictly inside browser sandboxes.
  • Use the Revert/Undo Button: If an update breaks the build or causes a blank screen, click the Undo/Rollback button to restore the last stable state before re-prompting.
  • Check the Terminal Drawer: If the preview stops compiling, expand the terminal panel at the bottom of the chat to identify missing packages or syntax errors.
  • Download Regular ZIP Backups: Click the Download Project icon periodically to keep offline archives of your source code.

Frequently Asked Questions (FAQ)

Is Bolt.new free to use?

Yes. Bolt.new offers a free tier with daily token quotas suitable for developing and testing small applications. Paid plans provide higher token limits for larger, complex projects.

Do I own the code generated by Bolt.new?

Yes. All source code generated during your sessions belongs to you without vendor lock-in. You can download it as a ZIP file or push it directly to GitHub.

Can I attach a custom domain to my deployed app?

Yes. Deploying via Netlify or linking your exported GitHub repository to Vercel allows you to map custom domains (e.g., app.yourdomain.com) using standard DNS CNAME records.

Comments (0)