introduce an optional argument to the develop command to specify which port it should run

generator/src/Main.elm

@@ -10,6 +10,7 @@ import String.Interpolate exposing (interpolate)
 port writeFile :
     { watch : Bool
     , debug : Bool
+    , customPort : Maybe Int
     }
     -> Cmd msg
 
@@ -156,19 +157,28 @@ generateMarkdownPage markdown =
 
 
 type CliOptions
-    = Develop { debugger : Bool }
+    = Develop DevelopOptions
     | Build
 
 
+type alias DevelopOptions =
+    { debugger : Bool
+    , customPort : Maybe Int
+    }
+
+
 application : Program.Config CliOptions
 application =
     Program.config
         |> Program.add
-            (OptionsParser.buildSubCommand "develop"
-                (\debugger ->
-                    Develop { debugger = debugger }
-                )
+            (OptionsParser.buildSubCommand "develop" DevelopOptions
+                |> OptionsParser.withDoc "you can set the port with --port=3200"
                 |> with (Option.flag "debug")
+                |> with
+                    (Option.optionalKeywordArg "port"
+                        |> Option.validateMapIfPresent (String.toInt >> Result.fromMaybe "port needs to be an integer")
+                    )
+                |> OptionsParser.map Develop
             )
         |> Program.add
             (OptionsParser.buildSubCommand "build" Build)
@@ -193,16 +203,17 @@ type alias MarkdownContent =
 init : Flags -> CliOptions -> Cmd Never
 init flags cliOptions =
     let
-        ( watch, debug ) =
+        ( watch, debug, customPort ) =
             case cliOptions of
                 Develop options ->
-                    ( True, options.debugger )
+                    ( True, options.debugger, options.customPort )
 
                 Build ->
-                    ( False, False )
+                    ( False, False, Nothing )
     in
     { watch = watch
     , debug = debug
+    , customPort = customPort
     }
         |> writeFile
 

generator/src/develop.js

@@ -16,7 +16,7 @@ const ClosurePlugin = require("closure-webpack-plugin");
 const readline = require("readline");
 
 module.exports = { start, run };
-function start({ routes, debug, manifestConfig }) {
+function start({ routes, debug, customPort, manifestConfig }) {
   const config = webpackOptions(false, routes, {
     debug,
     manifestConfig
@@ -51,9 +51,9 @@ function start({ routes, debug, manifestConfig }) {
     });
   });
 
-  const port = $.process.PORT || 3000;
+  const port = customPort || process.env.PORT || 3000;
   app.listen(port, () =>
-    console.log("🚀 elm-pages develop on http://localhost:port")
+    console.log(`🚀 elm-pages develop on http://localhost:${port}`)
   );
   // https://stackoverflow.com/questions/43667102/webpack-dev-middleware-and-static-files
   // app.use(express.static(__dirname + "/path-to-static-folder"));

generator/src/elm-pages.js

@@ -102,6 +102,7 @@ function run() {
           develop.start({
             routes,
             debug: contents.debug,
+            customPort: contents.customPort,
             manifestConfig: payload.manifest
           });
         }