# Quick Start

This guide will walk you through setting up Grats in a new project.

## Initialize an NPM package

Create a new directory and initialize it as an NPM packge set it use ES Modules.

```bash
mkdir grats-example
cd grats-example
npm init --yes && npm pkg set type="module"
```

## Install dependencies

Grats can be used with many different GraphQL servers, but this example uses `graphql-yoga`.

```bash
npm install graphql-yoga
```

```bash
npm install typescript @types/node grats --save-dev
```

## Initialize TypeScript

Create a `tsconfig.json` in your project root. Note that this config file also contains your Grats config:

/tsconfig.json

```json
{
  "grats": {
    // See Configuration for all available options
    "importModuleSpecifierEnding": ".js"
  },
  "compilerOptions": {
    "module": "nodenext",
    "target": "esnext",
    "lib": ["esnext"],
    "types": ["node"],
    "strict": true,
    "skipLibCheck": true
  }
}
```

## Create your server

/server.ts

```ts
import { createServer } from "node:http";
import { createYoga } from "graphql-yoga";
import { getSchema } from "./schema.js"; // Will be generated by Grats

/** @gqlQueryField */
export function hello(): string {
  return "Hello world!";
}

const yoga = createYoga({ schema: getSchema() });
const server = createServer(yoga);

server.listen(4000, () => {
  console.log("Running a GraphQL API server at http://localhost:4000/graphql");
});
```

## Build your schema

Next we run Grats to generate our schema. This will create our `./schema.ts` and `./schema.graphql` files.

```bash
npx grats
```

## Start your server

```bash
# Build your project
npx tsc
# Run your server. NOTE: This is the generated `.js` file adjacent to your `.ts` file.
node ./server.js
```

## Execute a query

You should now be able to visit [http://localhost:4000/graphql](http://localhost:4000/graphql) and see the GraphiQL interface! Try running a query:

```graphql
query MyQuery {
  hello
}
```

You should see the following response:

```json
{
  "data": {
    "hello": "Hello world!"
  }
}
```

## Success!

If you get stuck while getting started, you can check out our [example projects](../examples.md) for working examples. If that doesn't get you unstuck, stop by our [Discord server](https://capt.dev/grats-chat) to ask for help! We're happy to help you get started.

You can also check out this video in which [Michael Staib](https://twitter.com/michael_staib) from [ChilliCream](https://chillicream.com/) sets up a new Grats project:

## Next steps

Once you have Grats working in your code, you can:

-   Learn about all the docblock tags that Grats supports in [Docblock Tags](../docblock-tags.md).
-   Read about [Configuration](./configuration.md) to learn about all the configuration options available to you.
-   Read about [Workflows](../guides/workflows.md) to learn how to integrate Grats into your development workflows.