-
Notifications
You must be signed in to change notification settings - Fork 32
[WIP] Add minimal boilerplate #120
base: master
Are you sure you want to change the base?
Changes from 5 commits
ccaa83b
675c62a
bcb98d3
fe2c38d
3f8aeb9
ae143e7
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| { | ||
| "presets": ["babel-preset-expo"], | ||
| "env": { | ||
| "development": { | ||
| "plugins": ["transform-react-jsx-source"] | ||
| } | ||
| } | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| node_modules/**/* | ||
| .expo/* | ||
| npm-debug.* | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| const fs = require('fs') | ||
| const { replaceInFiles, deploy, writeEnv, getInfo } = require('graphql-boilerplate-install') | ||
|
|
||
| module.exports = async ({ project, projectDir }) => { | ||
| const templateName = 'graphql-boilerplate' | ||
|
|
||
| replaceInFiles(['server/src/index.js', 'server/package.json', 'server/database/prisma.yml'], templateName, project) | ||
|
|
||
| console.log('Running $ prisma deploy...') | ||
|
|
||
| process.chdir('server/') | ||
|
|
||
| await deploy(false) | ||
| const info = await getInfo() | ||
|
|
||
| process.chdir('../') | ||
|
|
||
| replaceInFiles(['server/src/index.js'], '__PRISMA_ENDPOINT__', info.httpEndpoint) | ||
|
|
||
| console.log(`\ | ||
| Next steps: | ||
| 1. Change directory: \`cd ${projectDir}/server\` | ||
| 2. Start local server: \`yarn start\` (you can now open a Playground at http://localhost:4000) | ||
| 3. Change directory: \`cd ..\` | ||
| 4. Start React app: \`yarn start\` | ||
| 5. Open browser: http://localhost:3000 | ||
| `) | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| { | ||
| "name": "install", | ||
| "version": "0.0.0", | ||
| "devDependencies": { | ||
| "graphql-boilerplate-install": "0.1.8" | ||
| }, | ||
| "prettier": { | ||
| "semi": false, | ||
| "singleQuote": true, | ||
| "trailingComma": "all" | ||
| } | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. | ||
| # yarn lockfile v1 | ||
|
|
||
|
|
||
| commander@^2.9.0: | ||
| version "2.13.0" | ||
| resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c" | ||
|
|
||
| [email protected], cross-spawn@^5.1.0: | ||
| version "5.1.0" | ||
| resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449" | ||
| dependencies: | ||
| lru-cache "^4.0.1" | ||
| shebang-command "^1.2.0" | ||
| which "^1.2.9" | ||
|
|
||
| [email protected]: | ||
| version "0.1.8" | ||
| resolved "https://registry.yarnpkg.com/graphql-boilerplate-install/-/graphql-boilerplate-install-0.1.8.tgz#7d71b3f5908d968aaa77c524765cc1b4d7bec348" | ||
| dependencies: | ||
| cross-spawn "5.1.0" | ||
| npm-run "4.1.2" | ||
|
|
||
| isexe@^2.0.0: | ||
| version "2.0.0" | ||
| resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10" | ||
|
|
||
| lru-cache@^4.0.1: | ||
| version "4.1.1" | ||
| resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55" | ||
| dependencies: | ||
| pseudomap "^1.0.2" | ||
| yallist "^2.1.2" | ||
|
|
||
| minimist@^1.2.0: | ||
| version "1.2.0" | ||
| resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" | ||
|
|
||
| npm-path@^2.0.2, npm-path@^2.0.3: | ||
| version "2.0.4" | ||
| resolved "https://registry.yarnpkg.com/npm-path/-/npm-path-2.0.4.tgz#c641347a5ff9d6a09e4d9bce5580c4f505278e64" | ||
| dependencies: | ||
| which "^1.2.10" | ||
|
|
||
| [email protected]: | ||
| version "4.1.2" | ||
| resolved "https://registry.yarnpkg.com/npm-run/-/npm-run-4.1.2.tgz#1030e1ec56908c89fcc3fa366d03a2c2ba98eb99" | ||
| dependencies: | ||
| cross-spawn "^5.1.0" | ||
| minimist "^1.2.0" | ||
| npm-path "^2.0.3" | ||
| npm-which "^3.0.1" | ||
| serializerr "^1.0.3" | ||
| sync-exec "^0.6.2" | ||
|
|
||
| npm-which@^3.0.1: | ||
| version "3.0.1" | ||
| resolved "https://registry.yarnpkg.com/npm-which/-/npm-which-3.0.1.tgz#9225f26ec3a285c209cae67c3b11a6b4ab7140aa" | ||
| dependencies: | ||
| commander "^2.9.0" | ||
| npm-path "^2.0.2" | ||
| which "^1.2.10" | ||
|
|
||
| protochain@^1.0.5: | ||
| version "1.0.5" | ||
| resolved "https://registry.yarnpkg.com/protochain/-/protochain-1.0.5.tgz#991c407e99de264aadf8f81504b5e7faf7bfa260" | ||
|
|
||
| pseudomap@^1.0.2: | ||
| version "1.0.2" | ||
| resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3" | ||
|
|
||
| serializerr@^1.0.3: | ||
| version "1.0.3" | ||
| resolved "https://registry.yarnpkg.com/serializerr/-/serializerr-1.0.3.tgz#12d4c5aa1c3ffb8f6d1dc5f395aa9455569c3f91" | ||
| dependencies: | ||
| protochain "^1.0.5" | ||
|
|
||
| shebang-command@^1.2.0: | ||
| version "1.2.0" | ||
| resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" | ||
| dependencies: | ||
| shebang-regex "^1.0.0" | ||
|
|
||
| shebang-regex@^1.0.0: | ||
| version "1.0.0" | ||
| resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3" | ||
|
|
||
| sync-exec@^0.6.2: | ||
| version "0.6.2" | ||
| resolved "https://registry.yarnpkg.com/sync-exec/-/sync-exec-0.6.2.tgz#717d22cc53f0ce1def5594362f3a89a2ebb91105" | ||
|
|
||
| which@^1.2.10, which@^1.2.9: | ||
| version "1.3.0" | ||
| resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a" | ||
| dependencies: | ||
| isexe "^2.0.0" | ||
|
|
||
| yallist@^2.1.2: | ||
| version "2.1.2" | ||
| resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52" |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {} |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import React from 'react'; | ||
| import { Text, View } from 'react-native'; | ||
| import Expo from "expo"; | ||
|
||
| import { ApolloProvider } from 'react-apollo'; | ||
| import ApolloClient from 'apollo-boost'; | ||
| import Home from './src/Components/Home'; | ||
|
|
||
| const { manifest } = Expo.Constants; | ||
| const url = manifest.debuggerHost.split(':').shift().concat(':4000') | ||
|
|
||
| const client = new ApolloClient({ | ||
| uri: `http://${url}`, | ||
| }) | ||
|
|
||
| export default class App extends React.Component { | ||
|
||
| render() { | ||
| return ( | ||
| <ApolloProvider client={client} > | ||
| <Home /> | ||
| </ApolloProvider> | ||
| ); | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
|
|
||
|
||
| # react-native-apollo-basic | ||
|
|
||
| 🚀 Basic starter code for a mobile app based on React Native, GraphQL & Apollo Client. | ||
|
|
||
|  | ||
|
|
||
| ## TODO | ||
|
|
||
| - [ ] Fix runtime issue | ||
| - [ ] Enable in [https://github.com/graphql-cli/graphql-cli/blob/master/src/cmds/create/boilerplates.ts](https://github.com/graphql-cli/graphql-cli/blob/master/src/cmds/create/boilerplates.ts) | ||
|
|
||
| > **PRs are very welcome** 🙏 | ||
|
|
||
| ## Technologies | ||
|
|
||
| * **Frontend** | ||
| * [React Native](https://facebook.github.io/react-native/): JavaScript framework for building native mobile apps with [React](https://facebook.github.io/react/) | ||
| * [Apollo Client](https://github.com/apollographql/apollo-client): Fully-featured, production ready caching GraphQL client | ||
| * **Backend** | ||
| * [Graphcool](https://www.graph.cool): Powerful GraphQL database | ||
| * [`graphql-yoga`](https://github.com/graphcool/graphql-yoga/): Fully-featured GraphQL server with focus on easy setup, performance & great developer experience | ||
| * [`graphcool-binding`](https://github.com/graphcool/graphcool-binding): GraphQL binding for Graphcool services | ||
|
|
||
| ## Requirements | ||
|
|
||
| You need to have the following things installed: | ||
|
|
||
| * [Expo](https://expo.io/) | ||
| * Node 8+ | ||
| * Graphcool CLI: `npm i -g graphcool` | ||
| * GraphQL CLI: `npm i -g graphql-cli` | ||
| * GraphQL Playground desktop app (optional): [Download](https://github.com/graphcool/graphql-playground/releases) | ||
|
|
||
| ## Getting started | ||
|
|
||
| ```sh | ||
| # Bootstrap GraphQL server in directory `my-app`, based on `react-fullstack-minimal` boilerplate | ||
| graphql create my-app --boilerplate react-native-minimal | ||
|
|
||
| # Navigate into the new project's `server` directory | ||
| cd my-app/server | ||
|
|
||
| # Deploy the Graphcool database & start the server (runs on http://localhost:4000) | ||
| yarn start | ||
|
|
||
| # Navigate back into the project's root directory and launch the React app | ||
| cd .. | ||
| exp:start # start react-native server | ||
| yarn run ios # open with iOS simulator | ||
| yarn run android # open with Android emulator | ||
| ``` | ||
|
|
||
| <details> | ||
|
|
||
| <summary>Alternative: Clone repo</summary> | ||
|
|
||
| ```sh | ||
| TODO | ||
| ``` | ||
|
|
||
| </details> | ||
|
|
||
| ## Docs | ||
|
|
||
| ### Project structure | ||
|
|
||
| #### `/server` | ||
|
|
||
| - [`.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. | ||
| - [`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)). | ||
|
|
||
| #### `/server/database` | ||
|
|
||
| - [`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)). | ||
| - [`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`. | ||
|
|
||
| #### `/server/src` | ||
|
|
||
| - [`src/schema.graphql`](src/schema.graphql) defines your **application schema**. It contains the GraphQL API that you want to expose to your client applications. | ||
| - [`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). | ||
|
|
||
| ### Common questions | ||
|
|
||
| #### I'm getting a 'Schema could not be fetched.' error after deploying, what gives? | ||
|
|
||
| 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: | ||
|
|
||
| 1. Visit http://jwtbuilder.jamiekurtz.com/ | ||
| 1. Replace the `Key` at the bottom of the page with your `secret` from the [`graphcool.yml`](./server/graphcool.yml#L5) | ||
| 1. Click `Create signed JWT` and copy the obtained token | ||
| 1. Now, to access the schema, use the `Authorization: Bearer <token>` header, or in the GraphQL Playground set it as JSON: | ||
| ```json | ||
| { | ||
| "Authorization": "Bearer <token>" | ||
| } | ||
| ``` | ||
| 1. Reload the schema in the Playground (the _refresh_-button is located right next to the URL of the server) | ||
|
|
||
| > 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. | ||
|
|
||
| ## Contributing | ||
|
|
||
| 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/). | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| { | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'd love to see this file more complete, rather than the defaults that Expo provides.
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think the defaults are more than enough |
||
| "expo": { | ||
| "name": "app", | ||
| "description": "This project is really great.", | ||
| "slug": "app", | ||
| "privacy": "public", | ||
| "sdkVersion": "26.0.0", | ||
|
||
| "platforms": ["ios", "android"], | ||
| "version": "1.0.0", | ||
| "orientation": "portrait", | ||
| "icon": "./assets/icon.png", | ||
| "splash": { | ||
| "image": "./assets/splash.png", | ||
| "resizeMode": "contain", | ||
| "backgroundColor": "#ffffff" | ||
| }, | ||
| "updates": { | ||
| "fallbackToCacheTimeout": 0 | ||
| }, | ||
| "assetBundlePatterns": [ | ||
| "**/*" | ||
| ], | ||
| "ios": { | ||
| "supportsTablet": true | ||
| } | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| { | ||
| "name": "react-native-fullstack-boilerplate", | ||
| "version": "0.1.0", | ||
| "main": "node_modules/expo/AppEntry.js", | ||
| "private": true, | ||
| "scripts": { | ||
| "start": "react-native-scripts start", | ||
| "exp:start": "exp start --lan", | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What does
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Since we are depending on local ip rather than domain url, it's necessary to use --lan to make that app has access to prisma server |
||
| "exp:android": "exp android", | ||
|
||
| "exp:ios": "exp ios", | ||
| "eject": "react-native-scripts eject", | ||
| "android": "react-native-scripts android", | ||
| "ios": "react-native-scripts ios", | ||
| "test": "node node_modules/jest/bin/jest.js --watch" | ||
| }, | ||
| "jest": { | ||
| "preset": "jest-expo" | ||
| }, | ||
| "devDependencies": { | ||
| "eslint": "4.18.1", | ||
| "eslint-config-airbnb": "16.1.0", | ||
| "eslint-config-airbnb-base": "12.1.0", | ||
| "eslint-plugin-import": "2.9.0", | ||
| "eslint-plugin-jsx-a11y": "6.0.3", | ||
| "eslint-plugin-react": "7.7.0", | ||
| "eslint-plugin-react-native": "3.2.1", | ||
| "jest-expo": "25.1.0", | ||
|
||
| "react-native-scripts": "1.11.1", | ||
| "react-test-renderer": "16.2.0" | ||
| }, | ||
| "dependencies": { | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. PR works for me on Windows 10 w/ exp cli commands Perhaps the exp cli scripts can be added as npm scripts (for transparency to those unfamiliar with exp cli requirements) something like: |
||
| "apollo-boost": "^0.1.4", | ||
| "expo": "^26.0.0", | ||
|
||
| "graphql": "^0.13.2", | ||
| "graphql-tag": "^2.8.0", | ||
| "react": "16.3.0-alpha.1", | ||
|
||
| "react-apollo": "^2.1.3", | ||
| "react-native": "https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz" | ||
|
||
| }, | ||
| "prettier": { | ||
| "semi": false, | ||
| "singleQuote": true, | ||
| "trailingComma": "all" | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| node_modules | ||
| package.json.lock | ||
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| { | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Please add the prettier settings from the basic server's |
||
| "name": "graphql-boilerplate", | ||
| "version": "1.0.0", | ||
| "scripts": { | ||
| "start": "node src/index.js" | ||
| }, | ||
| "keywords": [ | ||
| "react-native", | ||
| "prisma", | ||
| "graphcool" | ||
| ], | ||
| "author": "Subramanya Chakravarthy", | ||
|
||
| "dependencies": { | ||
| "graphql-yoga": "^1.8.2" | ||
| } | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should change this to reflect the basic boilerplate. No need to globs to be used; it could just be
node_modules/and.expo/