Don't use app.js. Move its functionality to webpack.config.js

app.js had three weirdly merged features.

1. It held the require.context magic function stuff from Webpack to
autoload page modules from the `pages` directory.
2. You could export a function to programatically rewrite paths.
3. You could export a function which would get run on every route change
(useful for things like tracking path changes in Google Analytics).

This PR moves the require.context to a an auto-written file. This sets
the stage for #208. To rewrite paths, now export the same function from
gatsby.config.js. And for `onRouteChange`, export this from
`gatsby-client-utils.js` which is for client-only user functions used by Gatsby core.

README.md

@@ -216,8 +216,8 @@ files which start with an underscore:
   the requested file](https://github.com/gatsbyjs/gatsby/pull/121#issuecomment-194715068).
 * (optional) `post-build.js` - a `function(pages, cb)` you can provide to do final
 processing on all generated content.
-* (optional) `app.js` - a way to hook into key application events. Provide an
-`onRouteChange` key of type `function(state, page)` to be notified whenever React-Router
+* (optional) `gatsby-client-utils.js` - a way to hook into key application events. Export
+`onRouteChange` of type `function(location)` to be notified whenever React-Router
 navigates.
 
 ### How to use your own webpack loaders
@@ -235,7 +235,7 @@ environment string will be one of `develop`, `static` or
 Create a `gatsby.config.js` in the root of your project:
 
 ```javascript
-module.exports = function(config, env) {
+exports.modifyWebpackConfig = function(config, env) {
   // edit loaders here
   return config;
 }
@@ -245,7 +245,7 @@ Consider the following example which removes the default css loader
 and replaces it with a loader that uses css-modules.
 
 ```javascript
-module.exports = function(config, env) {
+exports.modifyWebpackConfig = function(config, env) {
   config.removeLoader('css');
   config.loader('css', function(cfg) {
     cfg.test = /\.css$/;

bin/index.js

@@ -4,8 +4,18 @@ var packageJson = require('../package.json')
 var _ = require('lodash')
 var subCmd
 var cmds
+var fs = require('fs-extra')
+var path = require('path')
+
+// Copy our load-context function to root of site in a dot file.
+var gatsbyFile = __dirname + '/../dist/utils/load-context.js'
+var siteDirectory = path.resolve('.')
+var fileName = siteDirectory + '/.gatsby-context.js'
 /*eslint-enable */
 
+fs.copy(gatsbyFile, fileName)
+
+
 program
   .version(packageJson.version)
   .command('develop [directory]', 'Start hot-reloading development server')

lib/utils/build-production.js

@@ -1,13 +1,11 @@
 import webpack from 'webpack'
 import webpackConfig from './webpack.config'
-import getUserGatsbyConfig from './get-user-gatsby-config'
 
 module.exports = (program, callback) => {
   const { directory } = program
 
   // Build production js.
   const compilerConfig = webpackConfig(program, directory, 'production')
-  const config = getUserGatsbyConfig(compilerConfig, 'production')
 
-  return webpack(config.resolve()).run((err, stats) => callback(err, stats))
+  return webpack(compilerConfig.resolve()).run((err, stats) => callback(err, stats))
 }

lib/utils/develop.js

@@ -10,7 +10,6 @@ import find from 'lodash/find'
 import webpackRequire from 'webpack-require'
 import WebpackPlugin from 'hapi-webpack-plugin'
 
-import getUserGatsbyConfig from './get-user-gatsby-config'
 import globPages from './glob-pages'
 import webpackConfig from './webpack.config'
 const debug = require('debug')('gatsby:application')
@@ -21,9 +20,8 @@ module.exports = (program) => {
   // Load pages for the site.
   return globPages(directory, (err, pages) => {
     const compilerConfig = webpackConfig(program, directory, 'develop', program.port)
-    const config = getUserGatsbyConfig(compilerConfig, 'develop')
 
-    const compiler = webpack(config.resolve())
+    const compiler = webpack(compilerConfig.resolve())
 
     const HTMLPath = `${directory}/html`
 
@@ -41,9 +39,7 @@ module.exports = (program) => {
       },
     })
 
-    const htmlConfig = getUserGatsbyConfig(htmlCompilerConfig, 'develop')
-
-    webpackRequire(htmlConfig.resolve(), require.resolve(HTMLPath), (error, factory) => {
+    webpackRequire(htmlCompilerConfig.resolve(), require.resolve(HTMLPath), (error, factory) => {
       if (error) {
         console.log(`Failed to require ${directory}/html.js`)
         error.forEach((e) => {
@@ -121,7 +117,7 @@ module.exports = (program) => {
       const assets = {
         noInfo: true,
         reload: true,
-        publicPath: config._config.output.publicPath,
+        publicPath: compilerConfig._config.output.publicPath,
       }
       const hot = {
         hot: true,

lib/utils/glob-pages.js

@@ -7,12 +7,12 @@ import frontMatter from 'front-matter'
 import htmlFrontMatter from 'html-frontmatter'
 import objectAssign from 'object-assign'
 const debug = require('debug')('gatsby:glob')
+const gatsbyConfig = path.resolve(process.cwd(), './gatsby.config.js')
+const { rewritePath } = require(gatsbyConfig)
 
 module.exports = (directory, callback) => {
   const pagesData = []
 
-  const app = require(`${directory}/app`)
-
   // Make this list easy to modify through the config?
   // Or just keep adding extensions...?
   const fileTypesToGlob = [
@@ -71,8 +71,8 @@ module.exports = (directory, callback) => {
         if (data.path) {
           // Path was hardcoded.
           pageData.path = data.path
-        } else if (app.rewritePath) {
-          pageData.path = app.rewritePath(parsed, pageData)
+        } else if (rewritePath) {
+          pageData.path = rewritePath(parsed, pageData)
         }
 
         // If the above didn't set a path, set our own.

lib/utils/load-context.js

@@ -0,0 +1,12 @@
+// This file is auto-written and used by Gatsby to require
+// files from your pages directory.
+module.exports = function (callback) {
+  let context = require.context('./pages', true)
+  if (module.hot) {
+    module.hot.accept(context.id, () => {
+      context = require.context('./pages', true)
+      return callback(context)
+    })
+  }
+  return callback(context)
+}

lib/utils/static-entry.js

@@ -3,12 +3,12 @@ import { renderToString, renderToStaticMarkup } from 'react-dom/server'
 import { match, RouterContext } from 'react-router'
 import createRoutes from 'create-routes'
 import HTML from 'html'
-import app from 'app'
+const loadContext = require('.gatsby-context')
 import { pages, config } from 'config'
 import { link } from '../isomorphic/gatsby-helpers'
 
 let routes
-app.loadContext((pagesReq) => {
+loadContext((pagesReq) => {
   routes = createRoutes(pages, pagesReq)
 })
 

lib/utils/static-generation.js

@@ -2,7 +2,6 @@ require('node-cjsx').transform()
 import webpack from 'webpack'
 import globPages from './glob-pages'
 import webpackConfig from './webpack.config'
-import getUserGatsbyConfig from './get-user-gatsby-config'
 const debug = require('debug')('gatsby:static')
 
 module.exports = (program, callback) => {
@@ -14,9 +13,8 @@ module.exports = (program, callback) => {
 
     // Static site generation.
     const compilerConfig = webpackConfig(program, directory, 'static', null, routes)
-    const config = getUserGatsbyConfig(compilerConfig, 'static')
 
-    webpack(config.resolve()).run((e, stats) => {
+    webpack(compilerConfig.resolve()).run((e, stats) => {
       if (e) {
         return callback(e, stats)
       }

lib/utils/web-entry.js

@@ -5,7 +5,8 @@ import useScroll from 'scroll-behavior/lib/useStandardScroll'
 const scrollHistory = useScroll(() => browserHistory)()
 
 import createRoutes from 'create-routes'
-import app from 'app'
+const loadContext = require('.gatsby-context')
+import { onRouteChange } from 'gatsby-client-utils'
 
 function loadConfig (cb) {
   const stuff = require('config')
@@ -16,14 +17,14 @@ function loadConfig (cb) {
 }
 
 browserHistory.listen(location => {
-  if (app.onRouteChange) {
-    app.onRouteChange(location)
+  if (onRouteChange) {
+    onRouteChange(location)
   }
 })
 
 let routes
 loadConfig(() =>
-  app.loadContext((pagesReq) => {
+  loadContext((pagesReq) => {
     const { pages } = require('config')
     if (!routes) {
       routes = createRoutes(pages, pagesReq)

lib/utils/webpack.config.js

@@ -3,6 +3,9 @@ import StaticSiteGeneratorPlugin from 'static-site-generator-webpack-plugin'
 import ExtractTextPlugin from 'extract-text-webpack-plugin'
 import Config from 'webpack-configurator'
 const debug = require('debug')('gatsby:webpack-config')
+import path from 'path'
+const gatsbyConfig = path.resolve(process.cwd(), './gatsby.config.js')
+const { modifyWebpackConfig } = require(gatsbyConfig)
 
 module.exports = (program, directory, stage, webpackPort = 1500, routes = []) => {
   debug(`Loading webpack config for stage "${stage}"`)
@@ -322,5 +325,9 @@ module.exports = (program, directory, stage, webpackPort = 1500, routes = []) =>
     resolve: resolve(),
   })
 
-  return module(config)
+  if (modifyWebpackConfig) {
+    return modifyWebpackConfig(module(config), stage)
+  } else {
+    return module(config)
+  }
 }