Svelte should not assume dev server is available

[rendall]

Describe the bug

Adding Svelte to an already existing project causes netlify dev to misbehave. It looks for and fails to find a "framework server" at targetPort 5000.

Without Svelte

netlify dev returns:

◈ Netlify Dev ◈
◈ Ignored general context env var: LANG (defined in process)
◈ Injected .env file env var: ALLOW_ORIGIN
◈ Injected .env file env var: DATABASE_ADMIN_PASSWORD
◈ Injected .env file env var: DATABASE_NAME
◈ Injected .env file env var: DB_CONNECTION_STRING
◈ Injected .env file env var: IS_CROSS_SITE
◈ Injected .env file env var: JWT_SECRET
◈ Injected .env file env var: SIMPLE_COMMENT_API_URL
◈ Injected .env file env var: SIMPLE_COMMENT_MODERATOR_CONTACT_EMAIL
◈ Injected .env file env var: SIMPLE_COMMENT_MODERATOR_ID
◈ Injected .env file env var: SIMPLE_COMMENT_MODERATOR_PASSWORD
◈ No app server detected. Using simple static server
◈ Running static server from "simple-comment/dist"
◈ Loaded function auth.
◈ Loaded function comment.
◈ Loaded function gauth.
◈ Loaded function topic.
◈ Loaded function user.
◈ Loaded function verify.
◈ Functions server is listening on 39073
◈ Setting up local development server

────────────────────────────────────────────────────────────────
  Netlify Build                                                 
────────────────────────────────────────────────────────────────

❯ Version
  @netlify/build 27.20.6

❯ Flags
  {}

❯ Current directory
  /home/rendall/workspace/rendall/simple-comment

❯ Config file
  /home/rendall/workspace/rendall/simple-comment/netlify.toml

❯ Context
  dev

────────────────────────────────────────────────────────────────
  1. Run command for local development                          
────────────────────────────────────────────────────────────────

◈ Static server listening to 3999

(dev.command completed in 4ms)

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

Request from ::ffff:127.0.0.1: GET /.netlify/functions/topic/http-localhost-8888
Response with status 200 in 271 ms.

while the same project with only a svelte dependency gets:

◈ Netlify Dev ◈
◈ Ignored general context env var: LANG (defined in process)
◈ Injected .env file env var: ALLOW_ORIGIN
◈ Injected .env file env var: DATABASE_ADMIN_PASSWORD
◈ Injected .env file env var: DATABASE_NAME
◈ Injected .env file env var: DB_CONNECTION_STRING
◈ Injected .env file env var: IS_CROSS_SITE
◈ Injected .env file env var: JWT_SECRET
◈ Injected .env file env var: SIMPLE_COMMENT_API_URL
◈ Injected .env file env var: SIMPLE_COMMENT_MODERATOR_CONTACT_EMAIL
◈ Injected .env file env var: SIMPLE_COMMENT_MODERATOR_ID
◈ Injected .env file env var: SIMPLE_COMMENT_MODERATOR_PASSWORD
◈ Loaded function auth.
◈ Loaded function comment.
◈ Loaded function gauth.
◈ Loaded function topic.
◈ Loaded function user.
◈ Loaded function verify.
◈ Functions server is listening on 35189
◈ Setting up local development server

────────────────────────────────────────────────────────────────
  Netlify Build                                                 
────────────────────────────────────────────────────────────────

❯ Version
  @netlify/build 27.20.6

❯ Flags
  {}

❯ Current directory
  /home/rendall/workspace/rendall/simple-comment

❯ Config file
  /home/rendall/workspace/rendall/simple-comment/netlify.toml

❯ Context
  dev

────────────────────────────────────────────────────────────────
  1. Run command for local development                          
────────────────────────────────────────────────────────────────

◈ Starting Netlify Dev with Svelte
$ rimraf ./functions && rimraf ./dist/js && mkdir ./dist/js
$ yarn run build:backend && yarn run build:frontend
⠹ Waiting for framework port 5000. This can be configured using the 'targetPort' property in the netlify.toml◈ Removed function auth.
◈ Removed function comment.
◈ Removed function gauth.
◈ Removed function topic.
◈ Removed function user.
◈ Removed function verify.
$ yarn run build:netlify
$ webpack --config ./webpack.netlify.functions.js
asset auth.js 2.77 MiB [emitted] (name: auth)
asset gauth.js 2.77 MiB [emitted] (name: gauth)
asset topic.js 2.77 MiB [emitted] (name: topic)
asset verify.js 2.77 MiB [emitted] (name: verify)
asset user.js 2.77 MiB [emitted] (name: user)
asset comment.js 2.76 MiB [emitted] (name: comment)
orphan modules 102 KiB [orphan] 63 modules
runtime modules 8.24 KiB 36 modules
modules by path ./node_modules/ 2.16 MiB 524 modules
modules by path ./src/ 90.4 KiB
  modules by path ./src/functions/*.ts 19.8 KiB
    ./src/functions/auth.ts 3.99 KiB [built] [code generated]
    ./src/functions/comment.ts 2.82 KiB [built] [code generated]
    + 4 modules
  modules by path ./src/lib/*.ts 69.3 KiB
    ./src/lib/MongodbService.ts 48.9 KiB [built] [code generated]
    ./src/lib/utilities.ts 15.6 KiB [built] [code generated]
    ./src/lib/messages.ts 2.63 KiB [built] [code generated]
    + 2 modules
  ./src/policy.ts 1.26 KiB [built] [code generated]
+ 21 modules

... some warnings removed ...

8 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.75.0 compiled with 8 warnings in 8064 ms
$ webpack
asset hello.js 217 KiB [emitted] (name: hello)
asset all-comments.js 111 KiB [emitted] (name: all-comments)
asset simple-comment.js 102 KiB [emitted] (name: simple-comment)
runtime modules 1.96 KiB 9 modules
cacheable modules 117 KiB
  modules by path ./src/dist/js/*.ts 40.4 KiB
    ./src/dist/js/simple-comment.ts 1.39 KiB [built] [code generated]
    ./src/dist/js/all-comments.ts 4.54 KiB [built] [code generated]
    ./src/dist/js/ui.ts 25.8 KiB [built] [code generated]
    ./src/dist/js/apiClient.ts 8.67 KiB [built] [code generated]
  ./src/dist/hello.svelte 625 bytes [built] [code generated]
  ./node_modules/svelte/internal/index.mjs 75.9 KiB [built] [code generated]
webpack 5.75.0 compiled successfully in 4798 ms
⠋ Waiting for framework port 5000. This can be configured using the 'targetPort' property in the netlify.toml◈ "yarn build" exited with code 0. Shutting down Netlify Dev server
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Configuration

  System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Memory: 9.77 GB / 15.48 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - ~/workspace/rendall/simple-comment/node_modules/.bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm

and netlify -v gets us:

netlify-cli/11.8.3 linux-x64 node-v18.12.1

Pull requests

https://github.com/rendall/simple-comment/pull/72/files

No PRs (yet), but this link shows the diff between the working without-svelte branch and the not-working with-svelte branch. As is clear, the only real addition is svelte. yarn build does output svelte. The only issue here is that the netlify-cli frontend server does not start and then exits.

[ascorbic]

Thanks for the report. I think the issue here is that we are incorrectly assuming that Svelte will always use a dev server. We will fix that, but in the meantime you can work around it by adding the following to a netlify.toml:

[dev]
framework="#static"

...which will stop it making assumptions about your dev server. If you want, you could also add command = "yarn watch"

[rendall]

Thanks for the workaround (and also for the title change 🙈)!

[rendall]

This workaround worked as expected, serving the separately-built svelte frontend.

💯 🆗 👌🏻 🙏🏻

Thank you!