Issues in `netlify dev` with my Nuxt app

[ackzell]

Netlify site name: buzondevoz.netlify.app

12:23 $ nuxt -v
@nuxt/cli v2.12.2

12:23 $ netlify -v
netlify-cli/2.48.0 darwin-x64 node-v12.16.2

Hello,

Just getting started with netlify dev, I think it is an excellent tool but I need to make it work for me

Right now this is what I get if I run it in a nuxt app:

After $ netlify dev:

◈ Netlify Dev ◈
◈ Overriding the following env variables with .env file: BASE_URL,DB_URL,DB_NAME,DB_COLLECTION
◈ Starting Netlify Dev with nuxt
◈ Function builder netlify-lambda detected: Running npm script deploy
 ›   Warning: ◈ This is a beta feature, please give us feedback on how to improve at https://github.com/netlify/cli/

Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    clean-install, clean-install-test, completion, config,
    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
    edit, explore, fund, get, help, help-search, hook, i, init,
    install, install-ci-test, install-test, it, link, list, ln,
    login, logout, ls, org, outdated, owner, pack, ping, prefix,
    profile, prune, publish, rb, rebuild, repo, restart, root,
    run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

npm <command> -h  quick help on <command>
npm -l            display full usage info
npm help <term>   search for help on <term>
npm help npm      involved overview

Specify configs in the ini-formatted file:
    /Users/amartinez/.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

npm@6.14.4 /Users/amartinez/.nvm/versions/node/v12.16.2/lib/node_modules/npm

So I went ahead and added a [dev] section in my .toml file:

netlify.toml:

[build]
  functions = "lambda"
  command = "npm run deploy"

[dev]
  framework = "nuxt" 

To what the CLI says:

12:32 $ netlify dev
◈ Netlify Dev ◈
◈ Overriding the following env variables with .env file: BASE_URL,DB_URL,DB_NAME,DB_COLLECTION
Error: Unsupported value provided for "framework" option in config
    at module.exports.serverSettings (~/.nvm/versions/node/v12.16.2/lib/node_modules/netlify-cli/src/utils/detect-server.js:59:30)
    at DevCommand.run (~/.nvm/versions/node/v12.16.2/lib/node_modules/netlify-cli/src/commands/dev/index.js:413:26)
    at DevCommand._run (~/.nvm/versions/node/v12.16.2/lib/node_modules/netlify-cli/node_modules/@oclif/command/lib/command.js:42:31)
    at async Config.runCommand (~/.nvm/versions/node/v12.16.2/lib/node_modules/netlify-cli/node_modules/@oclif/config/lib/config.js:172:9)
    at async Main.run (~/.nvm/versions/node/v12.16.2/lib/node_modules/netlify-cli/node_modules/@oclif/command/lib/main.js:21:9)
    at async Main._run (~/.nvm/versions/node/v12.16.2/lib/node_modules/netlify-cli/node_modules/@oclif/command/lib/command.js:42:20)

It is until I add a command in the .toml file that it runs:

netlify.toml

[build]
  functions = "lambda"
  command = "npm run deploy"

[dev]
  command = "npm run dev"

package.json

"dev": "nuxt",

It now renders the following on http://localhost:3000

I think it is reloading the application “fine” if I only edit text, but somehow all my JS functionality and CSS are gone. (Using Vuetify FWIW)

If I run the project “standalone” (with $ npm run dev) it works fine. I can also deploy both the site as well as the function I wrote without problem. It’s just that I can’t run the environment locally.

So, I am hesitant to tackle this as a Nuxt issue, but willing to take it to that project if netlify dev isn’t at fault here.

Can anyone tell me if I am missing something obvious here?
Or how can I make my site work under netlify dev and be able to test the functions locally without having to build and deploy them every time on the remote.

Thank you in advance!

[jonsully]

The netlify dev framework is under (fast) active development right now and you may be experiencing difficulties that are only a few days old. Two routes to start on that may help you:

• Check out this document for some of the other parameters you can pass in the [dev] block - you may need to explicitly declare which ports need to be wired up for your app to correctly feed the dev server cli/netlify-dev.md at main · netlify/cli · GitHub

• Alternatively, and not the greatest piece of advice here, but try rolling back to netlify-cli 2.46.0. You might have better luck on that release for a myriad of reasons. 2.48.0 is less than a week out and has some bugs

[ackzell]

Thanks for your answer @jonsully!

Let me try that.

I think I tried setting the ports already, but it can’t hurt to document what happens in that case.

I’ll report back

[ackzell]

Not sure how I got to the point where I could notice the components weren’t loading for me.

And to fix that I added

treeShake: true to my vuetify section on the nuxt.config.js file and this made it work.

Same version of the netlify cli and ended up not modifying the ports at all.

[jonsully]

If it works it works!

[twofingerrightclick]

For future readers, as this was the top hit I could find for “ports nuxt” and “netlify dev”: my issue that brought me here was that I couldn’t get the netlify functions to work, as in the netlify dev server would host the functions, but wasn’t setting up the proxy that allows for the nuxt app on port 8888 to access the functions at port 21054, as in this example screenshot where everything looks fine but isn’t working:

Ackzell mentioned not defining ports and so I discovered that it was because I had the server port defined in the nuxt.config.js, If server in nuxt.config.js is defined netlify dev server will not run correctly and functions will not be accessible via the proxy.
I did the following to ensure that the dev server runs correctly locally (I run my app in several environments including Heroku):

  //for heroku
  server: netlify
    ? undefined
    : {
        port: process.env.PORT || 8888,
      },

[hrishikesh]

I believe you could also solve this by setting a custom configuration for netlify dev:

File-based configuration