70 lines
2.2 KiB
Plaintext
70 lines
2.2 KiB
Plaintext
---
|
||
title: Usage – Developers
|
||
last_edited: '2025-07-15T00:16:15.119Z'
|
||
---
|
||
|
||
<Callout
|
||
body={<>
|
||
We recommend reading the previous page on usage for editors before moving onto this one. This page is focused on the local development experience.
|
||
</>}
|
||
variant="idea"
|
||
/>
|
||
|
||
The TinaCMS editor has two modes:
|
||
|
||
1. **Local Development Mode**: When running your site locally for development
|
||
2. **Production Mode**: When using the deployed version of your site
|
||
|
||
In local development mode, changes are saved directly to files in your local repository.
|
||
|
||
In production mode (with TinaCloud), changes are committed directly to your Git repository.
|
||
|
||
## Local Mode
|
||
|
||
The TinaCMS editor is available at the `/admin` route of your site (for example, `http://localhost:3000/admin`).
|
||
|
||
Run the below command from the terminal in your project directory to boot up the application.
|
||
|
||
```shell
|
||
pnpm dev
|
||
```
|
||
|
||
This will run the TinaCMS local server as well as the NextJS front-end.
|
||
|
||
The editing UI is the same as in production, but you can safely test any model or content changes that are out of the ordinary.
|
||
|
||
### ⚠️ The **tina-lock.json** File
|
||
|
||
The `tina-lock.json` must be **checked into source control and pushed to your repo**.
|
||
|
||
It contains a compiled schema used to resolve content documents, and should be updated after any local content or schema changes.
|
||
|
||
Run `pnpm dev` locally to trigger an update to this file.
|
||
|
||
## Testing Production Mode
|
||
|
||
You can also test a production instance of your application, hooked up to TinaCloud.
|
||
|
||
This may be useful in a pinch to pick up hard-to-find issues.
|
||
|
||
1. Update your local .env file with:
|
||
1. `TINA_TOKEN` from TinaCloud
|
||
2. `NEXT_PUBLIC_TINA_CLIENT_ID` from TinaCloud
|
||
3. `NEXT_PUBLIC_TINA_BRANCH` if using branch based editing
|
||
4. `NEXT_PUBLIC_SITE_URL` to `localhost:3000`
|
||
2. Run the build and start scripts.
|
||
|
||
```shell
|
||
pnpm build && pnpm start
|
||
```
|
||
|
||
## Next Steps
|
||
|
||
Once you're familiar with the basic editing interface, you might want to:
|
||
|
||
1. Customize your content schema
|
||
2. Create custom field components
|
||
3. Configure advanced validation
|
||
|
||
For more details on the editing experience, check out the [official TinaCMS documentation](https://tina.io/docs/using-tina-editor).
|