GraphQL React Starter

GraphQL Node.js Starter is a hot-reloading boilerplate using Node.js, JavaScript through Babel and using GraphQL for API creations and consumption. For client-side, this uses React, React-Router and Redux. For the database portion, this uses PostgreSQL and a query-builder Knex.js

The purpose of this starter kit is to be as close to being a real-world starter while keeping it simple and flexible.

Current Status: still in development, but feel free to fork and contribute.

Installation

# Installs dependencies and sets up the development database. This uses `yarn` 
# if you have it but defaults to `npm` if you don't
make install

Development

# In development mode, everything is streamed from the source code. No files are 
# created (except the in-memory compilation of webpack-middleware). This allows 
# hot reloading to happen.

# start both api and client process
make start

# Uses PM2 for watch, management, monitoring. The meta data is inside this 
# directory's .pm2. You must prepend that in order to access pm2 commands.
PM2_HOME='.pm2' ./node_modules/.bin/pm2 list

# alternatively, you can use:
npm run pm2 [list|help|..]

Production

# Compiles and minifies both api and client into ./dist
make build

# Next, compress and copy the entire ./dist to a proper server. You do not need 
# to copy anything else from the repository.

# Run the client. `http-server` is just an example server. Use Nginx, Apache or 
# whatever you like to run the client. Everything you need is compiled in .dist.
NODE_ENV=production CLIENT_PORT=3000 API_PORT=8080 http-server ./dist

# Run the API. You must use `node` here. All ES2015+ syntax have been compiled. 
# If you are getting unexpected token errors, upgrade your node binaries. Note 
# that this is expecting a PostgreSQL server. You can change the options in the 
# `knexfile.js` and use a different database if you want.
NODE_ENV=production API_PORT=8080 node ./api/index.js

Docker

make do-up

Roadmap and Status

• Hot Reloading
• React
• Redux
• Webpack 2
• React Router
• ESLint
• .editorconfig
• GraphQL integration with Express
• Modularize Schema and Resolvers
• Database Schema with relationships (1-1/1-M/M-M)
• Separate API Server and Client server
• Production vs Development build
• GraphQL client integration: Apollo
• GraphQL + Redux
• GraphQL query example
• GraphQL mutation example
• Convert scripts to Makefile
• Process Management
• Dockerize Each Layer
• docker-compose up

Schema-First Design Steps

This centers your application development around your feature requirements, skewed a bit towards UI. Having the graphql abstraction allows you to focus on features rather than modeling your data and queries based on a rigid database schema.

Define Schema

Describe the graphql schema centered around your front-end requirements. This is not the same as Database Design, though in many cases, the schema could be a direct representation of your table relationships.

Define Resolvers

Define the resolvers, to match entities from your schema

Create Mocks

Mocking APIs are typically time consuming and often becomes a waste as API changes. graphql-tools has a mocking library that allows you to map values based on types or field names. Very useful, especially if synchronized with mocking library like faker.js or casual.js

Create or Update Database

Being that GraphQL is an abstraction that is somewhat geared towards UI requirements, there is no need to map a one-to-one schema between GraphQL schema and Database Schema. Through the resolver, we can morph and transform and even fetch extra data without being constricted with the database schema. This enables faster iteration and prototyping.

Dependencies

• apollo-client: A simple yet functional GraphQL client.
• body-parser: Node.js body parsing middleware
• cors: middleware for dynamically or statically enabling CORS in express/connect applications
• cssnano: A modular minifier, built on top of the PostCSS ecosystem.
• express: Fast, unopinionated, minimalist web framework
• graphql: A Query Language and Runtime which can target any service.
• graphql-server-express: Production-ready Node.js GraphQL server for Express and Connect
• graphql-tag: A JavaScript template literal tag that parses GraphQL queries
• graphql-tools: A set of useful tools for GraphQL
• knex: A batteries-included SQL query & schema builder for Postgres, MySQL and SQLite3 and the Browser
• lodash: Lodash modular utilities.
• normalize.css: A modern alternative to CSS resets
• pg: PostgreSQL client - pure javascript & libpq with the same API
• pretty-error: See nodejs errors with less clutter
• react: React is a JavaScript library for building user interfaces.
• react-apollo: React data container for Apollo Client
• react-dom: React package for working with the DOM.
• react-redux: Official React bindings for Redux
• react-router: A complete routing library for React
• redux: Predictable state container for JavaScript apps
• redux-thunk: Thunk middleware for Redux.

Dev Dependencies

• babel-cli: Babel command line.
• babel-core: Babel compiler core.
• babel-loader: babel module loader for webpack
• babel-plugin-transform-object-rest-spread: Compile object rest and spread to ES5
• babel-plugin-transform-runtime: Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals
• babel-preset-env: A Babel preset for each environment.
• babel-preset-react: Babel preset for all React plugins.
• better-npm-run: Better NPM scripts runner
• casual: Fake data generator
• compression: Node.js compression middleware
• css-loader: css loader module for webpack
• debug: small debugging utility
• eslint: An AST-based pattern checker for JavaScript.
• eslint-plugin-babel: an eslint rule plugin companion to babel-eslint
• eslint-plugin-graphql: GraphQL ESLint plugin.
• eslint-plugin-react: React specific linting rules for ESLint
• extract-text-webpack-plugin: Extract text from bundle into a file.
• file-loader: file loader module for webpack
• html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles
• ip:
• json-loader: json loader module for webpack
• node-sass: Wrapper around libsass
• nodemon: Simple monitor script for use during development of a node.js app.
• package-json-to-readme: Generate a README.md from package.json contents
• pm2: Production process manager for Node.JS applications with a built-in load balancer.
• postcss-loader: PostCSS loader for webpack
• react-hot-loader: Tweak React components in real time.
• redbox-react: A redbox (rsod) component to display your errors.
• redux-logger: Logger for Redux
• sass-loader: Sass loader for webpack
• sqlite3: Asynchronous, non-blocking SQLite3 bindings
• style-loader: style loader module for webpack
• url-loader: url loader module for webpack
• webpack: Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
• webpack-dev-middleware: Offers a dev middleware for webpack, which arguments a live bundle to a directory
• webpack-dev-server: Serves a webpack app. Updates the browser on changes.
• webpack-hot-middleware: Webpack hot reloading you can attach to your own server
• webpack-node-externals: Easily exclude node_modules in Webpack bundle

License

MIT