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.
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:
Make sure you're using the latest tinacms
& @tinacms/cli
packages.
yarn upgrade tinacms @tinacms/cli
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";
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.
Your pages/admin
file can now be deleted.
The new admin page will be generated by Tina's build process.
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.
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
© TinaCMS 2019–2023