Upgrading to 0.70.0 (with iframe-based previews)

October 28, 2022

By James O'Halloran

tinacms@0.70.0 is a considerable rework to how TinaCMS is run, and how it renders previews.

Background

Previously, Tina's setup required you to wrap your site in a TinaProvider component. Tina would only be run from within your site.

In 0.70.0, we have introduced a "standalone tinacms build process", which instead runs your site's preview in a sandboxed iframe.

This offers several benefits including:

  • Removing styling conflicts between Tina, and your site.
  • A consistent framework-agnostic implementation.
  • Clearer and simpler code-splitting, for smaller bundle sizes on your live-site.

Upgrading

Upgrade tinacms

Make sure you're using the latest tinacms & @tinacms/cli packages.

yarn upgrade tinacms @tinacms/cli

Use new useTina hooks

Switch any instance of the useTina hook to come from tinacms/dist/react

- import { useTina } from "tinacms/dist/edit-state";
+ import { useTina } from "tinacms/dist/react";

Remove the Tina wrapper from your _app.tsx

return (
- <TinaProvider>
<Component {...pageProps} />
- </TinaProvider>
);

You can also now delete the entire .tina/components directory.

This wrapper is no longer needed, since the Tina wrapper is instead run on its own process outside of the iframe.

Remove pages/admin

Your pages/admin file can now be deleted.

The new admin page will be generated by Tina's build process.

Update your schema.ts file

Rename your schema.{ts,tsx,js,jsx} file to config.{ts,tsx,js,jsx}

Replace defineSchema with defineConfig. This contains both your schema, and your build config.

- const schema = defineSchema({
+ const config = defineConfig({
+ schema,
+ clientId,
+ branch,
+ token,
+ media,
+ build: {
+ publicFolder: "public", // The public asset folder for your framework
+ outputFolder: "admin", // within the public folder
+ },
+}
- export const tinaConfig = defineConfig({
- client,
- schema,
- // ...
- });
- export default schema;
+ export default config;

Most of the defineConfig properties will look familiar, apart from the new build property. This is required now that the Tina admin gets built outside your site's build-process.

For NextJS sites, use these values:

build: {
publicFolder: "public",
outputFolder: "admin"
},
Only one export is needed from our config.{js,ts,jsx,tsx} file. Previously, the config & schema were both exported separately.

Access the new admin page.

The admin is currently generated & accessible at /admin/index.html.

On NextJS sites, if you want things to work with just /admin you'll need to update your next.config.js to handle the redirect.

//next.config.js
module.exports = {
async rewrites() {
return [
{
source: '/admin',
destination: '/admin/index.html',
},
]
},
}

And that should be it! If you have any questions about migration, check out our community channels for assistance.

Last Edited: October 28, 2022