Merge pull request #32 from zeit/fix/build-structure

Improve build directory structure

bin/next-dev

@@ -2,10 +2,11 @@
 import { exec } from 'child_process'
 import { resolve, join } from 'path'
 import parseArgs from 'minimist'
+import { exists } from 'mz/fs'
 import Server from '../server'
 import HotReloader from '../server/hot-reloader'
 import webpack from '../server/build/webpack'
-import { exists } from 'mz/fs'
+import clean from '../server/build/clean'
 
 const argv = parseArgs(process.argv.slice(2), {
   alias: {
@@ -26,8 +27,11 @@ const open = url => {
 
 const dir = resolve(argv._[0] || '.')
 
-webpack(dir, { hotReload: true })
-.then(async (compiler) => {
+Promise.all([
+  webpack(dir, { hotReload: true }),
+  clean(dir)
+])
+.then(async ([compiler]) => {
   const hotReloader = new HotReloader(compiler)
   const srv = new Server({ dir, dev: true, hotReloader })
   await srv.start(argv.port)

package.json

@@ -30,6 +30,7 @@
     "babel-preset-react": "6.16.0",
     "babel-runtime": "6.11.6",
     "cross-spawn": "4.0.2",
+    "del": "2.2.2",
     "glob-promise": "1.0.6",
     "gulp-benchmark": "^1.1.1",
     "htmlescape": "1.1.1",
@@ -52,7 +53,6 @@
   "devDependencies": {
     "babel-eslint": "^7.0.0",
     "babel-plugin-transform-remove-strict-mode": "0.0.2",
-    "del": "2.2.2",
     "gulp": "3.9.1",
     "gulp-ava": "0.14.1",
     "gulp-babel": "6.1.2",

server/build/clean.js

@@ -0,0 +1,6 @@
+import { resolve } from 'path'
+import del from 'del'
+
+export default function clean (dir) {
+  return del(resolve(dir, '.next'))
+}

server/build/index.js

@@ -1,7 +1,11 @@
 import webpack from './webpack'
+import clean from './clean'
 
 export default async function build (dir) {
-  const compiler = await webpack(dir)
+  const [compiler] = await Promise.all([
+    webpack(dir),
+    clean(dir)
+  ])
 
   return new Promise((resolve, reject) => {
     compiler.run((err, stats) => {

server/build/webpack.js

@@ -11,12 +11,12 @@ export default async function createCompiler (dir, { hotReload = false } = {}) {
   const entry = {}
   const defaultEntries = hotReload ? ['webpack/hot/only-dev-server'] : []
   for (const p of pages) {
-    entry[join('_bundles', p)] = defaultEntries.concat(['./' + p])
+    entry[join('bundles', p)] = defaultEntries.concat(['./' + p])
   }
 
-  const errEntry = join('_bundles', 'pages', '_error.js')
+  const errorEntry = join('bundles', 'pages', '_error.js')
   const defaultErrorPath = resolve(__dirname, '..', '..', 'pages', '_error.js')
-  if (!entry[errEntry]) entry[errEntry] = defaultErrorPath
+  if (!entry[errorEntry]) entry[errorEntry] = defaultErrorPath
 
   const nodeModulesDir = resolve(__dirname, '..', '..', '..', 'node_modules')
 
@@ -42,7 +42,7 @@ export default async function createCompiler (dir, { hotReload = false } = {}) {
     ],
     exclude: /node_modules/,
     query: {
-      name: '[path][name].[ext]'
+      name: 'dist/[path][name].[ext]'
     }
   }, {
     test: /\.js$/,
@@ -118,7 +118,7 @@ export default async function createCompiler (dir, { hotReload = false } = {}) {
     },
     customInterpolateName: function (url, name, opts) {
       if (defaultErrorPath === this.resourcePath) {
-        return 'pages/_error.js'
+        return 'dist/pages/_error.js'
       }
       return url
     }

server/render.js

@@ -16,11 +16,11 @@ export async function render (url, ctx = {}, {
   staticMarkup = false
 } = {}) {
   const path = getPath(url)
-  const mod = await requireModule(resolve(dir, '.next', 'pages', path))
+  const mod = await requireModule(resolve(dir, '.next', 'dist', 'pages', path))
   const Component = mod.default || mod
 
   const props = await (Component.getInitialProps ? Component.getInitialProps(ctx) : {})
-  const component = await read(resolve(dir, '.next', '_bundles', 'pages', path))
+  const component = await read(resolve(dir, '.next', 'bundles', 'pages', path))
 
   const { html, css } = StyleSheetServer.renderStatic(() => {
     const app = createElement(App, {
@@ -53,7 +53,7 @@ export async function render (url, ctx = {}, {
 
 export async function renderJSON (url, { dir = process.cwd() } = {}) {
   const path = getPath(url)
-  const component = await read(resolve(dir, '.next', '_bundles', 'pages', path))
+  const component = await read(resolve(dir, '.next', 'bundles', 'pages', path))
   return { component }
 }