Netlify dev not starting at 8888

Support
,
1

Hello netlify fam,

I’m working to migrate functions to netlify vs. another microservice backend, and part of that is getting a netlify dev workflow going.

Unfortunately, I can’t seem to get the netlify dev server up and running.

Node v14.18.1 (so it’s not the node v17 issue)
Netlify-cli up to date (v8.6.0)

I’ve tried manually specifying the framework (CRA), and using -targetPort 3000 but neither have made a difference.

No matter what I do, I don’t get the magic box saying

   │   ◈ Server now ready on http://localhost:8888   │

Output from netlify dev command:

$ netlify dev --debug                                                                                                                                                                                                                                          [10:05:34]

❯ Initial build environment
context: dev
cwd: [redacted]
featureFlags: []
mode: cli
siteId: [redacted]

❯ UI build settings
baseRelDir: true
plugins:
  - inputs: {}
    package: '@sentry/netlify-build-plugin'

❯ Resolved build environment
branch: integrate_get_apl_function
buildDir: [redacted]
configPath: [redacted]/netlify.toml
context: dev
env:
  - REACT_APP_API_URL
  - REACT_APP_CONTACT_EMAIL
  - REACT_APP_[redacted]_URL
  - REACT_APP_[redacted]_PARTNER_ID
  - REACT_APP_[redacted]_UI_CONF_ID
  - REACT_APP_PH_AUTOCAPTURE_ENABLED
  - REACT_APP_PH_SESSION_RECORDING_ENABLED
  - REACT_APP_404_URL
  - REACT_APP_GV_LATEST_TUTORIAL_CODE
  - REACT_APP_GOOGLE_UA_TRACKING_CODE
  - REACT_APP_SENTRY_DSN
  - REACT_APP_SENTRY_ENV_ID
  - SENTRY_AUTH_TOKEN
  - SENTRY_ORG
  - SENTRY_PROJECT
  - SENTRY_ENVIRONMENT
  - REPOSITORY_URL
  - NETLIFY_LOCAL
  - HEAD
  - COMMIT_REF
  - CACHED_COMMIT_REF
  - PULL_REQUEST
  - LANG
  - LANGUAGE
  - LC_ALL
  - GATSBY_TELEMETRY_DISABLED
  - NEXT_TELEMETRY_DISABLED

❯ Resolved config
build:
  base: [redacted]
  command: yarn build
  commandOrigin: config
  environment:
    - REACT_APP_API_URL
    - REACT_APP_CONTACT_EMAIL
    - REACT_APP_[redacted]_URL
    - REACT_APP_[redacted]_PARTNER_ID
    - REACT_APP_[redacted]_UI_CONF_ID
    - REACT_APP_PH_AUTOCAPTURE_ENABLED
    - REACT_APP_PH_SESSION_RECORDING_ENABLED
    - REACT_APP_404_URL
    - REACT_APP_GV_LATEST_TUTORIAL_CODE
    - REACT_APP_GOOGLE_UA_TRACKING_CODE
    - REACT_APP_SENTRY_DSN
    - REACT_APP_SENTRY_ENV_ID
    - SENTRY_AUTH_TOKEN
    - SENTRY_ORG
    - SENTRY_PROJECT
    - SENTRY_ENVIRONMENT
  publish: [redacted]
  publishOrigin: config
functions:
  '*':
    included_files:
      - libraries/**
functionsDirectory: [redacted]/functions
headers:
  - for: /*
    values:
      Content-Security-Policy: frame-ancestors https://www.facebook.com
      X-Frame-Options: DENY
      X-XSS-Protection: 1; mode=block
      cache-control: max-age=0, no-cache, no-store, must-revalidate
headersOrigin: config
plugins:
  - inputs: {}
    origin: ui
    package: '@sentry/netlify-build-plugin'
redirects:
  - from: /api/*
    status: 200
    to: /.netlify/functions/:splat
  - from: /c/:shortcode
    to: /?play=:shortcode
  - from: /email/:email_code
    to: /?play=:email_code
  - from: /session/:session_code
    to: /?play=:session_code
  - from: /share/:share_code
    to: /?from_shared_link=:share_code
  - from: /lead/:lead_code
    to: /?play=:lead_code
  - from: /*
    to: https://www.goodvibes.news/
redirectsOrigin: config
◈ Netlify Dev ◈
◈ Ignored netlify.toml file env var: REACT_APP_API_URL (defined in .env file)
◈ Injected .env file env var: REACT_APP_API_URL
◈ Ignored netlify.toml file env var: REACT_APP_CONTACT_EMAIL (defined in .env file)
◈ Injected .env file env var: REACT_APP_CONTACT_EMAIL
◈ Ignored netlify.toml file env var: REACT_APP_[redacted]_URL (defined in .env file)
◈ Injected .env file env var: REACT_APP_[redacted]_URL
◈ Ignored netlify.toml file env var: REACT_APP_[redacted]_PARTNER_ID (defined in .env file)
◈ Injected .env file env var: REACT_APP_[redacted]_PARTNER_ID
◈ Ignored netlify.toml file env var: REACT_APP_[redacted]_UI_CONF_ID (defined in .env file)
◈ Injected .env file env var: REACT_APP_[redacted]_UI_CONF_ID
◈ Ignored netlify.toml file env var: REACT_APP_PH_AUTOCAPTURE_ENABLED (defined in .env file)
◈ Injected .env file env var: REACT_APP_PH_AUTOCAPTURE_ENABLED
◈ Ignored netlify.toml file env var: REACT_APP_PH_SESSION_RECORDING_ENABLED (defined in .env file)
◈ Injected .env file env var: REACT_APP_PH_SESSION_RECORDING_ENABLED
◈ Ignored netlify.toml file env var: REACT_APP_404_URL (defined in .env file)
◈ Injected .env file env var: REACT_APP_404_URL
◈ Ignored netlify.toml file env var: REACT_APP_GV_LATEST_TUTORIAL_CODE (defined in .env file)
◈ Injected .env file env var: REACT_APP_GV_LATEST_TUTORIAL_CODE
◈ Ignored netlify.toml file env var: REACT_APP_GOOGLE_UA_TRACKING_CODE (defined in .env file)
◈ Injected .env file env var: REACT_APP_GOOGLE_UA_TRACKING_CODE
◈ Ignored netlify.toml file env var: REACT_APP_SENTRY_DSN (defined in .env file)
◈ Injected .env file env var: REACT_APP_SENTRY_DSN
◈ Ignored netlify.toml file env var: REACT_APP_SENTRY_ENV_ID (defined in .env file)
◈ Injected .env file env var: REACT_APP_SENTRY_ENV_ID
◈ Injected netlify.toml file env var: SENTRY_AUTH_TOKEN
◈ Injected netlify.toml file env var: SENTRY_ORG
◈ Injected netlify.toml file env var: SENTRY_PROJECT
◈ Injected netlify.toml file env var: SENTRY_ENVIRONMENT
◈ Ignored general context env var: LANG (defined in process)
◈ Injected .env file env var: HTTPS
◈ Injected .env file env var: APPDRAG_APPID
◈ Injected .env file env var: APPDRAG_APIKEY
◈ Injected .env file env var: gv_file
◈ Injected .env file env var: [redacted]_SERVICE_URL
◈ Loaded function charset-test (​http://localhost:8888/.netlify/functions/charset-test​).
◈ Loaded function getEpisodeMoreInfo (​http://localhost:8888/.netlify/functions/getEpisodeMoreInfo​).
◈ Loaded function getVideoFromCode (​http://localhost:8888/.netlify/functions/getVideoFromCode​).
◈ Functions server is listening on 61975
◈ Starting Netlify Dev with Create React App
yarn run v1.22.10
$ react-scripts start
ℹ ｢wds｣: Project is running at https://[redacted-ip-address]
ℹ ｢wds｣: webpack output is served from 
ℹ ｢wds｣: Content not from webpack is served from [redacted]/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...

Compiled successfully!

You can now view [redacted] in the browser.

  Local:            https://localhost:3000
  On Your Network:  https://[redacted]:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

And that’s it… I never get anything else.

Worth noting: hitting localhost:8888 doesn’t do anything, no response.

2

Update:

I’ve identified the issue: CRA is configured to use HTTPS/SSL, but I can’t seem to get netlify dev config’d to do the same, despite following the instructions here:

Update2:

Disabling CRA HTTPS

#.env
HTTPS=false

and configuring netlify.toml as per the documentation:

[dev]
  [dev.https]
    certFile = "ca.pem"
    keyFile = "ca.key"

Now correctly starts up an https server on localhost:8888 when running netlify dev

TL;DR:
Ensure your app is running via HTTP, configure netlify to serve HTTPS, otherwise netlify dev will silently fail.

Notes for netlify:
Would be nice to have some sort of error handling for this if SSL is not in the expected state.

2 Likes