GithubHelp home page GithubHelp logo

webpack-config-github's Introduction

webpack-config-github

An opinionated webpack config for GitHub apps.

Features

  • 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

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

webpack.config.js

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

src/index.js

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

Start development server

$ webpack-dev-server --open

Directory Structure

my-app
├── 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

Dockerfile

The currently suggested deployment target is the Docker nginx image.

See the example Dockerfile.

config/nginx.conf

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

.graphqlconfig

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": "https://api.github.com/graphql",
        "headers": {
          "Authorization": "Bearer ${env:API_TOKEN}"
        }
      }
    }
  }
}

See the GraphQL Configuration Format for more information.

data/schema.graphql

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.

public/

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.

src/

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

src/index.js

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'))

Roadmap

  • 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.

webpack-config-github's People

Contributors

caged avatar josh avatar koddsson avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

webpack-config-github's Issues

Relay Compiler is invoked N times

On a simple example, Runner.compileAll is called at least twice.

https://github.com/danielholmes/relay-compiler-webpack-plugin/blob/19959b855b34ec6f0a0d6db27a3ae597b3286a88/src/index.js#L97-L105

Actual logged output.

$ cd examples/relay
$ webpack
Parsed default in 0.00s

Writing default
Writer time: 0.03s [0.03s compiling, 0.00s generating, 0.00s extra]
Unchanged: 0 files
Written default in 0.03s
Parsed default in 0.00s

Writing default
Writer time: 0.00s [0.00s compiling, 0.00s generating, 0.00s extra]
Unchanged: 0 files
Written default in 0.00s

CC: @koddsson

Select default graphql endpoint more intelligently

I don't like how the current config needs to mutate the ENV vars in order have getGraphQLProjectConfig work as expected. It would be nice if you could pass something to getGraphQLProjectConfig as a fallback like getGraphQLProjectConfig('production'). Even better would be avoiding a hard coded naming requirement and selecting the first endpoint by default. Often there will only be one, no need for anyone to have to configure a name in that case.

// TODO: Investigate other ways set a default GRAPHQL_CONFIG_ENDPOINT_NAME
// for getGraphQLProjectConfig without mutating the environment.
if (!process.env['GRAPHQL_CONFIG_ENDPOINT_NAME']) {
process.env['GRAPHQL_CONFIG_ENDPOINT_NAME'] = 'production'
}

Investigate RelayCompilerWebpackPlugin watchman flag

Settings watchman to true will crash unless the user has watchman installed. Not a great experience as watchman is an external dependency. Users may not have it installed or environments like production or CI systems won't either. If its truly required, it would be nice if it was an npm dependency. Not sure what the best way to integrate this is.

CC: @koddsson

Relay Compiler inappropriately logs to stdout

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.