This project is a starter kit for using Midtype with the following libraries:
- GatsbyJS, the open-source front-end framework for building statically-generated sites.
- Typescript, a typed superset of Javascript.
It was bootstrapped with the default Gatsby Starter, and modified to use Typescript and integrate with Midtype.
-
In the "Authentication" section of the Midtype UI, add two redirect URLs (note that your production frontend must be hosted on an
https
domain. If you don't know where you'll host your frontend for the moment, add the second redirect URL when you know.):http://localhost:8000/login
https://your-production-frontend-domain.com/login
-
Set up your local environment variables by creating a file in the root of this project and name it
.env.development
. Add the following contents to this file:
GATSBY_MIDTYPE_APP_ID=[YOUR MIDTYPE PROJECT ID]
GATSBY_GOOGLE_SIGN_IN=[YOUR `http://localhost:8000/login` GOOGLE SIGN IN LINK]
GATSBY_MIDTYPE_API_URL=https://api.midtype.com
- Run
yarn
locally to install all dependencies. Then runyarn start
to run a development version of your site locally. Navigate tohttp://localhost:8000
to see your site in action. - Log into your site as an admin at
/login
. In the admin panel, you can create pages, blog posts, or upload photos. This acts as your custom CMS. Note that for any page, whatever you specify for thetemplate
field must be a.tsx
file insrc/templates/
. For example, if you specify thetemplate
for a given page to beabout-page
, then ensure that you have a template file atsrc/templates/about-page.tsx
. Learn more about Gatsby templates here. - You can easily deploy this site using Netlify and the included
netlify.toml
package.