Make your app ready for previews

Rondar has no list of frameworks or commands. When you open a preview, an agent reads the repository and its documentation, finds how to start the app, and starts it on the branch of the session. Rondar then loads the first page and its assets to make sure that the app answers.

Thus the best help is a repository that tells clearly how to run the app.

Put the commands to install, set up and start the app in the README, in the order in which a new developer runs them. Include the command that prepares the database.

A command that works on a clean machine works in a preview. A step that is only in the memory of the team does not.

The preview gives your app a port in the PORT environment variable. Start the server on that port, and do not write a fixed port in the code.

// Node.js
const port = process.env.PORT || 3000;
app.listen(port, "0.0.0.0");

# Django
python manage.py runserver 0.0.0.0:$PORT

# Rails
bin/rails server -b 0.0.0.0 -p $PORT

Bind the server to 0.0.0.0, not to 127.0.0.1 or localhost. A server that listens only on 127.0.0.1 in its container cannot answer the public address of the preview. This is the most frequent cause of a preview that starts but does not load.

Front-end development servers need an option for this, for example --host 0.0.0.0 for Vite and -H 0.0.0.0 for Next.js.

A preview has its own public address, and each session has a different one. Do not write one host name in the configuration.

• Read the allowed hosts from the environment. Rondar gives the public address in PREVIEW_URL, and the host names in RONDAR_PREVIEW_HOSTS.
• Make links and asset addresses relative, or build them from the address of the request.
• If the development server refuses unknown hosts, let it accept the hosts of RONDAR_PREVIEW_HOSTS.

Keep an .env.example file in the repository with each variable that the app needs. Rondar reads .env.example, .env.sample or .env.template during project setup and lists the variables in the project settings, where you give the values.

Use values for development only. A preview must not use production credentials or production data.

A preview is useful when its pages have content. Keep a seed command that fills a development database with a small, realistic set of data: some products, some users, some orders.

If the app has different kinds of users, seed one of each kind. Rondar prepares a sign-in state for each kind that it finds, and you choose one with View as.

Rondar checks the first page before it shows the preview. A first page that needs a long build, or that waits for an external service, makes the preview slow to start. Let the development server start without services that it does not need.

Open the Preview pane of the session and read its error and its logs. Most failures have one of these causes:

Correct the cause in the repository, or tell the session what failed. The agent can correct the start of the app in the same conversation.