Netlify dev with angular always show "Cannot GET /index.html"

Support
1

I just added netlify to my Angular Project with Angular 18. I created a simple function for testing purposes and I created a netlify.toml:

[dev]
command = "npm run start"
functions = './functions'
publish = "./src"
targetPort = 4321
port = 8888

[build]
command = "npm run build"
functions = './functions'
publish = "./dist/<ProjectName>/browser"

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

Running netlify dev starts the server, starts the angular serve process at the port :4321 and opens the browser at localhost:8888. But all I see is Cannot GET /index.html. The functions are working:

import { Config, Context } from '@netlify/functions';

export default async (req: Request, ctx: Context) => {
    console.log('Hello World');

    const data = {
        msg: 'Hello, world',
        geo: ctx.geo,
        url: req.url,
        params: ctx.params,
    };

    return ctx.json(data);
};

export const config: Config = {
    path: '/api/hello',
    method: 'GET',
};

When entering http://localhost:8888/api/hello in the browser, it shows the expected output from the function. Even if I go to http://localhost:4321 the angular app is running and even the function calls are working. Just the netlify dev server is always showing “Cannot GET /index.html”.
What did I forgot?

2

@Braincompiler I may be misinterpreting, but it doesn’t seem like there’s actually any issue here?

You’re seeing that particular message when visiting http://localhost:8888 because nothing is configured to respond to the default request.

If you just go to http://localhost:8888 it’s going to try and do a GET for /index.html by default, and the file doesn’t exist / isn’t being served, and nothing is responding for that path.

Or is the issue just that netlify dev is opening the wrong URL and you want it to open http://localhost:4321?

1 Like
3

I actually expect that netlify dev is serving the frontend (“proxied” from localhost:4321) and functions (as its working correctly), isn’t that the way to use the dev server?

4

I’ve not used netlify dev before, I mistakenly believed it was only starting two servers (one for your app, one for the functions), and that the error was because it was opening the browser to the functions URL which could only serve the /api/hello route.

From a very quick look at the documentation, it does appear that you’re correct though.

targetPort: the port for your application server, framework, or site generator
port: the port for the Netlify Dev server that you will open in the browser

It also says:

If your site generator runs on a specific port, such as port 8000, you need to specify the port when you run netlify dev. Netlify Dev will connect to that port and route requests successfully to the site generator along with the rest of the local Netlify environment.

That pretty clearly indicates it’s supposed to route requests made to the netlify dev URL (specified with port) to your app hosted at targetPort and back.

So if http://localhost:4321/index.html exists
I’d expect to see it when accessing http://localhost:8888

1 Like
5

Yes, thats what I expected too :slight_smile: The hint with http://localhost:4321/index.html was as good as it shows that http://localhost:4321/index.html also leads to the Error “Cannot GET /index.html”. But thats the normal behavior of ng serve so I expect that the netlify dev server can handle that?

6

@Braincompiler Excellent, the hint was intentional, as I suspected that might be the case.

Netlify itself serves the /index.html by default.
I’d personally not be too surprised if netlify dev tried to do the same.

Unfortunately I don’t know enough about netlify dev or ng serve to provide a fix/workaround.

I’d considered a rewrite, but if the angular server wants to serve /, it probably wouldn’t work to do:
/index.html / 200

1 Like
7

Ok, got it. Your hint with the redirect brought me to the idea to remove the [[redirects]] config from the netlify.toml and tada, now its working :partying_face:

Thanks for your help.

8

Oh, there it is in the very first post, I’d completely missed that you had that!

It’s a standard rewrite for SPA’s on Netlify, but would obviously only work if there was an /index.html file.

1 Like