Hi, I’m new to Netlify and Web Dev in general so please bear with me… I was just following along the Netlify Official Guide shown in; [Intro to Serverless Functions | Netlify] (Intro to Serverless Functions | Netlify), starting from the provided GitHub repo (GitHub - netlify/explorers-up-and-running-with-serverless-functions: Free resource for learning how to use serverless functions!), to try to set up my first test website locally using Netlify CLI.
I’m running on Windows 11 64-bit OS, and installed;
- netlify-cli v17.37.1 win32-x64
- nvm-windows v1.1.12
- node.js v23.1.0 (64-bit) & npm v10.9.0 (all installed using nvm-windows)
- MS Edge Browser Version 130.0.2849.68 (Official build) (64-bit)
Following the instructions, I’ve created the site correctly and deployed to Netlify;
- My Netlify Production Site Link: [Jamstack Explorers - Up and Running with Serverless Functions] (https://netlify-serverless-function-demo.netlify.app/)
The production site is working as expected on the browser over the internet. However, I’m stuck with trying to set up my local “netlify dev” server mimicing this website on my local windows machine, below is the terminal output from running “netlify dev” (I’ve already completed “netlify init” successfully);
PS C:\Users\~\netlify-serverless-functions-demo> netlify dev
(node:43628) ExperimentalWarning: CommonJS module C:\Users\~\AppData\Roaming\nvm\v23.1.0\node_modules\netlify-cli\node_modules\debug\src\node.js is loading ES Module C:\Users\~\AppData\Roaming\nvm\v23.1.0\node_modules\netlify-cli\node_modules\supports-color\index.js using require().
Support for loading ES Module in require() is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
◈ Netlify Dev ◈
◈ Injecting environment variable values for all scopes
◈ Ignored general context env var: LANG (defined in process)
◈ No app server detected. Using simple static server
◈ Running static server from "netlify-serverless-functions-demo\public"
◈ Setting up local development server
Cleaned up .netlify\functions-internal.
◈ Static server listening to 3999
◈ Loaded function hello-world
┌─────────────────────────────────────────────────┐
│ │
│ ◈ Server now ready on http://localhost:8888 │
│ │
└─────────────────────────────────────────────────┘
(node:43628) [DEP0060] DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead.
And this immediately launches “http://localhost:8888” on my MS Edge Browser, and while I expected to see the “index.html” page with the button as shown on my Production Site, all I could see on the browser page was “Could not proxy request.”, as shown on the screenshot below;
But what’s weird is that the “http://localhost:8888/.netlify/functions/hello-world” functions endpoint worked correctly on the browser, and returned the expected function response in the JSON String format. (I want to show you but apparently I can’t attach more than 1 media for this post sorry)
It’s just the “index.html” page that my Browser is refusing to show me… So I think that maybe my website is actually up and running on the local 8888 port, but some weird proxy mechanism is preventing me from being able to see just the “index.html” page correctly on the browser…
I’ve tried various suggestions I could find online such as;
- Turning off all of my Windows Proxy Settings (I never really used Proxy Settings on my machine at all)
- Delete MS Edge Browser Domain Security Policies for the “localhost” domain
- Allow Insecure Content for the “localhost:8888” url in MS Edge Browser Options
- Try “127.0.0.1:8888” instead of “localhost:8888”
- Restart the Browser & Machine & Rerun “netlify dev”
But I still keep seeing “Could not proxy request.” when I visit “localhost:8888” on my MS Edge Browser.
Below is my “public\index.html” content;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Jamstack Explorers - Up and Running with Serverless Functions</title>
</head>
<body>
<h1>Up and Running with Serverless Functions</h1>
<button id="fetch-btn">Fetch</button>
<p id="response-output">Response Placeholder</p>
<script>
document.addEventListener('DOMContentLoaded', () => {
const fetchBtn = document.getElementById('fetch-btn')
const responseText = document.getElementById('response-output')
fetchBtn.addEventListener('click', async () => {
const response = await fetch('/.netlify/functions/hello-world')
.then(response => response.json()
)
responseText.innerText = response
})
})
</script>
</body>
</html>
And my “netlify\functions\hello-world.js” content;
export const handler = async () => {
return {
statusCode: 200,
body: JSON.stringify({
message: 'Hello World!',
}),
}
}
and my “netlify.toml” file content is simply;
[build]
command = "# no build command"
functions = "netlify/functions"
publish = "public"
I did also try adding to my “netlify.toml” file below;
[functions]
node_bundler = "esbuild"
But the issue still persisted. So I removed it, because this demo site so far is just a simple static site that doesn’t require any external Node Packages (yet), I deemed the part about “esbuild” irrelevant to my current project content. I also do not yet have a “package.json” file created in my local project directory, and I don’t think I need it yet, because the Netlify Guide is able to get the same Site up and running on Port 8888 on the Browser just fine after simply running “netlify dev” from terminal.
Could anyone please guide me in terms of what the error message “Could not proxy request.” means, when I spin up a local site on port 8888 using “netlify dev”, and how I could fix it, so I’ll start seeing the “index.html” page content correctly when I visit “localhost:8888/” on my browser?
Many thanks in advance