2019-10-04 18:11:39 +02:00
import AmpHtmlValidator from 'amphtml-validator'
import fs from 'fs'
import { IncomingMessage , ServerResponse } from 'http'
2019-08-20 19:38:30 +02:00
import { join , relative } from 'path'
2019-10-04 18:11:39 +02:00
import React from 'react'
import { UrlWithParsedQuery } from 'url'
2019-09-16 23:06:30 +02:00
import { promisify } from 'util'
2019-10-04 18:11:39 +02:00
import Watchpack from 'watchpack'
2019-03-19 00:21:18 +01:00
import { ampValidation } from '../build/output/index'
2019-04-09 17:52:03 +02:00
import * as Log from '../build/output/log'
2019-10-04 18:11:39 +02:00
import { PUBLIC_DIR_MIDDLEWARE_CONFLICT } from '../lib/constants'
import { findPagesDir } from '../lib/find-pages-dir'
2019-05-09 04:51:23 +02:00
import { verifyTypeScriptSetup } from '../lib/verifyTypeScriptSetup'
2019-10-04 18:11:39 +02:00
import { PHASE_DEVELOPMENT_SERVER } from '../next-server/lib/constants'
2019-05-31 11:27:56 +02:00
import {
getRouteMatcher ,
getRouteRegex ,
2019-06-20 20:41:02 +02:00
getSortedRoutes ,
2019-10-04 18:11:39 +02:00
isDynamicRoute ,
2019-09-04 16:00:54 +02:00
} from '../next-server/lib/router/utils'
2019-10-04 18:11:39 +02:00
import Server , { ServerConstructor } from '../next-server/server/next-server'
2019-09-16 23:06:30 +02:00
import { normalizePagePath } from '../next-server/server/normalize-page-path'
2019-10-04 18:11:39 +02:00
import { route } from '../next-server/server/router'
2019-10-10 19:18:07 +02:00
import { eventVersion } from '../telemetry/events'
import { Telemetry } from '../telemetry/storage'
2019-10-04 18:11:39 +02:00
import ErrorDebug from './error-debug'
import HotReloader from './hot-reloader'
import { findPageFile } from './lib/find-page-file'
2019-04-04 23:47:17 +02:00
if ( typeof React . Suspense === 'undefined' ) {
2019-05-27 20:20:33 +02:00
throw new Error (
` The version of React you are using is lower than the minimum required version needed for Next.js. Please upgrade "react" and "react-dom": "npm install --save react react-dom" https://err.sh/zeit/next.js/invalid-react-version `
)
2019-04-04 23:47:17 +02:00
}
2019-09-16 23:06:30 +02:00
const fsStat = promisify ( fs . stat )
2018-09-28 14:05:23 +02:00
export default class DevServer extends Server {
2019-10-04 18:11:39 +02:00
private devReady : Promise < void >
private setDevReady? : Function
private webpackWatcher? : Watchpack | null
private hotReloader? : HotReloader
constructor ( options : ServerConstructor ) {
2019-09-24 10:50:04 +02:00
super ( { . . . options , dev : true } )
2018-09-28 14:05:23 +02:00
this . renderOpts . dev = true
2019-10-04 18:11:39 +02:00
; ( this . renderOpts as any ) . ErrorDebug = ErrorDebug
Improve dev experience by listening faster (#5902)
As I detailed in [this thread on Spectrum](https://spectrum.chat/?t=3df7b1fb-7331-4ca4-af35-d9a8b1cacb2c), the dev experience would be a lot nicer if the server started listening as soon as possible, before the slow initialization steps. That way, instead of manually polling the dev URL until the server's up (this can take a long time!), I can open it right away and the responses will be delivered when the dev server is done initializing.
This makes a few changes to the dev server:
* Move `HotReloader` creation to `prepare`. Ideally, more things (from the non-dev `Server`) would be moved to a later point as well, because creating `next({ ... })` is quite slow.
* In `run`, wait for a promise to resolve before doing anything. This promise automatically gets resolved whenever `prepare` finishes successfully.
And the `next dev` and `next start` scripts:
* Since we want to log that the server is ready/listening before the intensive build process kicks off, we return the app instance from `startServer` and the scripts call `app.prepare()`.
This should all be backwards compatible, including with all existing custom server recommendations that essentially say `app.prepare().then(listen)`. But now, we could make an even better recommendation: start listening right away, then call `app.prepare()` in the `listen` callback. Users would be free to make that change and get better DX.
Try it and I doubt you'll want to go back to the old way. :)
2018-12-17 12:09:44 +01:00
this . devReady = new Promise ( resolve = > {
this . setDevReady = resolve
} )
2019-10-04 18:11:39 +02:00
; ( this . renderOpts as any ) . ampValidator = (
html : string ,
pathname : string
) = > {
2019-04-11 20:59:26 +02:00
return AmpHtmlValidator . getInstance ( ) . then ( validator = > {
const result = validator . validateString ( html )
ampValidation (
pathname ,
result . errors
. filter ( e = > e . severity === 'ERROR' )
. filter ( e = > this . _filterAmpDevelopmentScript ( html , e ) ) ,
result . errors . filter ( e = > e . severity !== 'ERROR' )
)
} )
}
2019-10-06 13:57:41 +02:00
if ( fs . existsSync ( join ( this . dir , 'static' ) ) ) {
console . warn (
` The static directory has been deprecated in favor of the public directory. https://err.sh/zeit/next.js/static-dir-deprecated `
)
}
2019-09-24 17:15:14 +02:00
this . pagesDir = findPagesDir ( this . dir )
2018-09-28 14:05:23 +02:00
}
2019-10-04 18:11:39 +02:00
protected currentPhase() {
2018-09-28 14:05:23 +02:00
return PHASE_DEVELOPMENT_SERVER
}
2019-10-04 18:11:39 +02:00
protected readBuildId() {
2018-09-28 14:05:23 +02:00
return 'development'
}
2019-10-04 18:11:39 +02:00
async addExportPathMapRoutes() {
2018-10-01 16:31:47 +02:00
// Makes `next export` exportPathMap work in development mode.
// So that the user doesn't have to define a custom server reading the exportPathMap
if ( this . nextConfig . exportPathMap ) {
console . log ( 'Defining routes from exportPathMap' )
2019-05-27 20:20:33 +02:00
const exportPathMap = await this . nextConfig . exportPathMap (
{ } ,
{
dev : true ,
dir : this.dir ,
outDir : null ,
distDir : this.distDir ,
2019-10-04 18:11:39 +02:00
buildId : this.buildId ,
2019-05-27 20:20:33 +02:00
}
) // In development we can't give a default path mapping
2018-10-01 16:31:47 +02:00
for ( const path in exportPathMap ) {
2019-02-19 22:45:07 +01:00
const { page , query = { } } = exportPathMap [ path ]
2018-10-01 16:31:47 +02:00
// We use unshift so that we're sure the routes is defined before Next's default routes
this . router . add ( {
match : route ( path ) ,
fn : async ( req , res , params , parsedUrl ) = > {
const { query : urlQuery } = parsedUrl
Object . keys ( urlQuery )
. filter ( key = > query [ key ] === undefined )
2019-05-27 20:20:33 +02:00
. forEach ( key = >
console . warn (
2019-06-30 00:13:23 +02:00
` Url ' ${ path } ' defines a query parameter ' ${ key } ' that is missing in exportPathMap `
2019-05-27 20:20:33 +02:00
)
)
2018-10-01 16:31:47 +02:00
2019-02-19 22:45:07 +01:00
const mergedQuery = { . . . urlQuery , . . . query }
2018-10-01 16:31:47 +02:00
await this . render ( req , res , page , mergedQuery , parsedUrl )
2019-10-04 18:11:39 +02:00
} ,
2018-10-01 16:31:47 +02:00
} )
}
}
}
2019-10-04 18:11:39 +02:00
async startWatcher() {
2019-06-25 16:28:48 +02:00
if ( this . webpackWatcher ) {
2019-05-27 20:20:33 +02:00
return
}
2019-07-10 17:45:53 +02:00
let resolved = false
2019-05-27 20:20:33 +02:00
return new Promise ( resolve = > {
2019-09-24 17:15:14 +02:00
const pagesDir = this . pagesDir
2019-05-27 20:20:33 +02:00
2019-07-10 17:45:53 +02:00
// Watchpack doesn't emit an event for an empty directory
2019-10-04 18:11:39 +02:00
fs . readdir ( pagesDir ! , ( _ , files ) = > {
2019-07-10 17:45:53 +02:00
if ( files && files . length ) {
return
}
if ( ! resolved ) {
resolve ( )
resolved = true
}
} )
2019-05-27 20:20:33 +02:00
let wp = ( this . webpackWatcher = new Watchpack ( ) )
2019-10-04 18:11:39 +02:00
wp . watch ( [ ] , [ pagesDir ! ] , 0 )
2019-05-27 20:20:33 +02:00
wp . on ( 'aggregated' , ( ) = > {
2019-05-30 22:42:45 +02:00
const dynamicRoutedPages = [ ]
2019-05-27 20:20:33 +02:00
const knownFiles = wp . getTimeInfoEntries ( )
for ( const [ fileName , { accuracy } ] of knownFiles ) {
if ( accuracy === undefined ) {
continue
}
2019-10-04 18:11:39 +02:00
let pageName =
'/' + relative ( pagesDir ! , fileName ) . replace ( /\\+/g , '/' )
2019-05-27 20:20:33 +02:00
2019-08-20 19:38:30 +02:00
pageName = pageName . replace (
new RegExp ( ` \\ .+(?: ${ this . nextConfig . pageExtensions . join ( '|' ) } ) $ ` ) ,
''
)
2019-05-27 20:20:33 +02:00
2019-06-21 00:27:04 +02:00
pageName = pageName . replace ( /\/index$/ , '' ) || '/'
if ( ! isDynamicRoute ( pageName ) ) {
continue
}
2019-05-30 22:42:45 +02:00
dynamicRoutedPages . push ( pageName )
2019-05-27 20:20:33 +02:00
}
2019-05-30 22:42:45 +02:00
this . dynamicRoutes = getSortedRoutes ( dynamicRoutedPages ) . map ( page = > ( {
page ,
2019-10-04 18:11:39 +02:00
match : getRouteMatcher ( getRouteRegex ( page ) ) ,
2019-05-30 22:42:45 +02:00
} ) )
2019-07-10 17:45:53 +02:00
if ( ! resolved ) {
resolve ( )
resolved = true
}
2019-05-27 20:20:33 +02:00
} )
} )
}
2019-10-04 18:11:39 +02:00
async stopWatcher() {
2019-05-27 20:20:33 +02:00
if ( ! this . webpackWatcher ) {
return
}
this . webpackWatcher . close ( )
this . webpackWatcher = null
}
2019-10-04 18:11:39 +02:00
async prepare() {
await verifyTypeScriptSetup ( this . dir , this . pagesDir ! )
2019-05-09 04:51:23 +02:00
2019-05-27 20:20:33 +02:00
this . hotReloader = new HotReloader ( this . dir , {
2019-10-04 18:11:39 +02:00
pagesDir : this.pagesDir ! ,
2019-05-27 20:20:33 +02:00
config : this.nextConfig ,
2019-10-04 18:11:39 +02:00
buildId : this.buildId ,
2019-05-27 20:20:33 +02:00
} )
2018-09-28 14:05:23 +02:00
await super . prepare ( )
2018-10-01 16:31:47 +02:00
await this . addExportPathMapRoutes ( )
2018-09-28 14:32:26 +02:00
await this . hotReloader . start ( )
2019-05-27 20:20:33 +02:00
await this . startWatcher ( )
2019-10-04 18:11:39 +02:00
this . setDevReady ! ( )
2019-08-29 18:43:06 +02:00
2019-10-10 19:18:07 +02:00
const telemetry = new Telemetry ( { distDir : this.distDir } )
2019-10-23 04:42:16 +02:00
telemetry . record (
eventVersion ( {
cliCommand : 'dev' ,
isSrcDir : relative ( this . dir , this . pagesDir ! ) . startsWith ( 'src' ) ,
} )
)
2018-09-28 14:05:23 +02:00
}
2019-10-04 18:11:39 +02:00
protected async close() {
2019-05-27 20:20:33 +02:00
await this . stopWatcher ( )
Improve dev experience by listening faster (#5902)
As I detailed in [this thread on Spectrum](https://spectrum.chat/?t=3df7b1fb-7331-4ca4-af35-d9a8b1cacb2c), the dev experience would be a lot nicer if the server started listening as soon as possible, before the slow initialization steps. That way, instead of manually polling the dev URL until the server's up (this can take a long time!), I can open it right away and the responses will be delivered when the dev server is done initializing.
This makes a few changes to the dev server:
* Move `HotReloader` creation to `prepare`. Ideally, more things (from the non-dev `Server`) would be moved to a later point as well, because creating `next({ ... })` is quite slow.
* In `run`, wait for a promise to resolve before doing anything. This promise automatically gets resolved whenever `prepare` finishes successfully.
And the `next dev` and `next start` scripts:
* Since we want to log that the server is ready/listening before the intensive build process kicks off, we return the app instance from `startServer` and the scripts call `app.prepare()`.
This should all be backwards compatible, including with all existing custom server recommendations that essentially say `app.prepare().then(listen)`. But now, we could make an even better recommendation: start listening right away, then call `app.prepare()` in the `listen` callback. Users would be free to make that change and get better DX.
Try it and I doubt you'll want to go back to the old way. :)
2018-12-17 12:09:44 +01:00
if ( this . hotReloader ) {
await this . hotReloader . stop ( )
}
2018-09-28 14:05:23 +02:00
}
2019-10-04 18:11:39 +02:00
async run (
req : IncomingMessage ,
res : ServerResponse ,
parsedUrl : UrlWithParsedQuery
) {
Improve dev experience by listening faster (#5902)
As I detailed in [this thread on Spectrum](https://spectrum.chat/?t=3df7b1fb-7331-4ca4-af35-d9a8b1cacb2c), the dev experience would be a lot nicer if the server started listening as soon as possible, before the slow initialization steps. That way, instead of manually polling the dev URL until the server's up (this can take a long time!), I can open it right away and the responses will be delivered when the dev server is done initializing.
This makes a few changes to the dev server:
* Move `HotReloader` creation to `prepare`. Ideally, more things (from the non-dev `Server`) would be moved to a later point as well, because creating `next({ ... })` is quite slow.
* In `run`, wait for a promise to resolve before doing anything. This promise automatically gets resolved whenever `prepare` finishes successfully.
And the `next dev` and `next start` scripts:
* Since we want to log that the server is ready/listening before the intensive build process kicks off, we return the app instance from `startServer` and the scripts call `app.prepare()`.
This should all be backwards compatible, including with all existing custom server recommendations that essentially say `app.prepare().then(listen)`. But now, we could make an even better recommendation: start listening right away, then call `app.prepare()` in the `listen` callback. Users would be free to make that change and get better DX.
Try it and I doubt you'll want to go back to the old way. :)
2018-12-17 12:09:44 +01:00
await this . devReady
2019-09-16 23:06:30 +02:00
const { pathname } = parsedUrl
2019-10-04 18:11:39 +02:00
if ( pathname ! . startsWith ( '/_next' ) ) {
2019-09-16 23:06:30 +02:00
try {
await fsStat ( join ( this . publicDir , '_next' ) )
throw new Error ( PUBLIC_DIR_MIDDLEWARE_CONFLICT )
} catch ( err ) { }
}
// check for a public file, throwing error if there's a
// conflicting page
2019-10-06 13:44:03 +02:00
if ( await this . hasPublicFile ( pathname ! ) ) {
const pageFile = await findPageFile (
this . pagesDir ! ,
normalizePagePath ( pathname ! ) ,
this . nextConfig . pageExtensions
)
if ( pageFile ) {
const err = new Error (
` A conflicting public file and page file was found for path ${ pathname } https://err.sh/zeit/next.js/conflicting-public-file-page `
2019-09-16 23:06:30 +02:00
)
2019-10-06 13:44:03 +02:00
res . statusCode = 500
return this . renderError ( err , req , res , pathname ! , { } )
2019-09-16 23:06:30 +02:00
}
2019-10-06 13:44:03 +02:00
return this . servePublic ( req , res , pathname ! )
2019-09-16 23:06:30 +02:00
}
2019-10-04 18:11:39 +02:00
const { finished } = ( await this . hotReloader ! . run ( req , res , parsedUrl ) ) || {
finished : false ,
}
2018-09-28 14:32:26 +02:00
if ( finished ) {
return
2018-09-28 14:05:23 +02:00
}
return super . run ( req , res , parsedUrl )
}
2019-10-04 18:11:39 +02:00
generateRoutes() {
2018-10-01 16:31:47 +02:00
const routes = super . generateRoutes ( )
2018-09-28 14:05:23 +02:00
// In development we expose all compiled files for react-error-overlay's line show feature
// We use unshift so that we're sure the routes is defined before Next's default routes
routes . unshift ( {
2018-10-01 16:31:47 +02:00
match : route ( '/_next/development/:path*' ) ,
2018-09-28 14:05:23 +02:00
fn : async ( req , res , params ) = > {
const p = join ( this . distDir , . . . ( params . path || [ ] ) )
await this . serveStatic ( req , res , p )
2019-10-04 18:11:39 +02:00
} ,
2018-09-28 14:05:23 +02:00
} )
return routes
}
2019-05-03 18:57:47 +02:00
// In development public files are not added to the router but handled as a fallback instead
2019-10-04 18:11:39 +02:00
protected generatePublicRoutes() {
2019-05-03 18:57:47 +02:00
return [ ]
}
2019-05-27 20:20:33 +02:00
// In development dynamic routes cannot be known ahead of time
2019-10-04 18:11:39 +02:00
protected getDynamicRoutes() {
2019-05-27 20:20:33 +02:00
return [ ]
}
2019-10-04 18:11:39 +02:00
_filterAmpDevelopmentScript (
html : string ,
event : { line : number ; col : number ; code : string }
) {
2019-03-19 00:21:18 +01:00
if ( event . code !== 'DISALLOWED_SCRIPT_TAG' ) {
return true
}
const snippetChunks = html . split ( '\n' )
let snippet
if (
! ( snippet = html . split ( '\n' ) [ event . line - 1 ] ) ||
! ( snippet = snippet . substring ( event . col ) )
) {
return true
}
snippet = snippet + snippetChunks . slice ( event . line ) . join ( '\n' )
snippet = snippet . substring ( 0 , snippet . indexOf ( '</script>' ) )
return ! snippet . includes ( 'data-amp-development-mode-only' )
}
2019-05-11 13:18:56 +02:00
/ * *
* Check if resolver function is build or request new build for this function
* @param { string } pathname
* /
2019-10-04 18:11:39 +02:00
protected async resolveApiRequest ( pathname : string ) : Promise < string | null > {
2019-05-11 13:18:56 +02:00
try {
2019-10-04 18:11:39 +02:00
await this . hotReloader ! . ensurePage ( pathname )
2019-05-11 13:18:56 +02:00
} catch ( err ) {
// API route dosn't exist => return 404
if ( err . code === 'ENOENT' ) {
return null
}
}
const resolvedPath = await super . resolveApiRequest ( pathname )
return resolvedPath
}
2019-10-04 18:11:39 +02:00
async renderToHTML (
req : IncomingMessage ,
res : ServerResponse ,
pathname : string ,
query : { [ key : string ] : string } ,
options = { }
) {
2018-09-28 14:05:23 +02:00
const compilationErr = await this . getCompilationError ( pathname )
if ( compilationErr ) {
res . statusCode = 500
return this . renderErrorToHTML ( compilationErr , req , res , pathname , query )
}
2018-11-03 01:24:43 +01:00
// In dev mode we use on demand entries to compile the page before rendering
try {
2019-10-04 18:11:39 +02:00
await this . hotReloader ! . ensurePage ( pathname ) . catch ( async ( err : Error ) = > {
if ( ( err as any ) . code !== 'ENOENT' ) {
2019-09-16 23:06:30 +02:00
throw err
2019-05-27 20:20:33 +02:00
}
2019-10-04 18:11:39 +02:00
for ( const dynamicRoute of this . dynamicRoutes || [ ] ) {
2019-05-27 20:20:33 +02:00
const params = dynamicRoute . match ( pathname )
if ( ! params ) {
continue
}
2019-10-04 18:11:39 +02:00
return this . hotReloader ! . ensurePage ( dynamicRoute . page ) . then ( ( ) = > {
2019-05-27 20:20:33 +02:00
pathname = dynamicRoute . page
query = Object . assign ( { } , query , params )
} )
}
2019-09-16 23:06:30 +02:00
throw err
2019-05-27 20:20:33 +02:00
} )
2018-11-03 01:24:43 +01:00
} catch ( err ) {
if ( err . code === 'ENOENT' ) {
2019-09-16 23:06:30 +02:00
res . statusCode = 404
return this . renderErrorToHTML ( null , req , res , pathname , query )
2018-11-03 01:24:43 +01:00
}
if ( ! this . quiet ) console . error ( err )
}
2019-03-19 00:21:18 +01:00
const html = await super . renderToHTML ( req , res , pathname , query , options )
return html
2018-09-28 14:05:23 +02:00
}
2019-10-04 18:11:39 +02:00
async renderErrorToHTML (
err : Error | null ,
req : IncomingMessage ,
res : ServerResponse ,
pathname : string ,
query : { [ key : string ] : string }
) {
await this . hotReloader ! . ensurePage ( '/_error' )
2019-02-03 15:34:28 +01:00
2018-09-28 14:05:23 +02:00
const compilationErr = await this . getCompilationError ( pathname )
if ( compilationErr ) {
res . statusCode = 500
return super . renderErrorToHTML ( compilationErr , req , res , pathname , query )
}
2019-03-13 19:39:05 +01:00
if ( ! err && res . statusCode === 500 ) {
2019-03-19 00:21:18 +01:00
err = new Error (
'An undefined error was thrown sometime during render... ' +
'See https://err.sh/zeit/next.js/threw-undefined'
2019-03-13 21:08:06 +01:00
)
2019-03-13 19:39:05 +01:00
}
2018-09-28 14:05:23 +02:00
try {
const out = await super . renderErrorToHTML ( err , req , res , pathname , query )
return out
} catch ( err2 ) {
2019-04-09 17:52:03 +02:00
if ( ! this . quiet ) Log . error ( err2 )
2018-09-28 14:05:23 +02:00
res . statusCode = 500
return super . renderErrorToHTML ( err2 , req , res , pathname , query )
}
}
2019-10-04 18:11:39 +02:00
sendHTML ( req : IncomingMessage , res : ServerResponse , html : string ) {
2018-12-09 22:46:45 +01:00
// In dev, we should not cache pages for any reason.
res . setHeader ( 'Cache-Control' , 'no-store, must-revalidate' )
return super . sendHTML ( req , res , html )
}
2019-10-04 18:11:39 +02:00
protected setImmutableAssetCacheControl ( res : ServerResponse ) {
2018-09-28 14:05:23 +02:00
res . setHeader ( 'Cache-Control' , 'no-store, must-revalidate' )
}
2019-10-04 18:11:39 +02:00
servePublic ( req : IncomingMessage , res : ServerResponse , path : string ) {
2019-05-03 18:57:47 +02:00
const p = join ( this . publicDir , path )
return this . serveStatic ( req , res , p )
}
2019-10-04 18:11:39 +02:00
async hasPublicFile ( path : string ) {
2019-09-16 23:06:30 +02:00
try {
const info = await fsStat ( join ( this . publicDir , path ) )
return info . isFile ( )
} catch ( _ ) {
return false
}
}
2019-10-04 18:11:39 +02:00
async getCompilationError ( page : string ) {
const errors = await this . hotReloader ! . getCompilationErrors ( page )
2018-09-28 14:05:23 +02:00
if ( errors . length === 0 ) return
// Return the very first error we found.
return errors [ 0 ]
}
}