# Heroku Deployment Tutorial for Vibe-Coded AI Apps

> Publish an AI app on Heroku through GitHub, protect secrets with Config Vars, connect a domain, and deploy updates safely.

![Heroku service page](/assets/blog/how-to-publish-an-ai-generated-app-on-heroku/01-service-page.png)

## Before you start

Vibe coding can produce a working app quickly. Publishing it is where the less glamorous details appear. This Heroku deployment tutorial shows how to publish an AI app from GitHub without assuming that you are a professional programmer.

Before starting, make sure you have:

- A Heroku account with billing enabled
- A GitHub account and repository
- An app that runs successfully on your computer
- Any API keys stored outside the source code

Heroku is paid. According to its [usage and billing guide](https://devcenter.heroku.com/articles/usage-and-billing), the Eco plan provides 1,000 shared dyno hours for **$5 per month**, while a Basic dyno costs up to **$7 per month**. Databases and other add-ons can add to that bill.

## 1. Make the project deployable with a start script or Procfile

Heroku needs one command that starts your web server. For a Node.js app, add a `start` script to `package.json`:

```json
{
"scripts": {
"start": "node server.js"
}
}
```

You can also create a root-level file named `Procfile`, with no extension:

```text
web: npm start
```

A Python alternative might be `web: gunicorn app:app`. The exact command depends on your framework. Heroku explains these declarations in its [Procfile guide](https://devcenter.heroku.com/articles/procfile).

Most important, the app must bind to the `PORT` environment variable assigned by Heroku. In Node.js, use `process.env.PORT || 3000` rather than a fixed production port. A web process that does not bind correctly can hit Heroku's **60-second** boot timeout.

## 2. Push to GitHub

Place the app in a Git repository and commit the deployable version:

```bash
git init
git add .
git commit -m "Prepare app for Heroku"
git branch -M main
git remote add origin YOUR_GITHUB_REPOSITORY_URL
git push -u origin main
```

Run these commands from the app's root directory. Your dependency file, such as `package.json` or `requirements.txt`, must be committed. Generated dependency folders such as `node_modules` should remain ignored.

## 3. Create a Heroku app

Open the Heroku Dashboard, select **New**, and create an app. Choose a unique name and a region near most of your users. Heroku may append an identifier to the final hostname, so do not rely on the app name alone when preparing links.

Open the app's **Resources** area and select a paid dyno plan if Heroku asks you to provision one. Start small. A client prototype rarely needs a large production dyno on its first day.

## 4. Connect the GitHub repository

Open the app's **Deploy** tab and choose **GitHub** as the deployment method. Authorize Heroku, search for the repository, and select **Connect**.

Heroku requires suitable repository access, and organization administrators may need to approve the connection. The official [GitHub combining guide](https://devcenter.heroku.com/articles/github-integration) also notes that repository admin access is required when configuring automatic deploys.

![Heroku GitHub deployment guide](/assets/blog/how-to-publish-an-ai-generated-app-on-heroku/02-github-deploy.png)

## 5. Add Config Vars without committing secrets

Open **Settings**, find **Config Vars**, and enter each secret as a name and value. Common examples include:

- `OPENAI_API_KEY`
- `DATABASE_URL`
- `SESSION_SECRET`

Read them in code through the environment, such as `process.env.OPENAI_API_KEY`. Do not add `PORT`; Heroku supplies it. Keep local `.env` files in `.gitignore`, and rotate any credential that was previously pushed to GitHub. Heroku's [Config Vars documentation](https://devcenter.heroku.com/articles/config-vars) confirms that these values persist across deployments and appear to the app as environment variables.

## 6. Deploy the branch and open the herokuapp.com URL

Return to **Deploy**, choose `main` under Manual Deploy, and select **Deploy Branch**. Heroku installs dependencies, builds the project, and starts the declared web process.

When the build finishes, select **Open app**. Test the generated `herokuapp.com` URL in a private browser window. Check sign-in, forms, AI requests, and database writes. If the page fails, open the **Activity** tab and inspect the build output before changing random settings.

## 7. Add a custom domain

The Heroku URL is fine for testing. For client-facing vibe coding hosting, use a domain you control.

1. Open **Settings** and add the custom domain.
2. Copy the DNS target supplied by Heroku.
3. Create the requested record, usually a `CNAME`, with your DNS provider.
4. Wait for DNS and certificate changes to finish.

Always use the generated Heroku DNS target rather than guessing it. The [custom domain guide](https://devcenter.heroku.com/articles/custom-domains) warns that propagation can take from several minutes to several days. Heroku does not register the domain or host its DNS for you.

![Heroku custom domain guide](/assets/blog/how-to-publish-an-ai-generated-app-on-heroku/03-custom-domain.png)

## Update the app

Commit each tested change and push it to GitHub. With manual deployment, return to Heroku and deploy `main` again. Automatic deploys remove that click, ,but they also publish every push to the selected branch. I would use manual deployments for early client work, then enable automatic deployment after tests are reliable.

Heroku keeps the app URL stable across releases. For a polished delivery, place instructions, screenshots, and the live demo link in a Revdoku bucket. You can share that bucket publicly, protect it with a password, or request the visitor's email. Open notifications and per-visitor analytics then give you a better signal for follow-up than sending a bare app URL.

## Deployment checklist

| Item | What to Check | Why It Matters |
|------|---------------|----------------|
| **Start command** | Start script or root-level `Procfile` works | Heroku must know how to launch the server |
| **Port** | Server reads the `PORT` environment variable | Fixed ports prevent web traffic from reaching the app |
| **Repository** | Current code and dependency files are on GitHub | Heroku builds the connected commit |
| **Secrets** | Credentials are stored in Config Vars | API keys must not enter Git history |
| **Live test** | Forms, AI calls, and data storage work | A successful build does not prove every feature works |
| **Domain** | DNS points to Heroku's supplied target | Incorrect records leave the custom address offline |

Your site is live.

Start publishing for free

Connect this AI to Revdoku so it can store files, create, update, and publish websites for me. Read and follow https://revdoku.com/prompt.md. A Revdoku account is required. If I do not have one, send me https://app.revdoku.com/users/sign_up?utm_source=revdoku.com&utm_medium=ai-chat&utm_campaign=connect_ai_first and wait until I confirm signup is complete. For ChatGPT, Claude, or another cloud AI, connect https://app.revdoku.com/mcp and complete Revdoku OAuth. For a local agent, use Revdoku's browser device sign-in and complete the connection in Revdoku. Never ask me for a password or API key in chat, or for a verification code. When Revdoku tools are connected, verify the connection, tell me you’re ready, and ask what I want to publish.

Copy Prompt

or

Create Free Account

---

[View the canonical page](https://revdoku.com/blog/how-to-publish-an-ai-generated-app-on-heroku/) · [Browse llms.txt](https://revdoku.com/llms.txt)