Upgrade a project to TanStack Start
Upgrade your older Lovable project to a newer template called TanStack Start. This makes your pages load faster, improves how they appear in search results, and ensures social media links show correct previews.
Anyone with an older Lovable project built with React + Vite who wants better performance and visibility needs this.
Do this, in order
- 1
Check if your project is eligible by asking Lovable 'What stack is this project on?' in your project chat.
This confirms your project is an older React + Vite type and can be upgraded, and that the upgrade option will be available.
- 2
Initiate the upgrade by typing '/' in your project chat and selecting 'Migrate to TanStack Start', or by asking Lovable directly: 'Upgrade my app to TanStack Start so my pages render on the server and my link previews work.'
This starts the process of converting your project's structure to the new template, which will improve its performance and visibility.
- 3
Confirm the upgrade when Lovable presents the 'Migrate to TanStack Start' card, reviewing the cost and what the upgrade does.
This ensures you understand the changes and costs before the process begins, as it consumes credits and modifies your project.
- 4
Follow the progress in the project chat, and if the upgrade pauses on a large project, ask Lovable to continue.
The upgrade process can take time, especially for larger projects, and may require your input to resume if it pauses.
- 5
Review your upgraded app in the preview environment once the upgrade is complete.
The upgrade changes your project, not your live site, so you must check that everything looks and works as expected before publishing.
- 6
If satisfied, publish your project to make the upgraded version live; otherwise, revert the changes from your project's version history.
Publishing makes the benefits of the upgrade available to your users, while reverting allows you to undo the changes if they are not what you wanted.
Paste this into your project
Upgrade my app to TanStack Start so my pages render on the server and my link previews work.
Words decoded
- TanStack Start
- A modern way Lovable builds apps that makes web pages ready on the server before sending them to your browser, rather than building them in your browser.
- server-side rendering (SSR)
- The process where a web page is fully built and prepared on the server before it's sent to your device. This means your browser receives a complete page, making it faster to display and easier for search engines and social media to understand.
- React + Vite stack
- An older combination of tools Lovable used to build apps, where much of the page building happened in your web browser.
- Progressive Web App (PWA)
- An app that can be installed on your device like a regular app but is delivered through the web. It can work offline and offer a native-app-like experience.
Where people get stuck
- Starting an upgrade on a project that is not eligible (e.g., already on TanStack Start or not React + Vite).
- Forgetting to publish the upgraded project, meaning your live site remains on the old version.
- Not reviewing the upgraded app in preview, potentially publishing a version with unexpected issues.
- Ignoring warnings about low workspace credits, which might pause the upgrade process.
- Assuming link previews will immediately update on social platforms without publishing and re-checking with platform-specific tools.
- Encountering issues with code libraries that only work in the browser, causing pages to fail after server-side rendering is introduced.
The short version, steps, decoder and prompt on this page are written automatically from Lovable's own documentation and can lag or misread it. The official page is always the authority.