Finally, we're ready to get this app in production. Make sure all the latest changes are pushed up to your repository. These are the steps to getting the
create-next-app up and running on Vercel.
Note this deploy will fail since environment variables aren't set for the GitHub Client yet.
.envfile, making sure to copy the client id and client secret from the production GitHub App you just created.
Visit your website, you should now be able to login and edit content with Tina on the live site! 🎉
Go ahead, make some edits and commit the changes (note these will commit and push to master if you own the repo). Toggle between edit and non-edit mode to get a feel for how things work on a live site.
When we deploy with Vercel, we can take full advantage of Preview Mode. This allows us to host a website that is fully static by default but switches to a dynamic mode that runs server code for users that have a special "preview" cookie set.
When someone visits the live site, they will initially land on a static home page. If they click the "Edit this Site" button and authenticate with Github, a fork will be created from which they can commit content edits. Depending on the editing context, the content will render from the static production build or be dynamically sourced from the Working GitHub Repository. You can try this on the demo repository.
In our case, since we are the owner of the repository, any content edits we make on the live site will be committed to
master. We encourage you to create a new branch before submitting a new pull request for changes.
That's it! There are quite a few steps but this should be a 0-100 guide on getting up and running with GitHub Open Authoring, using Tina, Next.js & Vercel.
There is still more work to do in order to improve the Open Authoring workflow for teams. Stay tuned with the latest on the GitHub project or with our Newsletter.