Dev: Add "framework" option

docs/netlify-dev.md

@@ -121,7 +121,7 @@ Netlify Dev is meant to work with zero config for the majority of users, by usin
 
 ## Project detection
 
-Netlify Dev will attempt to detect the SSG or build command that you are using, and run these on your behalf, while adding other development utilities. If you have a JavaScript project, it looks for the best `package.json` script to run for you, using simple heuristics, so you can use the full flexibility of npm scripts. We may add more intelligence to this in future.
+Netlify Dev will attempt to detect the SSG or build command that you are using, and run these on your behalf, while adding other development utilities. If you have a JavaScript project, it looks for the best `package.json` script to run for you, using simple heuristics, so you can use the full flexibility of npm scripts. We may add more intelligence to this in the future.
 
 **Overriding the detectors**: The number of [project types which Netlify Dev can detect](https://github.com/netlify/cli/tree/master/src/detectors) is growing, but if yours is not yet supported (contributions welcome!), you can instruct Netlify Dev to run the project on your behalf by declaring it in a `[dev]` block of your `netlify.toml` file.
 
@@ -134,6 +134,19 @@ Netlify Dev will attempt to detect the SSG or build command that you are using,
   publish = "dist" # If you use a _redirect file, provide the path to your static content folder
 ```
 
+
+Or you if your project is being detected incorrectly or positive by multiple
+detectors you can specify `framework` option to test only one detector
+against your project. 
+```toml
+[dev]
+  framework = "create-react-app" # or "#static" to force a static server
+``` 
+ The `framework` option should be one of the available
+[project types which Netlify Dev can detect](https://github.com/netlify/cli/tree/master/src/detectors)
+or `#auto` (default) to test all available detectors or `#staic` for a static
+file server.
+
 ## Explanation of ports in Netlify Dev
 
 There will be a number of ports that you will encounter when using Netlify Dev, especially when running a static site generator like Gatsby which has its own dev server. All the port numbers can be a bit confusing, so here is a brief explainer.

src/commands/dev/index.js

@@ -8,7 +8,6 @@ const child_process = require('child_process')
 const http = require('http')
 const httpProxy = require('http-proxy')
 const waitPort = require('wait-port')
-const getPort = require('get-port')
 const stripAnsiCc = require('strip-ansi-control-characters')
 const which = require('which')
 const chokidar = require('chokidar')
@@ -202,7 +201,7 @@ async function startProxy(settings, addonUrls, configPath, projectDir, functions
         functionsServer,
         functionsPort: settings.functionsPort,
         jwtRolePath: settings.jwtRolePath,
-        serverType: settings.type,
+        framework: settings.framework,
       }
 
       if (match) return serveRedirect(req, res, proxy, match, options)
@@ -288,7 +287,7 @@ async function serveRedirect(req, res, proxy, match, options) {
     return render404(options.publicFolder)
   }
 
-  if (match.force || ((!(await isStatic(reqUrl.pathname, options.publicFolder)) || options.serverType) && match.status !== 404)) {
+  if (match.force || ((!(await isStatic(reqUrl.pathname, options.publicFolder)) || options.framework) && match.status !== 404)) {
     const dest = new url.URL(match.to, `${reqUrl.protocol}//${reqUrl.host}`)
     if (isRedirect(match)) {
       res.writeHead(match.status, {
@@ -314,7 +313,7 @@ async function serveRedirect(req, res, proxy, match, options) {
     const destURL = dest.pathname + (urlParams.toString() && '?' + urlParams.toString())
 
     let status
-    if (isInternal(destURL) || !options.serverType) {
+    if (isInternal(destURL) || !options.framework) {
       req.url = destURL
       status = match.status
       console.log(`${NETLIFYDEVLOG} Rewrote URL to `, req.url)
@@ -354,15 +353,14 @@ async function startDevServer(settings, log) {
     return
   }
 
-  log(`${NETLIFYDEVLOG} Starting Netlify Dev with ${settings.type}`)
-  const args = settings.command === 'npm' ? ['run', ...settings.args] : settings.args
+  log(`${NETLIFYDEVLOG} Starting Netlify Dev with ${settings.framework || 'custom config'}`)
   const commandBin = await which(settings.command).catch(err => {
     if (err.code === 'ENOENT') {
       throw new Error(`"${settings.command}" could not be found in your PATH. Please make sure that "${settings.command}" is installed and available in your PATH`)
     }
     throw err
   })
-  const ps = child_process.spawn(commandBin, args, {
+  const ps = child_process.spawn(commandBin, settings.args, {
     env: { ...settings.env, FORCE_COLOR: 'true' },
     stdio: 'pipe',
   })
@@ -392,9 +390,9 @@ class DevCommand extends Command {
     this.log(`${NETLIFYDEV}`)
     let { flags } = this.parse(DevCommand)
     const { api, site, config } = this.netlify
-    config.dev = config.dev || {}
-    const devConfig = { ...config.dev, ...flags }
-    const functionsDir = devConfig.functions || (config.build && config.build.functions)
+    config.dev = { ...config.dev }
+    config.build = { ...config.build }
+    const devConfig = { framework: '#auto', ...(config.build.functions && { functions: config.build.functions }), ...config.dev, ...flags }
     let addonUrls = {}
 
     let accessToken = api.accessToken
@@ -412,57 +410,13 @@ class DevCommand extends Command {
       Object.entries(vars).forEach(([key, val]) => process.env[key] = val)
     }
 
-    let settings = await serverSettings(devConfig)
-
-    if (flags.dir || !(settings && settings.command)) {
-      let dist
-      if (flags.dir) {
-        this.log(`${NETLIFYDEVWARN} Using simple static server because --dir flag was specified`)
-        dist = flags.dir
-      } else {
-        this.log(`${NETLIFYDEVWARN} No dev server detected, using simple static server`)
-      }
-      if (!dist) {
-        this.log(`${NETLIFYDEVLOG} Using current working directory`)
-        this.log(`${NETLIFYDEVWARN} Unable to determine public folder to serve files from.`)
-        this.log(
-            `${NETLIFYDEVWARN} Setup a netlify.toml file with a [dev] section to specify your dev server settings.`
-        )
-        this.log(
-            `${NETLIFYDEVWARN} See docs at: https://github.com/netlify/cli/blob/master/docs/netlify-dev.md#project-detection`
-        )
-        this.log(`${NETLIFYDEVWARN} Using current working directory for now...`)
-        dist = process.cwd()
-      }
-      settings = {
-        env: { ...process.env },
-        noCmd: true,
-        port: 8888,
-        proxyPort: await getPort({ port: 3999 }),
-        dist,
-      }
-    }
-
-    // Flags have highest priority, then configuration file (netlify.toml etc.) then detectors
-    settings = {
-      ...settings,
-      jwtRolePath: devConfig.jwtRolePath || settings.jwtRolePath || 'app_metadata.authorization.roles',
-      port: devConfig.port || settings.port,
-      proxyPort: devConfig.targetPort || settings.proxyPort,
-      functionsPort: await getPort({ port: settings.functionsPort || 34567 }),
-    }
-
-    const port = await getPort({ port: settings.port })
-    if (port !== settings.port && devConfig.port) {
-      throw new Error(`Could not acquire required "port": ${settings.port}`)
-    }
-    settings.port = port
+    let settings = await serverSettings(devConfig, flags, this.log)
 
     await startDevServer(settings, this.log)
 
     // serve functions from zip-it-and-ship-it
     // env variables relies on `url`, careful moving this code
-    if (functionsDir) {
+    if (settings.functions) {
       const functionBuilder = await detectFunctionsBuilder(settings)
       if (functionBuilder) {
         this.log(
@@ -480,10 +434,7 @@ class DevCommand extends Command {
         functionWatcher.on('unlink', functionBuilder.build)
       }
 
-      const functionsServer = await serveFunctions({
-        ...settings,
-        functionsDir
-      })
+      const functionsServer = await serveFunctions(settings.functions)
       functionsServer.listen(settings.functionsPort, function(err) {
         if (err) {
           console.error(`${NETLIFYDEVERR} Unable to start lambda server: `, err) // eslint-disable-line no-console
@@ -495,7 +446,7 @@ class DevCommand extends Command {
       })
     }
 
-    let { url } = await startProxy(settings, addonUrls, site.configPath, site.root, functionsDir)
+    let { url } = await startProxy(settings, addonUrls, site.configPath, site.root, settings.functions)
     if (!url) {
       throw new Error('Unable to start proxy server')
     }
@@ -513,7 +464,7 @@ class DevCommand extends Command {
       eventName: 'command',
       payload: {
         command: 'dev',
-        projectType: settings.type || 'custom',
+        projectType: settings.framework || 'custom',
         live: flags.live || false
       }
     })
@@ -577,7 +528,7 @@ DevCommand.flags = {
   live: flags.boolean({
     char: 'l',
     description: 'Start a public live session'
-  })
+  }),
 }
 
 module.exports = DevCommand

src/detectors/README.md

@@ -6,7 +6,7 @@
 
 ```ts
 {
-    type: String, // e.g. gatsby, vue-cli
+    framework: String, // e.g. gatsby, vue-cli
     command: String, // e.g. yarn, npm
     port: Number, // e.g. 8888
     proxyPort: Number, // e.g. 3000
@@ -50,7 +50,7 @@ module.exports = function() {
   // });
 
   return {
-    type: 'gitbook',
+    framework: 'gitbook',
     command: getYarnOrNPMCommand(),
     port: 8888,
     proxyPort: 4000,

src/detectors/angular.js

@@ -20,7 +20,7 @@ module.exports = function() {
   }
 
   return {
-    type: '@angular/cli',
+    framework: '@angular/cli',
     command: getYarnOrNPMCommand(),
     port: 8888,
     proxyPort: 4200,

src/detectors/brunch.js

@@ -13,7 +13,7 @@ module.exports = function() {
   })
 
   return {
-    type: 'brunch',
+    framework: 'brunch',
     command: getYarnOrNPMCommand(),
     port: 8888,
     proxyPort: 3333,

src/detectors/cra.js → src/detectors/create-react-app.js

@@ -22,7 +22,7 @@ module.exports = function() {
   }
 
   return {
-    type: 'create-react-app',
+    framework: 'create-react-app',
     command: getYarnOrNPMCommand(),
     port: 8888, // the port that the Netlify Dev User will use
     proxyPort: 3000, // the port that create-react-app normally outputs

src/detectors/docusaurus.js

@@ -13,7 +13,7 @@ module.exports = function() {
   })
 
   return {
-    type: 'docusaurus',
+    framework: 'docusaurus',
     command: getYarnOrNPMCommand(),
     port: 8888,
     proxyPort: 3000,

src/detectors/eleventy.js

@@ -11,7 +11,7 @@ module.exports = function() {
   ) return false
 
   return {
-    type: 'eleventy',
+    framework: 'eleventy',
     port: 8888,
     proxyPort: 8080,
     env: { ...process.env },

src/detectors/ember.js

@@ -20,7 +20,7 @@ module.exports = function() {
   }
 
   return {
-    type: 'ember-cli',
+    framework: 'ember-cli',
     command: getYarnOrNPMCommand(),
     port: 8888,
     proxyPort: 4200,

src/detectors/expo.js

@@ -21,7 +21,7 @@ module.exports = function() {
     possibleArgsArrs.push(['expo', 'start', '--web'])
   }
   return {
-    type: 'expo',
+    framework: 'expo',
     command: getYarnOrNPMCommand(),
     port: 8888,
     proxyPort: 19006,

src/detectors/gatsby.js

@@ -17,7 +17,7 @@ module.exports = function() {
     possibleArgsArrs.push(['gatsby', 'develop'])
   }
   return {
-    type: 'gatsby',
+    framework: 'gatsby',
     command: getYarnOrNPMCommand(),
     port: 8888,
     proxyPort: 8000,

src/detectors/gridsome.js

@@ -13,7 +13,7 @@ module.exports = function() {
   })
 
   return {
-    type: 'gridsome',
+    framework: 'gridsome',
     command: getYarnOrNPMCommand(),
     port: 8888,
     proxyPort: 8080,

src/detectors/hexo.js

@@ -17,7 +17,7 @@ module.exports = function() {
     possibleArgsArrs.push(['hexo', 'server'])
   }
   return {
-    type: 'hexo',
+    framework: 'hexo',
     command: getYarnOrNPMCommand(),
     port: 8888,
     proxyPort: 4000,

src/detectors/hugo.js

@@ -6,7 +6,7 @@ module.exports = function() {
   }
 
   return {
-    type: 'hugo',
+    framework: 'hugo',
     port: 8888,
     proxyPort: 1313,
     env: { ...process.env },

src/detectors/jekyll.js

@@ -6,7 +6,7 @@ module.exports = function() {
   }
 
   return {
-    type: 'jekyll',
+    framework: 'jekyll',
     port: 8888,
     proxyPort: 4000,
     env: { ...process.env },

src/detectors/middleman.js

@@ -6,7 +6,7 @@ module.exports = function() {
   }
 
   return {
-    type: 'middleman',
+    framework: 'middleman',
     port: 8888,
     proxyPort: 4567,
     env: { ...process.env },

src/detectors/next.js

@@ -17,7 +17,7 @@ module.exports = function() {
     possibleArgsArrs.push(['next'])
   }
   return {
-    type: 'next.js',
+    framework: 'next.js',
     command: getYarnOrNPMCommand(),
     port: 8888,
     proxyPort: 3000,

src/detectors/nuxt.js

@@ -19,7 +19,7 @@ module.exports = function() {
   }
 
   return {
-    type: 'nuxt',
+    framework: 'nuxt',
     command: getYarnOrNPMCommand(),
     port: 8888,
     proxyPort: 3000,

src/detectors/parcel.js

@@ -20,7 +20,7 @@ module.exports = function() {
   }
 
   return {
-    type: 'parcel',
+    framework: 'parcel',
     command: getYarnOrNPMCommand(),
     port: 8888,
     proxyPort: 1234,

src/detectors/phenomic.js

@@ -13,7 +13,7 @@ module.exports = function() {
   })
 
   return {
-    type: 'phenomic',
+    framework: 'phenomic',
     command: getYarnOrNPMCommand(),
     port: 8888,
     proxyPort: 3333,

src/detectors/quasar-v0.17.js

@@ -20,7 +20,7 @@ module.exports = function() {
   }
 
   return {
-    type: 'quasar-cli-v0.17',
+    framework: 'quasar-cli-v0.17',
     command: getYarnOrNPMCommand(),
     port: 8888,
     proxyPort: 8080,

src/detectors/quasar.js

@@ -20,7 +20,7 @@ module.exports = function() {
   }
 
   return {
-    type: 'quasar-cli',
+    framework: 'quasar-cli',
     command: getYarnOrNPMCommand(),
     port: 8888,
     proxyPort: 8081,

src/detectors/react-static.js

@@ -17,7 +17,7 @@ module.exports = function() {
     possibleArgsArrs.push(['react-static', 'start'])
   }
   return {
-    type: 'react-static',
+    framework: 'react-static',
     command: getYarnOrNPMCommand(),
     port: 8888,
     proxyPort: 3000,