Netlify dev hangs with 'Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml' message

Support
,
1

My site works well on netlify but on localhost when I try the netlify dev command, it gives me this message and hangs on me…

Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml

I’ve searched online for solutions and most recommend switching to node16… I’ve tried that and it doesn’t help…

My site is an ‘astro’ site and here’s the package.json if it helps…

{
  "name": "@example/minimal",
  "type": "module",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/tailwind": "^2.1.3",
    "@astrojs/vue": "^1.2.2",
    "@netlify/emails": "^1.0.0",
    "astro": "^1.8.0",
    "dotenv": "^16.0.3",
    "firebase": "^9.15.0",
    "firebase-admin": "^11.4.1",
    "html-entities": "^2.3.3",
    "mongodb": "^4.13.0",
    "sass": "^1.57.1",
    "tailwindcss": "^3.2.4",
    "vue": "^3.2.45"
  }
}

Any advise would be welcome.

Regards,
Alim

2

Hi, can you please share your site Could you provide us the name of the site (for example: example-site.netlify.com) .

I suspect there might be something in your code if it’s doesn’t work locally. Please share your repo so others can debug if possible.

3

@SamO

Thanks for the update…

Here’s the name of the site (https://we-opticians.netlify.app/) … I couldn’t figure out how to debug so I would really appreciate it if you could do this for me…

Thanks in advance… Have a nice day…:-)…

Regards,
Alim

4

Thanks for the update…:-)…

I have managed to figure out what could be causing the issue but I can’t really understand why…

I’ve created a repo with the bare minimum to replicate the issue. I have a fetchPosts function in the ./lib/api.js and when I call it (it’s the only thing I am doing) it recreates this issue…

Here’s the repo on github

Here’s the site on netlify
https://why-does-the-cli-hang.netlify.app/

Any help would be appreciated.

Regards,
Alim

5

@alimbolar I get this error locally:

image
image960×282 64.5 KB

Which is because it relies on these environment variable references in src/lib/api.js:

const API_URL = process.env.VITE_WP_POST_URL;
const BLOG_URL = process.env.VITE_WP_BLOGPOST_URL;

There’s no environment variables supplied in the repo.

Is there something that VITE_WP_POST_URL and VITE_WP_BLOGPOST_URL should be set to, to bypass the fact that API_URL and BLOG_URL are quite simply undefined?

6

Hi @nathanmartin

Thanks for the help…

you could use any random wordpress site and add the wp-json/wp/v2/posts to it to get some data…

Here’s one that you could use…

https://www.rollingstone.com/wp-json/wp/v2/posts

Hope this helps… do let me know if you need anything else…

Regards,
Alim

7

@alimbolar You’ve provided one value, but there are two required.

Spell it out for me, let me know what you want me to set for VITE_WP_POST_URL and what you want set for VITE_WP_BLOGPOST_URL.

You’re requesting others to help you, make it easy for them please.

8

they are both similar… both were apis to access Wordpress data… one of them was for a post and the other a custom post… so you can use the same link for both… I couldn’t share the original urls as the data was from a client’s site… but like I said the data is very similar… it’s from wordpress…

9

Hi @nathanmartin

Sorry to have made it difficult for you with the confusion…

after your message I thought I’d make it easier for the others so I simplified the code in the /lib/api.js

// const dotenv = require("dotenv");
import dotenv from "dotenv";
dotenv.config();

const API_URL = process.env.VITE_WP_POST_URL;
const BLOG_URL = process.env.VITE_WP_BLOGPOST_URL;

export const fetchPosts = async function () {
  const url = API_URL;
  const res = await fetch(url);
  const data = await res.json();
  return data;

};

export const fetchBlogPosts = async function () {
  const res = await fetch(BLOG_URL);
  const posts = await res.json();

  return posts;
};

and it seems to be working fine… so I assume, it’s something the code earlier which was causing the issue… however the issue is it works fine on netlify… but just not fine on the localhost…

Anyways I’ll test again …

Regards
Alim

10

I understand that the issue you’re experiencing is only with netlify dev, I’ve only been trying to also run the minimum replication provided locally to see if I also encounter it.

Changing the values to:

const API_URL = 'https://www.rollingstone.com/wp-json/wp/v2/posts'
const BLOG_URL = 'https://www.rollingstone.com/wp-json/wp/v2/posts'

Does not work, as the response that is returned isn’t an array, and thus doesn’t have a filter method.

The response from running your code with the sample url you provided is:

{
  code: 'rest_no_route',
  message: 'No route was found matching the URL and request method.',
  data: { status: 404 }
}

The subsequent error is:

error   data.filter is not a function
11

is there an option where I could send you the routes in the URL in a private message?

I realised there’s an ongoing loop when I am trying to debug… but I can’t seem to figure out why or how… I’d appreciate someone else looking at it … it would be easier to spot the bug…

12

You should be able to click on my avatar, and then the Message button.

send-message
send-message1107×367 80.2 KB

13

@nathanmartin

I’ve sent you the content for the .env file

Please do check and let me know… here’s something I found out which I found weird…

The for loop in the api.js is basically collection 10 posts at a time from the URL in data and then populating the posts array…

When I run npm run dev it works fine… it loops as many times as expected… but when I run netlify dev the loop doesn’t stop… you can check this my using console.log inside the loop …

And with the never ending loop, it looks like the netlify dev can’t go ahead… let me know if you had the same experience…

Regards,
Alim

14

by the way the totalPages variable = 1 is just for development as otherwise I use the other option on production is makes the totalPage go to 51…;-)… as there are more than 500 posts…

15

@alimbolar I received the values that you private messaged and have confirmed they work.
I’ve also confirmed the same issue that you describe, where it gets stuck waiting for port 3000.

I’m not precisely sure why it’s occurring as I’ve never used netlify dev myself, but after consulting the documentation here:

I’ve found that it doesn’t get stuck when there is a netlify.toml file in the root containing:

[dev]
  command = "astro dev"
  targetPort = 3000
2 Likes
16

you are a lifesaver @nathanmartin !!!

That worked!!..;-)… thanks…:-)…