# Replit tutorial: build and publish an app with AI in your browser

- آدرس: https://di9.ir/blog/en/replit-tutorial
- نویسنده: danidiba
- انتشار: 2026-10-06T16:10:00+03:30
- به‌روزرسانی: 2026-10-06T16:10:00+03:30
- دسته: AI Tools & Comparisons
- برچسب‌ها: Replit، انتشار اپ، ایجنت کدنویسی، برنامه‌نویسی آنلاین، ساخت اپ با هوش مصنوعی

> Replit is a full coding environment in the browser whose AI Agent builds apps from a plain description. This tutorial goes from sign-up and a good first prompt to fixing bugs, storing secrets, rolling back, publishing and keeping costs under control.

[Replit](https://di9.ir/blog/%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1/replit) is where "I want a small app but don't want to deal with setup" becomes a working product. Everything lives in the browser: editor, terminal, database, hosting, and an Agent that builds the app from your description.

This Replit tutorial takes one real app from zero to published: sign-up, a strong first prompt, step-by-step fixes, storing keys, rolling back and publishing. Replit's interface changes often; if a button label looks different, look for the same idea.

## What Replit includes

| Part | What it's for |
| --- | --- |
| Agent | Plans, writes, runs and tests code from a text description |
| Editor and terminal | For anyone who wants to read and change the code by hand |
| Preview | Live app running next to the chat |
| Database | Stores app data without setting up a separate server |
| Secrets | Stores keys and passwords safely as environment variables |
| Publishing | Puts the app online at a public URL |

If coding agents are new to you, [coding agents: when AI changes the code itself](https://di9.ir/blog/%D8%A7%DB%8C%D8%AC%D9%86%D8%AA-%DA%A9%D8%AF%D9%86%D9%88%DB%8C%D8%B3%DB%8C) is useful background.

## Step 1: Sign up and start a project

1. Go to Replit and sign up with email, Google or GitHub.
2. On the home page you'll see a box for building an app with the Agent; this is where you write your idea.
3. If you'd rather write code yourself, create an empty project from a language template such as Python or Node.js instead.

This tutorial follows the Agent path.

## Step 2: Write a strong prompt for the Agent

The quality of the app depends heavily on the first prompt. A good prompt covers five things: the goal, the users, the pages, the data, and what you **don't** want.

```prompt
Build a simple web app for booking appointments at a hair salon. Customers choose their name, phone number, service and time, and the booking is saved. I need an admin page with a simple password that shows each day's bookings. Times that are already taken must not be selectable again. Use a clean, mobile-friendly design. No online payments or SMS for now.
```

After you send it, the Agent usually shows a plan or summary. **Read it.** If something is missing or extra, say so now; fixing the plan is cheaper than fixing built code.

## Step 3: Build and refine step by step

The Agent starts working: it creates files, installs packages, sets up a database and runs the app. At the end you see a preview.

Now test the app like a real user and report problems **one at a time, precisely**:

- Bad: "It doesn't work, fix it."
- Good: "When I pick 10 a.m. tomorrow and click Book, I get an error and the booking doesn't show on the admin page."

If there is an error message, copy and paste it. Keep each request to one change; ten requests in one message usually end half-done.

If your app is in a right-to-left language such as Arabic or Persian, say so in the first prompt and ask for a suitable font; fixing direction later is harder.

## Step 4: Secrets and rolling back

**Secrets:** if the app connects to an outside service, such as an AI API or an SMS gateway, never write the key in the code or in the Agent chat. Put it in Secrets so the code can read it as an environment variable. Why this matters is covered in [what you should never give an AI tool](https://di9.ir/blog/%D8%A7%D9%85%D9%86%DB%8C%D8%AA-%D9%88-%D8%AD%D8%B1%DB%8C%D9%85-%D8%AE%D8%B5%D9%88%D8%B5%DB%8C-%D8%AF%D8%B1-%D9%87%D9%88%D8%B4-%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C).

**Rolling back:** the Agent saves checkpoints along the way. If a change breaks the app, don't keep insisting on a fix; roll back to the last working version and rewrite the request more clearly. This saves both time and credits.

For a serious project, also connect the code to a Git repository so the history lives outside Replit too.

## Step 5: Publish

When the app is ready, use the Publish (or Deploy) option. Replit offers several publishing types, such as a static site or an always-on app; choose the one that fits. The app gets a public URL, and on paid plans you can connect a custom domain.

Check this list before publishing:

1. The admin page really requires a password and won't open without login.
2. No key sits in the code or a public file.
3. Forms reject empty or invalid input.
4. Test data has been cleared from the database.
5. You have checked the app on a phone.

To review generated code, see [AI code review: what it catches and what it misses](https://di9.ir/blog/%D8%A8%D8%A7%D8%B2%D8%A8%DB%8C%D9%86%DB%8C-%DA%A9%D8%AF-%D8%A8%D8%A7-%D9%87%D9%88%D8%B4-%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C).

## Tips to cut costs and headaches

- **Start small.** Build the first version with the fewest features, then add more.
- **Break the error loop.** If the Agent fails to fix the same error two or three times, stop, roll back and explain the problem differently.
- **Don't run the Agent for questions.** For small questions about the code, a simple chat or lighter assistant mode is enough.
- **Watch your usage.** Agent costs are usage-based; check your account's usage page regularly and set your own limit.
- **Be explicit about language and layout** from the first prompt.

## Limits and common mistakes

**Limits:**

- Your app depends on Replit's infrastructure, and moving it to another server takes extra work.
- On large projects, Agent costs rise quickly.
- The Agent sometimes produces extra code or a messy structure that is harder to maintain.
- Availability can vary by country.

**Common mistakes:**

- Publishing an app with real customer data without any security review.
- Writing keys and passwords directly in the code.
- One giant request instead of several small ones.
- Not reading the plan the Agent shows before it starts.

## Alternatives

If you mostly want polished web apps with a simpler experience, [Lovable](https://di9.ir/blog/%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1/lovable) is a good option. If you are a developer who wants full control on your own machine, [Cursor](https://di9.ir/blog/%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1/cursor) fits better. For an overview of this category, see [AI tools for programming](https://di9.ir/blog/%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1-%D9%87%D9%88%D8%B4-%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C).

## Summary

- Replit combines editor, database, hosting and an AI Agent in the browser.
- Write the first prompt with goal, users, pages, data and what you don't want.
- Read the Agent's plan before it builds, and report bugs one at a time.
- Keep keys only in Secrets, and don't be afraid to roll back to a checkpoint.
- Before publishing, check admin access, keys and input validation.
- Keep an eye on Agent usage; see the official page for pricing.

## پرسش‌های متداول

### How does Replit work?

Replit is a browser-based development environment that combines an editor, terminal, database, hosting and an AI Agent. You describe the app in plain language, the Agent plans, writes and runs the code, and you can publish the result, all without installing anything on your computer.

### Can I build an app on Replit without knowing how to code?

For prototypes and simple tools, yes, because the Agent handles code, database and publishing. For an app with real users and real data, you still need basic programming and security knowledge, or a developer to review the result.

### Is Replit free?

Replit has a free plan with limited Agent credits and basic features. Always-on publishing, custom domains and heavier Agent use are on paid plans, and Agent usage is billed by consumption. Check the official pricing page for current details.

### Can I move my Replit app somewhere else?

Yes. The code is yours, and you can download it or connect it to a Git repository. Parts that depend on Replit's built-in services, such as its database or storage, need a replacement and new configuration when you move to another server.