How to Integrate Bolt.new with Travis CI

Travis CI integrates with GitHub repositories, not with Bolt.new directly. The first step is ensuring your Bolt project has a GitHub repository and that Travis CI is watching it. In Bolt, open the Git panel and use 'Push to GitHub' to create a repository for your project if you have not already. Choose a repository name (lowercase, hyphens instead of spaces), select public or private visibility, and click 'Create and push.' Bolt commits the entire project state to the new repository. With the repository on GitHub, go to travis-ci.com and sign in with your GitHub account. Travis CI uses OAuth to access your repositories and set up webhooks automatically. After signing in, click your profile icon > Settings > Repositories and find your Bolt project repository in the list. Toggle the repository to enable Travis CI — this sets up a GitHub webhook that notifies Travis whenever code is pushed. Travis CI differentiates between travis-ci.com (the current commercial platform) and the legacy travis-ci.org (which shut down in 2021). Make sure you are using travis-ci.com. If you signed up for Travis CI before 2021, your account may need migration — check the Travis CI dashboard for any migration prompts. For private repositories: Travis CI's pricing is credit-based. Free accounts receive 10,000 credits on signup, which equates to approximately 200-400 builds depending on build duration. After the initial credits are exhausted, private repository builds require a paid plan. For open-source public repositories, Travis CI offers a more generous free tier.

1# Verify the repository is properly connected by checking Travis CI's GitHub integration:
2# 1. Go to github.com > Repository > Settings > Webhooks
3# 2. Verify 'https://notify.travis-ci.com/...' appears as an active webhook
4# 3. This confirms Travis CI will receive push notifications from GitHub

The .travis.yml file is the single configuration file that tells Travis CI how to build and deploy your project. Place it in the root of your repository — the same level as package.json. You can create this file directly in Bolt's editor (create a new file named .travis.yml in the file tree) or add it to the GitHub repository through GitHub's web interface. Either approach works — the file just needs to be committed to the repository for Travis CI to read it. Travis CI configuration specifies: the language runtime (Node.js for Bolt projects), the Node.js version, cache settings for node_modules, the install command, the build command, and deployment settings. The configuration below works for both Vite and Next.js Bolt projects. Key configuration details: the 'node_js' key specifies which Node.js version to use — '18' uses the latest Node.js 18.x release, which matches Bolt's generation requirements. The 'cache' section with 'node_modules' tells Travis CI to cache the dependencies between builds, saving 30-60 seconds on each run. The 'install' step runs npm ci (a faster, reproducible version of npm install that uses package-lock.json). The 'script' step runs the build and fails the build if any errors occur. For Vite projects, the built output is in the dist/ directory. For Next.js projects, it is in the .next/ directory. The deploy section references these directories to know what to upload to Netlify.

1# .travis.yml for Vite/React Bolt projects:
2language: node_js
3node_js:
4  - '18'
5
6cache:
7  directories:
8    - node_modules
9
10install:
11  - npm ci
12
13script:
14  - npm run build
15
16deploy:
17  provider: netlify
18  site: $NETLIFY_SITE_ID
19  auth: $NETLIFY_AUTH_TOKEN
20  dir: dist
21  prod: true
22  on:
23    branch: main
24
25# Optional: Add environment variables for Vite client-side vars
26# These need to be set in Travis CI project settings:
27# NETLIFY_SITE_ID, NETLIFY_AUTH_TOKEN
28# VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY (if using Supabase)
29
30---
31
32# For Next.js Bolt projects, change the deploy dir:
33# dir: .next
34# And ensure next.config.js has output: 'export' for static output
35# OR use: dir: out (if using static export)
36# For SSR Next.js, consider deploying to Vercel instead of Netlify

Your .travis.yml references environment variables like $NETLIFY_SITE_ID and $NETLIFY_AUTH_TOKEN. These sensitive values must be stored in Travis CI's environment settings, not in the .travis.yml file itself (which is committed to your GitHub repository and visible to anyone with repository access). Travis CI provides two ways to set environment variables for a project. The first (and recommended) approach is through the Travis CI web interface: go to your project in the Travis CI dashboard, click 'More options' > 'Settings,' and scroll to the 'Environment Variables' section. Add each variable with its name and value. Travis CI stores these encrypted and makes them available to build environments as standard shell environment variables. The second approach uses the Travis CI CLI to encrypt values directly into the .travis.yml file. This is useful for open-source projects where you want to version the encrypted values alongside the configuration. Install the Travis CI gem (gem install travis), authenticate with travis login --pro, and encrypt a value with travis encrypt NETLIFY_AUTH_TOKEN=your-token --add. Travis CLI adds the encrypted value to .travis.yml under the 'env.global' key. For Bolt projects specifically: if your app uses Supabase, you need to add VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY as environment variables in Travis CI. These are used by Vite during the build process — when npm run build runs, Vite reads these variables and inlines them into the production bundle. Variables added to Travis CI's Settings panel are automatically available during the build step without any additional configuration. Get your Netlify credentials: auth token from Netlify User Settings > Applications > Personal access tokens, and site ID from your site's Settings > General > Site details.

1# Option 1: Set via Travis CI web dashboard (recommended)
2# Go to: travis-ci.com > your-project > Settings > Environment Variables
3# Add: NETLIFY_SITE_ID = your-site-id
4# Add: NETLIFY_AUTH_TOKEN = your-auth-token
5# Add: VITE_SUPABASE_URL = https://yourproject.supabase.co (if using Supabase)
6# Add: VITE_SUPABASE_ANON_KEY = your-anon-key (if using Supabase)
7
8# Option 2: Encrypt via Travis CLI (for open-source projects)
9gem install travis
10travis login --pro
11travis encrypt NETLIFY_AUTH_TOKEN=your-actual-token --add --pro
12travis encrypt NETLIFY_SITE_ID=your-site-id --add --pro
13# This adds encrypted values to .travis.yml under env.global

With the .travis.yml committed and environment variables configured, test the complete pipeline by making a change in Bolt and pushing to GitHub. In Bolt, make any visible change to your project — update some text, change a color, add a new component element. Use Bolt's Git panel to push to GitHub. The push takes 10-30 seconds. Once the push reaches GitHub, Travis CI receives a webhook notification and starts a new build within 30-60 seconds. Watch the build progress in the Travis CI dashboard. The build log shows each step: cloning the repository, restoring the node_modules cache (or running npm ci if cache expired), running npm run build, and the Netlify deploy step. A successful build ends with a green checkmark. A failed build shows a red X and the log highlights which step failed. Green status checks also appear on GitHub — on the commit in your repository history and on any open pull requests — making it easy to see whether a Bolt push built successfully without opening the Travis CI dashboard. Understanding the Bolt-Travis relationship: Bolt's WebContainer has no direct connection to Travis CI. The pipeline only runs when you push from Bolt's Git panel to GitHub. If you make 20 AI-assisted changes in Bolt but only push once at the end, Travis CI runs one build. This is intentional — you control when the deployment pipeline triggers, not Bolt's internal Version History. The WebContainer limitation (no incoming webhooks, no public URL during development) is resolved by this deployment approach — the Travis-deployed Netlify URL works as a full production environment.

1# Monitor Travis CI builds from the command line (optional):
2gem install travis
3travis login --pro
4travis status --pro  # Show status of the most recent build
5travis logs --pro    # Stream the most recent build log
6
7# Or just watch the Travis CI web dashboard:
8# https://travis-ci.com/github/YOUR_USERNAME/YOUR_REPO