The dev server now checks if path matches a file (#268)

* The dev server now checks if path matches a file Previously it'd return HTML if the accept header had text/html in it which when a browser requests an unknown file, it always does. This caused trouble when someone developing a site would try to click on a link to a static file and instead of the dev server then returning that file, it'd return an html file. Fixes #255 * Fix some things so can run tests against development server
gatsbyjs · May 4, 2016 · 524a976 · 524a976
1 parent d16c330
commit 524a976
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 14 deletions.
diff --git a/lib/isomorphic/html.js b/lib/isomorphic/html.js
@@ -10,15 +10,15 @@ https://github.com/gatsbyjs/gatsby/blob/master/lib/isomorphic/html.js
 `
 console.info(defaultMessage)
 
-export default function HTML (props) {
+function HTML (props) {
   return (
     <html>
       <head>
         <meta charSet="utf-8" />
         <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
         <meta
           name="viewport"
-          content="width=device-width, initial-scale=1.0 maximum-scale=1.0"
+          content="width=device-width, initial-scale=1.0 maximum-scale=5.0"
         />
       </head>
       <body>
@@ -30,3 +30,5 @@ export default function HTML (props) {
 }
 
 HTML.propTypes = { body: PropTypes.any }
+
+module.exports = HTML
diff --git a/lib/isomorphic/pages/_template.js b/lib/isomorphic/pages/_template.js
@@ -9,8 +9,10 @@ https://github.com/gatsbyjs/gatsby/blob/master/lib/isomorphic/pages/_template.js
 `
 console.info(defaultMessage)
 
-export default function template (props) {
+function template (props) {
   return <div>{props.children}</div>
 }
 
 template.propTypes = { children: PropTypes.any }
+
+module.exports = template
diff --git a/lib/utils/develop.js b/lib/utils/develop.js
@@ -10,6 +10,7 @@ import find from 'lodash/find'
 import webpackRequire from 'webpack-require'
 import WebpackPlugin from 'hapi-webpack-plugin'
 import opn from 'opn'
+import fs from 'fs'
 
 import globPages from './glob-pages'
 import webpackConfig from './webpack.config'
@@ -24,7 +25,12 @@ module.exports = (program) => {
 
     const compiler = webpack(compilerConfig.resolve())
 
-    const HTMLPath = `${directory}/html`
+    let HTMLPath = `${directory}/html`
+    try {
+      fs.lstatSync(HTMLPath)
+    } catch (e) {
+      HTMLPath = '../isomorphic/html'
+    }
 
     const htmlCompilerConfig = webpackConfig(program, directory, 'develop', program.port)
     // Remove react-transform option from Babel as redbox-react doesn't work
@@ -97,20 +103,37 @@ module.exports = (program) => {
       server.ext('onRequest', (request, reply) => {
         const negotiator = new Negotiator(request.raw.req)
 
-        if (negotiator.mediaType() === 'text/html') {
-          request.setUrl(`/html${request.path}`)
+        // Try to map the url path to match an actual path of a file on disk.
+        const parsed = parsePath(request.path)
+        const page = find(pages, (p) => p.path === (`${parsed.dirname}/`))
+
+        let absolutePath = `${directory}/pages`
+        let path
+        if (page) {
+          path = `/${parsePath(page.requirePath).dirname}/${parsed.basename}`
+          absolutePath += `/${parsePath(page.requirePath).dirname}/${parsed.basename}`
+        } else {
+          path = request.path
+          absolutePath += request.path
+        }
+        let isFile = false
+        try {
+          isFile = fs.lstatSync(absolutePath).isFile()
+        } catch (e) {
+          // Ignore.
+        }
+
+        // If the path matches a file, return that.
+        if (isFile) {
+          request.setUrl(path)
           reply.continue()
+        // Let people load the bundle.js directly.
         } else if (request.path === '/bundle.js') {
           reply.continue()
+        } else if (negotiator.mediaType() === 'text/html') {
+          request.setUrl(`/html${request.path}`)
+          reply.continue()
         } else {
-          // Rewrite path to match disk path.
-          const parsed = parsePath(request.path)
-          const page = find(pages, (p) => p.path === (`${parsed.dirname}/`))
-
-          if (page) {
-            request.setUrl(`/${parsePath(page.requirePath).dirname}/${parsed.basename}`)
-          }
-
           reply.continue()
         }
       })

diff --git a/package.json b/package.json
@@ -82,6 +82,7 @@
   },
   "devDependencies": {
     "ava": "^0.14.0",
+    "ava-http": "^0.2.1",
     "babel-cli": "^6.7.5",
     "babel-eslint": "^6.0.2",
     "babel-register": "^6.7.2",