Trouble setting up netlify dev with vite and npm monorepos

Support
, ,
1

I’m trying to set up an npm monorepo for a large project that is logical to be broken down into its own packages:

📂 packages/
  package.json
  📂 webapp/
    vite.config.js
    netlify.toml
  📂 mobile-app/
    vite.config.js
    netlify.toml
  📂 design-system/
    ..

Now, I have installed vite as a root dependency inside the top-level folder. As you can see, all the individual packages have their own vite.config.js to configure vite on a per-package basis. Inside the packages’ package.json I have a start script that kicks off ntl dev. From the root folder I can start those scripts inside their package context by running npm start -w webapp or npm start -w mobile-app(where webapp/mobile-app is the context in which the script should run, as per npm’s documentation)

// package.json
scripts: {
  start: "ntl dev"
}

// netlify.toml
[dev]
  framework = "vite"
  autoLaunch = false

For some reason vite keeps serving the content from only one package. For example when I run npm start -w X and npm start -w Y, and I have two connections running on http://localhost:8888 and http://localhost:8889, both locations will serve up the content from package X. I would expect the former to serve X and the latter to serve Y.

I’ve tried changing the values for root, base and publicDir inside the vite config files, without luck.

I realize this might not necessarily be caused by netlify’s dev, just hoping to get this figured out.

2

Hi @mdings

To the best of my knowledge, passing arguments to npm start doesn’t pass them through to ntl dev. If you are not running ntl dev inside the project directory, you can specify the directory to serve with --dir <path>. See ntl dev --help or Netlify CLI dev command.

This is not (generally) necessary as Netlify CLI automatically tries to detect the framework: GitHub - netlify/framework-info: Framework detection utility

If you are to deploying from a monorepo the documentation states

Although it’s possible to declare dependencies at the root, we recommend a setup where you define all dependencies at a more specific, subdirectory level.

3

Hi @coelmay

My subdirectories inside the packages folder have the start script that runs ntl dev inside that subdirectory. That way it is connected from the root path and should allow to set the context for netlify development inside a monorepo. Also I found that netlify dev did not pick up on the framework I was using :thinking:

4

To confirm, are both of your Vite apps running on different ports? Netlify CLI will simply proxy requests that you make to its port (:8888) to the port your app’s server is running on. By default, Vite 3 runs on 5173. If both your apps would try to run on the same port, this is expected behaviour.

If they’re running on different ports, try configuring the targetPort value in [dev].

5

Right. So Netlify started on different ports but proxied them to the same default vite port. In order to make this work, I have to explicitly define a port in side the vite config file (inside the individual packages) and then tell Netlify dev to proxy to that port

// vite.config.js
{
  server: {
    port: 5174
  }
}

# netlify.toml
[dev]
  targetPort = 5174
6

Btw, shoutout to the support reps and Netlify community :raised_hands:
One of the reasons to post here is the quality of responses and the response times overall! Big thank you.

2 Likes
7

Thanks for the kind words, @mdings :raised_hands: I have shared this with our Support team.

I just want to double check-- it looks like you have marked Hrishikesh’s answer as a solution. Are you looking for any further information? Let us know if you have any lingering questions.

1 Like
8

No this is solved. I just put some more info in my own reply below the answer to elaborate on how I’ve got this configured now on my end.