An opinionated webpack config for GitHub apps.
Clone or download
Latest commit f6c47b7 Oct 15, 2018


An opinionated webpack config for GitHub apps.


  • Single and multiple HTML entry points
  • Common chunks bundle when using multiple entry points
  • ES6 transpilation via Babel
  • Source Maps
  • PostCSS
  • HTML5 History routing (in development)
  • GraphQL proxy (in development)
  • Content Security Policy
  • HTML and JS minification (in production)
  • Static gzip compression (in production)
  • Docker nginx deployment


Currently targets the Docker nginx deployment environment. Improved gh-pages deployment is planned in the future.

Basic Setup

$ npm install --save-dev webpack-dev-server
$ npm install --save-dev webpack-config-github


module.exports = require('webpack-config-github')


document.body.innerHTML = '<h1>Hello, World!</h1>'

Start development server

$ webpack-dev-server --open

Directory Structure

├── package.json
├── Dockerfile
├── config
│   └── nginx.conf
├── .graphqlconfig
├── data
│   └── schema.graphql
├── node_modules
├── public
│   └── favicon.ico
│   └── robots.txt
└── src
    └── index.js
    └── components
        └── App.js
        └── Layout.js
        └── Sidebar.js


The currently suggested deployment target is the Docker nginx image.

See the example Dockerfile.


This example nginx.conf aligns the static serving with the webpack-dev-server.


Specifies the location of the GraphQL schema and target endpoints.

Here is an example configuration file when targeting the GitHub GraphQL API.

  "schemaPath": "data/schema.graphql",
  "extensions": {
    "endpoints": {
      "production": {
        "url": "",
        "headers": {
          "Authorization": "Bearer ${env:API_TOKEN}"

See the GraphQL Configuration Format for more information.


When using Relay, a copy of the GraphQL schema should be checked in at this location. Checking the schema in ensures linting and build tools can be consistently ran offline and in CI.


The public/ directory contains static assets that will be exposed as is. This is useful for well known static assets that need to be served at a specific root path like favicon.ico and robots.txt.


Contains source JavaScript, CSS and other assets that will be compiled via webpack.


Is the main entry point for bootstrapping the application.

When using React, this file should render the root application component.

import React from 'react'
import ReactDOM from 'react-dom'

import App from './components/App'

ReactDOM.render(<App />, document.getElementById('root'))


  • Add Subresource Integrity support
  • Support CSS Modules
  • Support hot reloading
  • Add gh-pages deployment pattern

See Also

Many of the directory conventions used here are inspired from create-react-app.