Support arbitrary dev commands alongside static server

[ascorbic]

Is your feature request related to a problem? Please describe.

Some frameworks don't use a dev server, but do have a command to watch source files and compile them to static files and/or functions. These watch commands can't be specified as the dev command because they don't open a port, and because specifying a command disables the static server.

Describe the solution you'd like

A way to specify a non-server dev command in toml and framework-info that would run as a long-running process alongside the static and functions servers. This could be a simple as making this the behaviour if no target port has been specified.

Describe alternatives you've considered

Telling users to run the watch command in a separate terminal to the ntl dev command. Using npm-run-all or equivalent.

Additional context
This is inspired by Remix, which needs this.

Can you submit a pull request?

Yes

Pull requests are welcome! If you would like to help us add this feature, please check our
contributions guidelines.

[erezrokah]

cc @lukasholzer, we just talked about it yesterday in the context of #410.

This is a valid use case we can support.

@ascorbic can you share a framework that needs this support?
Would we want to make this behavior default for this frameworks or only custom via the CLI.

If some frameworks needs this as a default, we would need to make the port configuration in framework-info optional and have the CLI not wait on the port if it's not configured.

If it shouldn't be the default, we can make the change only in the CLI to allow specifying a command without a port.

[ascorbic]

@erezrokah The imemdiate example is Remix. They don't have public docs for this, but should do after they launch on Monday. They currently don't have a default buiild command, and generate this toml:

[build]
  functions = "netlify/functions"
  publish = "public"
  command = "npm run build"

[dev]
  functions = "netlify/functions"
  publish = "public"
  port = 3000

[[redirects]]
  from = "/*"
  to = "/.netlify/functions/server"
  status = 200

[[headers]]
  for = "/build/*"
  [headers.values]
    "Cache-Control" = "public, max-age=31536000, s-maxage=31536000"

The instructions currently say this:

Remix on Netlify README

Development

You will be running two processes during development when using Netlify as your server.

• Your Netlify server in one
• The Remix development server in another

# in one tab
$ npm run dev:netlify

# in another
$ npm run dev

Open up http://localhost:3000, and you should be ready to go!

If you'd rather run everything in a single tab, you can look at concurrently or similar tools to run both processes in one tab.

[erezrokah]

• The Remix development server in another

Should framework-info have command = npm run dev and port = 3000 in this case?

Then the user will open localhost:8888 and the CLI would redirect relevant requests to localhost:3000

[ascorbic]

The port in this case is the netlify dev port, not the Remix port. They're setting it to 3000 rather than 8888 so it's standard in their docs for all targets. They don't have any open port.

[lukasholzer]

is remix using static file serving?

[ascorbic]

Yes. A root level rewrite, with redirect shadowing for static files

[ascorbic]

This is the output:

➜  my-remix-app ntl dev
◈ Netlify Dev ◈
◈ Injected build settings env var: AWS_LAMBDA_JS_RUNTIME
◈ Ignored general context env var: LANG (defined in process)
◈ No app server detected. Using simple static server
◈ Running static server from "my-remix-app/public"
◈ Loaded function server.
◈ Functions server is listening on 51848

◈ Static server listening to 3999

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   ◈ Server now ready on http://localhost:3000   │
   │                                                 │
   └─────────────────────────────────────────────────┘

◈ Rewrote URL to /.netlify/functions/server

[lukasholzer]

Can you maybe share a stackblitz with web containers where this is set up – I guess it would make it easier to see exactly what you want to achieve – sorry I guess I don't have the full understanding of how it should work until now.

[ascorbic]

It's hard because Remix currently uses a private npm registry with user keys. I'll try and explain how it should work:

Currently when building for Netlify, remix build puts static files in public and also generates a Netlify Function in netlify/functions/server with a root-level rewrite pointing to it. When you run ntl dev it uses the default static server to serve the static files in public, while also rewriting all other requests to point to the function. There is no remix server running at this point. You can additionally run remix watch, which also doesn't run any sort of dev server, but just watches the source files and recompiles them on changes.

The ideal behaviour would be to have ntl dev still run the static server as now, but also to run the remix watch command so that files are recompiled.

[lukasholzer]

Thx now I'm on track :D – very good explanation 💡 Sounds reasonable to me!