Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Serve for the client uses a hardcoded port #220

Open
koaps opened this issue May 7, 2021 · 6 comments
Open

Serve for the client uses a hardcoded port #220

koaps opened this issue May 7, 2021 · 6 comments
Assignees
Labels
bug Something isn't working

Comments

@koaps
Copy link

koaps commented May 7, 2021

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/
@koaps koaps added the bug Something isn't working label May 7, 2021
@welcome
Copy link

welcome bot commented May 7, 2021

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

@ajomadlabs
Copy link
Collaborator

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

@koaps
Copy link
Author

koaps commented May 9, 2021

@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
Copy link
Collaborator

@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
Copy link
Member

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
Copy link
Author

koaps commented May 10, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants