|
| 1 | +<h1 align="center"><strong>Boilerplate for a Basic Fullstack GraphQL App with Vue</strong></h1> |
| 2 | + |
| 3 | +<br /> |
| 4 | + |
| 5 | + |
| 6 | + |
| 7 | +<div align="center"><strong>🚀 Bootstrap your fullstack GraphQL app within seconds</strong></div> |
| 8 | +<div align="center">Basic starter kit for a fullstack GraphQL app with Vue and Node.js - based on best practices from the GraphQL community.</div> |
| 9 | + |
| 10 | +## Features |
| 11 | + |
| 12 | +- **Scalable GraphQL server:** The server uses [`graphql-yoga`](https://github.com/prisma/graphql-yoga) which is based on Apollo Server & Express |
| 13 | +- **Pre-configured Apollo Client:** The project comes with a preconfigured setup for Apollo Client |
| 14 | +- **GraphQL database:** Includes GraphQL database binding to [Prisma](https://www.prismagraphql.com) (running on MySQL) |
| 15 | +- **Tooling**: Out-of-the-box support for [GraphQL Playground](https://github.com/prisma/graphql-playground) & [query performance tracing](https://github.com/apollographql/apollo-tracing) |
| 16 | +- **Extensible**: Simple and flexible [data model](./database/datamodel.graphql) – easy to adjust and extend |
| 17 | +- **No configuration overhead**: Preconfigured [`graphql-config`](https://github.com/prisma/graphql-config) setup |
| 18 | + |
| 19 | + |
| 20 | +## Requirements |
| 21 | + |
| 22 | +You need to have the [GraphQL CLI](https://github.com/graphql-cli/graphql-cli) installed to bootstrap your GraphQL server using `graphql create`: |
| 23 | + |
| 24 | +```sh |
| 25 | +npm install -g graphql-cli |
| 26 | +``` |
| 27 | + |
| 28 | +## Getting started |
| 29 | + |
| 30 | +```sh |
| 31 | +# 1. Bootstrap GraphQL server in directory `my-app`, based on `vue-fullstack-basic` boilerplate |
| 32 | +graphql create my-app --boilerplate vue-fullstack-basic |
| 33 | + |
| 34 | +# 2. When prompted, deploy the Prisma service to a _public cluster_ |
| 35 | + |
| 36 | +# 3. Navigate into the `server` directory of the new project |
| 37 | +cd my-app/server |
| 38 | + |
| 39 | +# 4. Start the server |
| 40 | +yarn dev # runs server on http://localhost:4000, and opens GraphQL PLayground |
| 41 | + |
| 42 | +# 5. Open a new tab in the terminal and navigate back into my-app; |
| 43 | +# then run the app |
| 44 | +cd .. |
| 45 | +yarn start |
| 46 | +``` |
| 47 | + |
| 48 | +## Documentation |
| 49 | + |
| 50 | +### Commands |
| 51 | + |
| 52 | +* `yarn start` starts GraphQL server on `http://localhost:4000` |
| 53 | +* `yarn dev` starts GraphQL server on `http://localhost:4000` _and_ opens GraphQL Playground |
| 54 | +* `yarn playground` opens the GraphQL Playground for the `projects` from [`.graphqlconfig.yml`](./.graphqlconfig.yml) |
| 55 | +* `yarn prisma <subcommand>` gives access to local version of Prisma CLI (e.g. `yarn prisma deploy`) |
| 56 | + |
| 57 | +> **Note**: We recommend that you're using `yarn dev` during development as it will give you access to the GraphQL API or your server (defined by the [application schema](./src/schema.graphql)) as well as to the Prisma API directly (defined by the [Prisma database schema](./generated/prisma.graphql)). If you're starting the server with `yarn start`, you'll only be able to access the API of the application schema. |
| 58 | +
|
| 59 | +### Server structure |
| 60 | + |
| 61 | + |
| 62 | + |
| 63 | +| File name | Description <br><br>| |
| 64 | +| :-- | :-- | |
| 65 | +| `├── .graphqlconfig.yml` | Configuration file based on [`graphql-config`](https://github.com/prisma/graphql-config) (e.g. used by GraphQL Playground).| |
| 66 | +| `└── database ` (_directory_) | _Contains all files that are related to the Prisma database service_ |\ |
| 67 | +| ` ├── prisma.yml` | The root configuration file for your Prisma database service ([docs](https://www.prismagraphql.com/docs/reference/prisma.yml/overview-and-example-foatho8aip)) | |
| 68 | +| ` └── datamodel.graphql` | Defines your data model (written in [GraphQL SDL](https://blog.graph.cool/graphql-sdl-schema-definition-language-6755bcb9ce51)) | |
| 69 | +| `└── src ` (_directory_) | _Contains the source files for your GraphQL server_ | |
| 70 | +| ` ├── index.js` | The entry point for your GraphQL server | |
| 71 | +| ` ├── schema.graphql` | The **application schema** defining the API exposed to client applications | |
| 72 | +| ` └── generated` (_directory_) | _Contains generated files_ | |
| 73 | +| ` └── prisma.grapghql` | The **Prisma database schema** defining the Prisma GraphQL API | |
| 74 | + |
| 75 | +## Contributing |
| 76 | + |
| 77 | +The GraphQL boilerplates are maintained by the GraphQL community, with official support from the [Apollo](https://dev-blog.apollodata.com) & [Graphcool](https://blog.graph.cool/) teams. |
| 78 | + |
| 79 | +Your feedback is **very helpful**, please share your opinion and thoughts! If you have any questions or want to contribute yourself, join the [`#graphql-boilerplate`](https://graphcool.slack.com/messages/graphql-boilerplate) channel on our [Slack](https://graphcool.slack.com/). |
0 commit comments