In the previous step, you forked the tina-cloud-starter. Now, clone this repository and ensure this is your working directory.
ℹ️ This project uses
yarnas a package manager, if
yarnisn't installed on your machine, open a terminal and run
npm install -g yarn
Install the project's dependencies:
⚠️ If you'd like to use
npmbeware that there is no
package-lock.jsonso we can't guarantee the dependencies are the same for you.
This command starts the GraphQL server and the Next.js application in development mode. It also regenerates your schema types for TypeScript and GraphQL so changes to your
.tina config are reflected immediately.
One of the most interesting aspects of the TinaCMS Content API is that it doesn't actually require anything from the Tina backend to work locally. Since Tina is by default a Git-backed CMS, everything can be run from your local filesystem via the CLI. 😎
This is ideal for development workflows and the API is identical to the one used when working with the backend, so once you're ready to deploy your application you won't face any challenges there.
Open http://localhost:3000 in your browser to see your file-based content being loaded from the GraphQL API.
To enter edit mode, navigate to the
/admin route in the URL. This will prompt you to log in to Tina Cloud and will prompt you to either return to the page you were on or return to the home page.
Next, click on the pencil in the lower left-hand corner to open Tina's sidebar which displays a variety of forms with fields you can edit and see updates live on the page. Since we're working locally, clicking save results in changes to your local filesystem.
Make some changes, build your own components and experience contextual editing with Tina. As fun as this is, you'll likely want to collaborate with others and view changes on a publicly available URL. To do that, in the next step we'll connect to Tina Cloud.
Hint: To exit edit mode, navigate to the
/exit-adminroute. If you are running on
localhost, it is
Last Edited: August 26, 2021