beauvankirk / graphql-react-starter Goto Github PK

This project forked from jancarloviray/graphql-react-starter

Docker + Hot Loading + Node + Express + PostgreSQL + Knex + GraphQL + React + Redux + React Router

License: MIT License

Makefile 5.96% JavaScript 86.89% CSS 1.43% HTML 0.60% Nginx 2.23% Shell 2.88%

graphql-react-starter's Introduction

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

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

Recommend Projects