Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: move codebase to Turborepo #15

Merged
merged 1 commit into from Oct 8, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 10 additions & 0 deletions .eslintrc.js
@@ -0,0 +1,10 @@
module.exports = {
root: true,
// This tells ESLint to load the config from the package `eslint-config-custom`
extends: ["custom"],
settings: {
next: {
rootDir: ["apps/*/"],
},
},
};
31 changes: 12 additions & 19 deletions .gitignore
@@ -1,23 +1,17 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
node_modules
.pnp
.pnp.js

# testing
/coverage

# database
/prisma/db.sqlite
/prisma/db.sqlite-journal
coverage

# next.js
/.next/
/out/

# production
/build
.next/
out/
build

# misc
.DS_Store
Expand All @@ -30,11 +24,10 @@ yarn-error.log*
.pnpm-debug.log*

# local env files
.env
.env*.local

# vercel
.vercel
.env.local
.env.development.local
.env.test.local
.env.production.local

# typescript
*.tsbuildinfo
# turbo
.turbo
85 changes: 54 additions & 31 deletions README.md
@@ -1,50 +1,73 @@
# Create T3 App
# Turborepo starter

This is an app bootstrapped according to the [init.tips](https://init.tips) stack, also known as the T3-Stack.
This is an official pnpm starter turborepo.

## Why are there `.js` files in here?
## What's inside?

As per [T3-Axiom #3](https://github.com/t3-oss/create-t3-app/tree/next#3-typesafety-isnt-optional), we take typesafety as a first class citizen. Unfortunately, not all frameworks and plugins support TypeScript which means some of the configuration files have to be `.js` files.
This turborepo uses [pnpm](https://pnpm.io) as a package manager. It includes the following packages/apps:

We try to emphasize that these files are javascript for a reason, by explicitly declaring its type (`cjs` or `mjs`) depending on what's supported by the library it is used by. Also, all the `js` files in this project are still typechecked using a `@ts-check` comment at the top.
### Apps and Packages

## What's next? How do I make an app with this?
- `docs`: a [Next.js](https://nextjs.org) app
- `web`: another [Next.js](https://nextjs.org) app
- `ui`: a stub React component library shared by both `web` and `docs` applications
- `eslint-config-custom`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
- `tsconfig`: `tsconfig.json`s used throughout the monorepo

We try to keep this project as simple as possible, so you can start with the most basic configuration and then move on to more advanced configuration.
Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).

If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help.
### Utilities

- [Next-Auth.js](https://next-auth.js.org)
- [Prisma](https://prisma.io)
- [TailwindCSS](https://tailwindcss.com)
- [tRPC](https://trpc.io) (using @next version? [see v10 docs here](https://trpc.io/docs/v10/))
This turborepo has some additional tools already setup for you:

Also checkout these awesome tutorials on `create-t3-app`.
- [TypeScript](https://www.typescriptlang.org/) for static type checking
- [ESLint](https://eslint.org/) for code linting
- [Prettier](https://prettier.io) for code formatting

- [Build a Blog With the T3 Stack - tRPC, TypeScript, Next.js, Prisma & Zod](https://www.youtube.com/watch?v=syEWlxVFUrY)
- [Build a Live Chat Application with the T3 Stack - TypeScript, Tailwind, tRPC](https://www.youtube.com/watch?v=dXRRY37MPuk)
- [Build a full stack app with create-t3-app](https://www.nexxel.dev/blog/ct3a-guestbook)
- [A first look at create-t3-app](https://dev.to/ajcwebdev/a-first-look-at-create-t3-app-1i8f)
### Build

## How do I deploy this?
To build all apps and packages, run the following command:

### Vercel
```
cd my-turborepo
pnpm run build
```

We recommend deploying to [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss). It makes it super easy to deploy NextJs apps.
### Develop

- Push your code to a GitHub repository.
- Go to [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss) and sign up with GitHub.
- Create a Project and import the repository you pushed your code to.
- Add your environment variables.
- Click **Deploy**
- Now whenever you push a change to your repository, Vercel will automatically redeploy your website!
To develop all apps and packages, run the following command:

### Docker
```
cd my-turborepo
pnpm run dev
```

You can also dockerize this stack and deploy a container. See the [Docker deployment page](https://create-t3-app-nu.vercel.app/en/deployment/docker) for details.
### Remote Caching

## Useful resources
Turborepo can use a technique known as [Remote Caching](https://turborepo.org/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.

Here are some resources that we commonly refer to:
By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup), then enter the following commands:

- [Protecting routes with Next-Auth.js](https://next-auth.js.org/configuration/nextjs#unstable_getserversession)
```
cd my-turborepo
pnpm dlx turbo login
```

This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).

Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your turborepo:

```
pnpm dlx turbo link
```

## Useful Links

Learn more about the power of Turborepo:

- [Pipelines](https://turborepo.org/docs/core-concepts/pipelines)
- [Caching](https://turborepo.org/docs/core-concepts/caching)
- [Remote Caching](https://turborepo.org/docs/core-concepts/remote-caching)
- [Scoped Tasks](https://turborepo.org/docs/core-concepts/scopes)
- [Configuration Options](https://turborepo.org/docs/reference/configuration)
- [CLI Usage](https://turborepo.org/docs/reference/command-line-reference)
4 changes: 4 additions & 0 deletions apps/docs/.eslintrc.js
@@ -0,0 +1,4 @@
module.exports = {
root: true,
extends: ["custom"],
};
30 changes: 30 additions & 0 deletions apps/docs/README.md
@@ -0,0 +1,30 @@
## Getting Started

First, run the development server:

```bash
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_source=github.com&utm_medium=referral&utm_campaign=turborepo-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
File renamed without changes.
5 changes: 5 additions & 0 deletions apps/docs/next.config.js
@@ -0,0 +1,5 @@
const withTM = require("next-transpile-modules")(["ui"]);

module.exports = withTM({
reactStrictMode: true,
});
27 changes: 27 additions & 0 deletions apps/docs/package.json
@@ -0,0 +1,27 @@
{
"name": "docs",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "next dev --port 3001",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.3.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"ui": "workspace:*"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"eslint-config-custom": "workspace:*",
"eslint": "7.32.0",
"next-transpile-modules": "9.0.0",
"tsconfig": "workspace:*",
"@types/node": "^17.0.12",
"@types/react": "18.0.17",
"typescript": "^4.5.3"
}
}
10 changes: 10 additions & 0 deletions apps/docs/pages/index.tsx
@@ -0,0 +1,10 @@
import { Button } from "ui";

export default function Docs() {
return (
<div>
<h1>Docs</h1>
<Button />
</div>
);
}
5 changes: 5 additions & 0 deletions apps/docs/tsconfig.json
@@ -0,0 +1,5 @@
{
"extends": "tsconfig/nextjs.json",
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
17 changes: 17 additions & 0 deletions apps/web/.env
@@ -0,0 +1,17 @@
# When adding additional env variables, the schema in /env/schema.mjs should be updated accordingly

# Next Auth
# You can use: `openssl rand -base64 24` to generate one
NEXTAUTH_SECRET=KntZ3WqxhMXeF4nfWor3LBGH5w6Mqagy
NEXTAUTH_URL=http://localhost:3000
#DATABASE_URL='mysql://4tod0zo38hkwg3nc644x:pscale_pw_xwswEj7wUQIJEmBoHCMlB9WwWUl1sPwDx2WxeLbedGT@aws-ap-southeast-2.connect.psdb.cloud/bloqcms?ssl={"rejectUnauthorized":true}'
#DATABASE_URL='mysql://4tod0zo38hkwg3nc644x:pscale_pw_xwswEj7wUQIJEmBoHCMlB9WwWUl1sPwDx2WxeLbedGT@127.0.0.1:59854/bloqcms?ssl={"rejectUnauthorized":true}'
DATABASE_URL='mysql://root:MyNewPass@localhost:3306/bloqcms?ssl={"rejectUnauthorized":true}'

# Next Auth Discord Provider
DISCORD_CLIENT_ID=
DISCORD_CLIENT_SECRET=

# Next Auth Github Provider
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
4 changes: 4 additions & 0 deletions apps/web/.eslintrc.js
@@ -0,0 +1,4 @@
module.exports = {
root: true,
extends: ["custom"],
};
File renamed without changes.
50 changes: 50 additions & 0 deletions apps/web/README.md
@@ -0,0 +1,50 @@
# Create T3 App

This is an app bootstrapped according to the [init.tips](https://init.tips) stack, also known as the T3-Stack.

## Why are there `.js` files in here?

As per [T3-Axiom #3](https://github.com/t3-oss/create-t3-app/tree/next#3-typesafety-isnt-optional), we take typesafety as a first class citizen. Unfortunately, not all frameworks and plugins support TypeScript which means some of the configuration files have to be `.js` files.

We try to emphasize that these files are javascript for a reason, by explicitly declaring its type (`cjs` or `mjs`) depending on what's supported by the library it is used by. Also, all the `js` files in this project are still typechecked using a `@ts-check` comment at the top.

## What's next? How do I make an app with this?

We try to keep this project as simple as possible, so you can start with the most basic configuration and then move on to more advanced configuration.

If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help.

- [Next-Auth.js](https://next-auth.js.org)
- [Prisma](https://prisma.io)
- [TailwindCSS](https://tailwindcss.com)
- [tRPC](https://trpc.io) (using @next version? [see v10 docs here](https://trpc.io/docs/v10/))

Also checkout these awesome tutorials on `create-t3-app`.

- [Build a Blog With the T3 Stack - tRPC, TypeScript, Next.js, Prisma & Zod](https://www.youtube.com/watch?v=syEWlxVFUrY)
- [Build a Live Chat Application with the T3 Stack - TypeScript, Tailwind, tRPC](https://www.youtube.com/watch?v=dXRRY37MPuk)
- [Build a full stack app with create-t3-app](https://www.nexxel.dev/blog/ct3a-guestbook)
- [A first look at create-t3-app](https://dev.to/ajcwebdev/a-first-look-at-create-t3-app-1i8f)

## How do I deploy this?

### Vercel

We recommend deploying to [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss). It makes it super easy to deploy NextJs apps.

- Push your code to a GitHub repository.
- Go to [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss) and sign up with GitHub.
- Create a Project and import the repository you pushed your code to.
- Add your environment variables.
- Click **Deploy**
- Now whenever you push a change to your repository, Vercel will automatically redeploy your website!

### Docker

You can also dockerize this stack and deploy a container. See the [Docker deployment page](https://create-t3-app-nu.vercel.app/en/deployment/docker) for details.

## Useful resources

Here are some resources that we commonly refer to:

- [Protecting routes with Next-Auth.js](https://next-auth.js.org/configuration/nextjs#unstable_getserversession)
5 changes: 5 additions & 0 deletions apps/web/next-env.d.ts
@@ -0,0 +1,5 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
5 changes: 5 additions & 0 deletions apps/web/next.config.js
@@ -0,0 +1,5 @@
const withTM = require("next-transpile-modules")(["ui"]);

module.exports = withTM({
reactStrictMode: true,
});
File renamed without changes.
47 changes: 47 additions & 0 deletions apps/web/package.json
@@ -0,0 +1,47 @@
{
"name": "web",
"version": "0.1.0",
"private": true,
"scripts": {
"build": "next build",
"dev": "next dev",
"postinstall": "prisma generate",
"lint": "next lint",
"start": "next start"
},
"dependencies": {
"@next-auth/prisma-adapter": "^1.0.4",
"@prisma/client": "^4.4.0",
"@tanstack/react-query": "^4.10.0",
"@trpc/client": "10.0.0-proxy-beta.15",
"@trpc/next": "10.0.0-proxy-beta.15",
"@trpc/react": "10.0.0-proxy-beta.15",
"@trpc/server": "10.0.0-proxy-beta.15",
"next": "12.3.1",
"next-auth": "~4.10.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"superjson": "1.9.1",
"ui": "workspace:*",
"zod": "^3.18.0"
},
"devDependencies": {
"@types/node": "18.0.0",
"@types/react": "18.0.14",
"@types/react-dom": "18.0.5",
"@typescript-eslint/eslint-plugin": "^5.33.0",
"@typescript-eslint/parser": "^5.33.0",
"autoprefixer": "^10.4.7",
"eslint": "8.22.0",
"eslint-config-next": "12.3.1",
"postcss": "^8.4.14",
"prettier": "2.7.1",
"prettier-plugin-tailwindcss": "^0.1.13",
"prisma": "^4.4.0",
"tailwindcss": "^3.1.6",
"typescript": "^4.8.4"
},
"ct3aMetadata": {
"initVersion": "6.0.1"
}
}
10 changes: 10 additions & 0 deletions apps/web/pages/index.tsx
@@ -0,0 +1,10 @@
import { Button } from "ui";

export default function Web() {
return (
<div>
<h1>Web</h1>
<Button />
</div>
);
}