Porting a Bolt 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.
Last updated
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.
Last updated
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 :
Mapping files to match Databutton's strcuture
Syntax changes to handle
Check Package compatibility
How to Migrate Components, Pages, and Utilities from Bolt.new to Databutton
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.
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.
Note: These are the changes in the code that you must take care of or ask the agent to handle in Databutton while migrating:
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.
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';