• Stars
    star
    119
  • Rank 297,930 (Top 6 %)
  • Language
    TypeScript
  • Created about 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

NestJS + Next.js sample application / Backend and Frontend use only TypeScript!!!

This project use only TypeScript!!

Tech stack

  • Backend
    • NestJS
    • Prisma
    • GraphQL
  • Frontend
    • Next.js / React
    • GraphQL Code Generator
    • Apollo Client
    • Semantic UI
    • emotion
  • Other
    • yarn workspace
    • ESLint / Prettier / husky
    • Docker / Docker Compose
    • Vercel
    • GCP (CloudSQL / Cloud Run / Cloud Build)

Getting Started

Docker

You can launch the development environment with one command!

docker-compose up

After successful launch, go to the following URL in your browser!

⚠️ Containers have dependencies, but the next container may start to be started before the preparation is complete. If it fails for that reason, please specify the start-up separately as follows.

docker-compose up mysql

See docker-compose.yaml if you want to know more.

Local

  1. Prepare MySQL and create a database for development. Then create file packages/backend/.env and fill in the environment variables.
DATABASE_URL="mysql://username:password@localhost:3306/nest_next_sample"
  1. Do a database migration.
cd packages/backend
yarn install
yarn migrate:deploy
  1. Run the startup command for backend.
yarn start:dev

After successful launch, go to http://localhost:3300/graphql in your browser!

  1. Create file packages/frontend/.env and fill in the environment variables.
SERVER_APOLLO_URI="http://localhost:3300"
PUBLIC_APOLLO_URI="http://localhost:3300"
  1. Run the startup command for frontend.
cd packages/frontend
yarn dev

After successful launch, go to http://localhost:3000 in your browser!

GraphQL exmaple

mutation {
  saveTask(task: { title: "test", categoryIds: [] }) {
    id
    title
    categories {
      id
      name
      color
    }
  }
}
query {
  task(id: 1) {
    id
    title
    taskContents {
      id
      checked
    }
    categories {
      id
      name
    }
  }
}