Upgrade a project to TanStack Start

1. 1

   Check if your project is eligible for the upgrade by asking Lovable 'What stack is this project on?' in your project chat.

   This confirms your project is an older React + Vite type, which is the only kind that can be upgraded this way.

2. 2

   Initiate the upgrade by typing `/`, then selecting 'Migrate to TanStack Start', or by asking Lovable in chat '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 to the new structure, which will be confirmed before it begins.

3. 3

   Follow along in the chat as Lovable processes your project, and if it pauses on a large project, ask it to continue.

   The upgrade rewrites your project's page structure, moves content, and checks for errors, which can take time, especially for bigger projects.

4. 4

   After the upgrade finishes, review your app in the preview environment to ensure everything looks and works as expected.

   The upgrade changes your project, not your live site, so you need to check it thoroughly before making it public.

5. 5

   If you are happy with the upgraded app, publish it to make the changes live for your visitors.

   Your live site will continue to show the old version until you explicitly publish the new, upgraded version.

6. 6

   If you are not satisfied, revert the upgrade from your project's version history.

   This allows you to undo the changes and return your project to its previous state without affecting your live site.

Upgrade my app to TanStack Start so my pages render on the server and my link previews work.

TanStack Start

This is a new, modern way Lovable builds apps that makes your website's content ready on the server before it even reaches someone's web browser. This is good for speed and how search engines see your site.

React + Vite

This refers to an older set of tools Lovable used to build apps. 'React' is a popular way to build interactive parts of a website, and 'Vite' is a tool that helps develop these apps quickly.

Server-side rendering (SSR)

Instead of your web browser building the page from scratch, the server (where your website lives) puts all the pieces together first and sends a complete page. This means everyone, including search engines and social media, sees the full content immediately.

PWA (Progressive Web App)

A type of website that can act like a mobile app, allowing users to 'install' it on their device and sometimes work offline. The upgrade might affect saved copies of your app on users' devices.

• Starting an upgrade on a project that is not an older React + Vite type, as it won't work.
• Forgetting that the upgrade uses credits like any other chat work, potentially requiring a top-up for large projects.
• Not reviewing the upgraded app in preview before publishing, which could lead to unexpected issues on your live site.
• Assuming social link previews will immediately update after the upgrade without publishing and re-checking with platform debuggers.
• Not testing pages after the upgrade, as some browser-only code libraries might break server rendering.
• Trying to run multiple upgrades on the same project at the same time.