|
| 1 | +# angulars-fullstack-apollo-basic |
| 2 | + |
| 3 | +🚀 Basic starter code for a fullstack app based on Angular, GraphQL & Apollo Client. |
| 4 | + |
| 5 | + |
| 6 | + |
| 7 | +## Technologies |
| 8 | + |
| 9 | +* **Frontend** |
| 10 | + * [Angular](https://github.com/angular/angular): Frontend framework for building mobile and desktop web applications |
| 11 | + * [Apollo Client](https://github.com/apollographql/apollo-client): Fully-featured, production ready caching GraphQL client |
| 12 | +* **Backend** |
| 13 | + * [Graphcool](https://www.graph.cool): Powerful GraphQL database |
| 14 | + * [`graphql-yoga`](https://github.com/graphcool/graphql-yoga/): Fully-featured GraphQL server with focus on easy setup, performance & great developer experience |
| 15 | + * [`graphcool-binding`](https://github.com/graphcool/graphcool-binding): GraphQL binding for Graphcool services |
| 16 | + |
| 17 | +## Requirements |
| 18 | + |
| 19 | +You need to have the following things installed: |
| 20 | + |
| 21 | +* Node 8+ |
| 22 | +* Graphcool CLI: `npm i -g graphcool@beta` |
| 23 | +* GraphQL CLI: `npm i -g graphql-cli` |
| 24 | +* GraphQL Playground desktop app (optional): [Download](https://github.com/graphcool/graphql-playground/releases) |
| 25 | + |
| 26 | +## Preview |
| 27 | + |
| 28 | + |
| 29 | + |
| 30 | +## Getting started |
| 31 | + |
| 32 | +```sh |
| 33 | +# Bootstrap GraphQL server in directory `my-app`, based on `angular-fullstack-basic` boilerplate |
| 34 | +graphql create my-app --boilerplate angular-fullstack-basic |
| 35 | + |
| 36 | +# Navigate into the new project's `server` directory |
| 37 | +cd my-app/server |
| 38 | + |
| 39 | +# Deploy the Graphcool database & start the server (runs on http://localhost:4000) |
| 40 | +yarn start |
| 41 | + |
| 42 | +# Navigate back into the project's root directory and launch the Angular app |
| 43 | +cd .. |
| 44 | +yarn start # open http://localhost:3000 in your browser |
| 45 | +``` |
| 46 | + |
| 47 | +<details> |
| 48 | + |
| 49 | +<summary>Alternative: Clone repo</summary> |
| 50 | + |
| 51 | +```sh |
| 52 | +TODO |
| 53 | +``` |
| 54 | + |
| 55 | +</details> |
| 56 | + |
| 57 | +## Docs |
| 58 | + |
| 59 | +### Project structure |
| 60 | + |
| 61 | +#### `/server` |
| 62 | + |
| 63 | +- [`.graphqlconfig.yml`](./server/.graphqlconfig.yml) GraphQL configuration file containing the endpoints and schema configuration. Used by the [`graphql-cli`](https://github.com/graphcool/graphql-cli) and the [GraphQL Playground](https://github.com/graphcool/graphql-playground). See [`graphql-config`](https://github.com/graphcool/graphql-config) for more information. |
| 64 | +- [`graphcool.yml`](./server/graphcool.yml): The root configuration file for your database service ([documentation](https://www.graph.cool/docs/1.0/reference/graphcool.yml/overview-and-example-foatho8aip)). |
| 65 | + |
| 66 | +#### `/server/database` |
| 67 | + |
| 68 | +- [`database/datamodel.graphql`](./server/database/datamodel.graphql) contains the data model that you define for the project (written in [SDL](https://blog.graph.cool/graphql-sdl-schema-definition-language-6755bcb9ce51)). |
| 69 | +- [`database/schema.generated.graphql`](./server/database/schema.generated.graphql) defines the **database schema**. It contains the definition of the CRUD API for the types in your data model and is generated based on your `datamodel.graphql`. **You should never edit this file manually**, but introduce changes only by altering `datamodel.graphql` and run `graphcool deploy`. |
| 70 | + |
| 71 | +#### `/server/src` |
| 72 | + |
| 73 | +- [`src/schema.graphql`](src/schema.graphql) defines your **application schema**. It contains the GraphQL API that you want to expose to your client applications. |
| 74 | +- [`src/index.js`](src/index.js) is the entry point of your server, pulling everything together and starting the `GraphQLServer` from [`graphql-yoga`](https://github.com/graphcool/graphql-yoga). |
| 75 | + |
| 76 | +### Common questions |
| 77 | + |
| 78 | +#### I'm getting a 'Schema could not be fetched.' error after deploying, what gives? |
| 79 | + |
| 80 | +Access to the Graphcool API is secured by a secret. This also applies to the introspection query. Using the latest version of GraphQL Playground, the `Authorization` header should automatically be setup with a proper JWT signing the secret. If that's not the case, you can follow these steps to access your API: |
| 81 | + |
| 82 | +1. Visit http://jwtbuilder.jamiekurtz.com/ |
| 83 | +1. Replace the `Key` at the bottom of the page with your `secret` from the [`graphcool.yml`](./server/graphcool.yml#L5) |
| 84 | +1. Click `Create signed JWT` and copy the obtained token |
| 85 | +1. Now, to access the schema, use the `Authorization: Bearer <token>` header, or in the GraphQL Playground set it as JSON: |
| 86 | + ```json |
| 87 | + { |
| 88 | + "Authorization": "Bearer <token>" |
| 89 | + } |
| 90 | + ``` |
| 91 | +1. Reload the schema in the Playground (the _refresh_-button is located right next to the URL of the server) |
| 92 | + |
| 93 | +> Note: Currently, no content of the signed JWT is verified by the database! This will be implemented [according to this proposal](https://github.com/graphcool/framework/issues/1365) at a later stage. |
| 94 | + |
| 95 | +## Contributing |
| 96 | + |
| 97 | +Your feedback is **very helpful**, please share your opinion and thoughts! If you have any questions, join the [`#graphql-boilerplate`](https://graphcool.slack.com/messages/graphql-boilerplate) channel on our [Slack](https://graphcool.slack.com/). |
0 commit comments