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 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 wraper 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 outsite 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