Porting a Bolt.new app to Databutton

Learn how to move your app from Bolt.new to Databutton with ease. This guide explains where to place your files and how to set things up step by step.

Currently, Databutton does not have a direct import feature to migrate apps from Bolt.new. However, if your app uses React as the frontend, the migration process is straightforward and involves mapping files to the correct structure in Databutton.

3 simple steps to follow :

1. Mapping files to match Databutton's strcuture

2. Syntax changes to handle

3. Check Package compatibility

Mapping your files to Databutton’s structure

How to Migrate Components, Pages, and Utilities from Bolt.new to Databutton

Bolt.new vs Databutton Integration Checklist

Bolt.new	Databutton
components/ folder	UI Components - Create new components with the same name (without .tsx). - Paste the code.
App.tsx file	Home Page - Copy the code from App.tsx. - Paste it into the "Home" page in Databutton.
Pages (Extra pages)	Pages Section - Add more pages in the "Pages" section. - Paste corresponding code.
Utility files (e.g. PlayerContext.tsx)	UI Files - Add these files under "UI Files" or the appropriate section in Databutton. - Ensure structure matches.
package.json file	Dependencies - Check if all packages are available. - Install missing ones in Databutton.

File tree structure comparison: Bolt.new vs Databutton

Key syntax changes to handle

💡 Note: These are the changes in the code that you must take care of or ask the agent to handle in Databutton while migrating:

Type	Bolt.new Syntax	Databutton Syntax
Pages	import HomePage from './pages/HomePage';	import HomePage from '@/pages/HomePage';
Components	import Sidebar from './components/Sidebar';	import MainContent from '@/components/MainContent';
Utilities	import { ScrapingResult } from '../types';	import { ScrapingResult } from '@/utils/types';

How to check package compatibility

You might want to check whether the packages used in your existing Bolt app are available in the Databutton environment. To do this, copy the content of your package.json file and ask the Databutton agent to verify for you.

Can you check if the following packages are available in Databutton's environment? [Paste your package.json content here]

If any relevant packages aren't available, feel free to contact us via the intercom. We are happy to assist you and install the necessary dependencies.