# 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 integration 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. Use manual deployments for early client work, then enable automatic deployment once you have reliable tests.

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.

Just ask to “publish to Revdoku” to
publish your HTML pages presentation dashboard app prototype game prototype
as a fast and secure website

from your Codex , Claude or another AI app publish files or folders

Connect
Skill
MCP

Paste this into your AI app.

Copy

Install the Revdoku skill in your AI app.

Copy
npx skills add revdoku/revdoku --skill revdoku -g

Choose your AI app to connect through MCP.

Codex CLI
Claude Code
Other

Copy codex mcp add revdoku --url https://app.revdoku.com/mcp
codex mcp login revdoku

Copy claude mcp add --transport http revdoku https://app.revdoku.com/mcp
claude mcp login revdoku

Transport Streamable HTTP Auth Browser OAuth

Copy https://app.revdoku.com/mcp

Open the MCP setup guide →

Free · Public or protected · Visitor analytics · Forms and email alerts Building websites for clients? Explore Revdoku for agencies →

---

[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)