Serve for the client uses a hardcoded port

[koaps]

The client port is hardcoded which makes it not possible to provide an alternative port via the package.json.

Steps to reproduce the behavior:

$ mevn init test
$ cd test
# set a port in package.json for the dev script
$ sed -i 's/dev": "nuxt/dev": "nuxt --port 8080/' client/package.json
$ mevn serve
  __  __ _______     ___   _    ____ _     ___
 |  \/  | ____\ \   / / \ | |  / ___| |   |_ _|
 | |\/| |  _|  \ \ / /|  \| | | |   | |    | |
 | |  | | |___  \ V / | |\  | | |___| |___ | |
 |_|  |_|_____|  \_/  |_| \_|  \____|_____|___|

 Light speed setup for MEVN stack based apps.
? Choose from below client

> [email protected] dev
> nuxt --port 8080 "--port" "3000" "--open"

 WARN  mode option is deprecated. You can safely remove it from nuxt.config                                                                                                                                                         06:05:57

 FATAL  options.port should be >= 0 and < 65536. Received NaN.

Expected behavior:

to be able to specify port and host in the package.json for scripts

$ cd client/
$ npm run dev

> [email protected] dev
> nuxt -H 0.0.0.0 --port 8080

...
ℹ Waiting for file changes                                                                                                                                                                                                          06:21:30
ℹ Memory usage: 200 MB (RSS: 286 MB)                                                                                                                                                                                                06:21:30
ℹ Listening on: http://172.16.16.16:8080/

Modified /usr/lib/node_modules/mevn-cli/lib/commands/serve/launch.js From:

 61             _execa["default"].command("npm run ".concat(cmd, " -- --port ").concat(port, " --open"), {

To:

 61             _execa["default"].command("npm run ".concat(cmd, " --  --open"), {

Now it works as expected:

$ mevn serve
  __  __ _______     ___   _    ____ _     ___
 |  \/  | ____\ \   / / \ | |  / ___| |   |_ _|
 | |\/| |  _|  \ \ / /|  \| | | |   | |    | |
 | |  | | |___  \ V / | |\  | | |___| |___ | |
 |_|  |_|_____|  \_/  |_| \_|  \____|_____|___|

 Light speed setup for MEVN stack based apps.
? Choose from below client

> [email protected] dev
> nuxt -H 0.0.0.0 --port 8080 "--open"


 WARN  mode option is deprecated. You can safely remove it from nuxt.config
 
   ╭──────────────────────────────────────────╮
   │                                          │
   │   Nuxt @ v2.15.4                         │
   │                                          │
   │   ▸ Environment: development             │
   │   ▸ Rendering:   server-side             │
   │   ▸ Target:      server                  │
   │                                          │
   │   Listening: http://172.16.16.16:8080/   │
   │                                          │
   ╰──────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                                                                 06:12:06
ℹ Initial build may take a while                                                                                                                                                                                                    06:12:06
ℹ Discovered Components: .nuxt/components/readme.md                                                                                                                                                                                 06:12:06
✔ Builder initialized                                                                                                                                                                                                               06:12:06
✔ Nuxt files generated                                                                                                                                                                                                              06:12:06

✔ Client
  Compiled successfully in 2.63s

✔ Server
  Compiled successfully in 1.58s

ℹ Waiting for file changes                                                                                                                                                                                                          06:12:09
ℹ Memory usage: 205 MB (RSS: 295 MB)                                                                                                                                                                                                06:12:09
ℹ Listening on: http://172.16.16.16:8080/

[welcome[bot]]

Thanks for opening your first issue here! Be sure to follow the issue template!

[ajomadlabs]

@koaps Would like you to open a PR for this issue

[koaps]

@ajomadlabs sure I can, but I wasn't sure how you would like to handle it.

I'm still new to javascript (I mostly do python) and not that familiar with the other frameworks but if they are running a npm script similar to what Nuxt does, my preference would be to remove any code in launch.js for setting the port and put any port overrides needed in the package.json in the starter-templates.

[ajomadlabs]

@koaps It's not a problem even if you are new to javascript. Would always love to see you open a PR resolving this bug post which I could review on it. I probably think giving the flexibility for the users to override the port is necessity.

[jamesgeorge007]

I'd suggest making the following changes in src/commands/serve/launch.js

diff --git a/src/commands/serve/launch.js b/src/commands/serve/launch.js
index 1bb36b4..0e3940d 100644
--- a/src/commands/serve/launch.js
+++ b/src/commands/serve/launch.js
@@ -14,15 +14,8 @@ import exec from '../../utils/exec';
  */

 export default async (projectConfig, templateDir) => {
-  let port;
   const { template: projectTemplate, isConfigured } = projectConfig;

-  if (templateDir === 'client') {
-    port = projectTemplate === 'Nuxt.js' ? '3000' : '3002';
-  } else {
-    port = projectTemplate === 'GraphQL' ? '9000/graphql' : '9000/api';
-  }
-
   if (!isConfigured[templateDir]) {
     await exec(
       'npm install',
@@ -39,7 +32,8 @@ export default async (projectConfig, templateDir) => {
   }

   const cmd = projectTemplate === 'Nuxt.js' ? 'dev' : 'serve';
-  execa.command(`npm run ${cmd} -- --port ${port} --open`, {
+  const options = templateDir === 'client' ? ' -- --open' : '';
+  await execa.command(`npm run ${cmd}${options}`, {
     stdio: 'inherit',
     cwd: templateDir,
   });

[koaps]

might want to do the same for the server.

it's a bit easier to override since I could edit server.js or the port env var, but probably better to allow it to be set in package.json.

I was able to override it to port 8008 but the server startup message still says its going to uae 9000.