This is an unofficial starter for Turborepo.
This Turborepo includes the following packages/apps:
grafbase
: Grafbase Managed GQL serviceweb
: a Next.js app with Tailwind CSSui
: a React component library with Tailwind CSS shared by applicationsamplify
: a package for managing shared Amplify config/logicauth
: shared Auth.js configurationclient
: graphql client configuration, types, operations and providercore
: shared utilites and other common logicjest-config
: shared testing configpayments
: Stripe functions and utilitiestailwind-config
: shared tailwind configeslint-config-custom
:eslint
configurations (includeseslint-config-next
andeslint-config-prettier
)tsconfig
:tsconfig.json
s used throughout the monorepo
Each package/app is 100% TypeScript.
This Turborepo has some additional tools already setup for you:
- Tailwind CSS for styles and theming
- TypeScript for static type checking
- ESLint for code linting
- Prettier for code formatting
- Jest for testing
- Grafbase for GQL backend
- Storybook for previewing component library in isolation
The template uses Stripe, Cognito and Google all of which will need to be configured before full use of the template. You can find documentation on setting up Stripe for development here for Cognito here and Google here.
Import the project in grafbase: https://grafbase.com/docs/getting-started/first-use
grafbase/.env
example
AWS_COGNITO_ACCESS_KEY=${AWS Key}
AWS_COGNITO_SECRET_ACCESS_KEY=${AWS Secret}
AWS_COGNITO_REGION=${AWS Region}
COGNITO_USER_POOL_ID=${Userpool ID}
NEXTAUTH_SECRET=${Next Auth Secret}
ISSUER_URL=https://grafbase.com
STRIPE_SECRET_KEY=${Stripe Secret}
The grafbase cli can be ran to use the pathfinder playground using yarn dev:gql
.
apps/web/.env
example
ISSUER_URL=https://grafbase.com
NEXTAUTH_SECRET={Next Auth Secret}
NEXTAUTH_URL=http://localhost:3000
NEXT_PUBLIC_ROOT_URL=http://localhost:3000
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=%{Stripe Publishable Key}
Start the development environment with yarn dev
.
packages/client/.env
example
API_ENDPOINT=https://{your-project}.grafbase.app/graphql
Run codegen automatic type generation with yarn codegen
while yarn dev:gql
is running in another terminal.
When using Amplify in other packages the configure
method must be called at the top of the file.
packages/amplify/.env
example
COGNITO_REGION=${AWS Region}
COGNITO_DOMAIN=https://${your-app}.auth.${region}.amazoncognito.com
COGNITO_USER_POOL_ID=${user pool ID}
COGNITO_USER_POOL_CLIENT_ID=${Client ID}
The Grafbase client authentication is primarily meant to token based but can still be authenticated via the API token. The API token is required for some operations that happen prior to getting the user's JWT access token. You will need to add the API key to the auth package .env
file for this reason.
packages/auth/.env
example
API_KEY=${Grafbase API key}
COGNITO_CLIENT_ID=${Cognito Client}
COGNITO_ISSUER=https://cognito-idp.us-east-1.amazonaws.com/${userpool ID}
GOOGLE_CLIENT_ID=${Google Client}
GOOGLE_CLIENT_SECRET=${Google Secret}
ISSUER_URL=https://grafbase.com
NEXTAUTH_SECRET={Next Auth Secret}
NEXTAUTH_URL=http://localhost:3000
STRIPE_TRIAL_PRODUCT_NAME=${Free trail product name}
packages/payments/.env
example
STRIPE_SECRET_KEY=${Stripe Secret Key}
STRIPE_SECRET_KEY_LIVE=${Stripe Secret Key Live}
STRIPE_WEBHOOK_SECRET=${Stripe Webhook Secret}
STRIPE_WEBHOOK_SECRET_LIVE=${Stripe Webhook Secret Live}
Contains shared React components for use in any apps defined inside the repo. You can preview the different pre packaged components using yarn storybook
.
Contains default tailwind config for packages/apps and the ability to generate a semi random theme using the default tailwind color palette using yarn generate-tailwind-theme
.