40

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 ?

stwissel
  • 20,110
  • 6
  • 54
  • 101
  • I believe what you are asking for is the proxy configuration. Take a look at [this part of the Angular-CLI documentation](https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md). – alex kucksdorf Feb 14 '17 at 06:39

1 Answers1

86

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

Zulfe
  • 820
  • 7
  • 25
Fredrik Lundin
  • 8,006
  • 1
  • 29
  • 35
  • 1
    or if you are running an express backend and webpack build, concurrently run the backend with watch, and the front end with ng serve... "dev": "concurrently \"ng serve --proxy-config proxy.conf.json\" \"webpack --watch\" \"nodemon dist/server/app.bundle.js\"" – Michael Dausmann Jan 01 '18 at 10:04
  • @@Michael Dausmann@@ Thanx a lot. I'm struggling for the past few days to setup this. Excellent tip. – kaluva Jul 12 '18 at 11:05
  • @MichaelDausmann i've been trying to look at how to watch files with proxy conf. I think you answered what ive been looking for but, however I didnt understand your comment :(. Is there any documentation on this? – Joshua JLIVE Williams Sep 19 '18 at 23:02
  • @JoshuaJLIVEWilliams concurrently (https://www.npmjs.com/package/concurrently)is used to run 2 things at once. the first bit is as per the accepted answer, the second bit is from webpack (https://webpack.js.org/configuration/watch/) – Michael Dausmann Sep 28 '18 at 05:40
  • for apis served from Azure, "changeOrigin":true is needed. See https://github.com/webpack/webpack-dev-server/issues/424#issuecomment-333452471 – Radek Jun 07 '19 at 11:07
  • You can even rewrite the URL if you need to. Just add "pathRewrite": { "^/api": "" } as the third property beneath "secure" and requests to http://localhost:4200/api will be rewriten to http://localhost:3000 (instead of http://localhost:3000/api) @see https://webpack.js.org/configuration/dev-server/#devserverproxy – Humppakäräjät Jul 16 '21 at 18:35