Customise ng serve to proxy calls to /api?

Question

I created a new application with ng CLI, works like a charm: ng new babysteps cd babysteps ng serve ng serve uses webpack to assemble the app. To fully test it, I need to serve /api... from my API mock server (specifically the POST requests). How can I customise the web server used, to redirect that one URL pattern?

The Webpack dev server has a proxy setting, but it seems (?) ng serve doesn't have a config file (or I didn't get).

Do I need to create a webpack.config.js or create/edit some other file to proxy ?

Answer 1

You can indeed setup a proxy to backend with the angular cli, with the --proxy-config flag.

Here is more or less a copy-paste from the documentation:

Say we have a server running on http://localhost:3000/api and we want all calls to http://localhost:4200/api to go to that server.

We create a file next to projects package.json called proxy.conf.json with the content

{
    "/api":
    {
        "target": "http://localhost:3000",
        "secure": false
    } 
}

[...]

and then we edit the package.json file's start script to be

"start": "ng serve --proxy-config proxy.conf.json"

and run it with npm start