CODEWITHSUNDEEP
angularangular-cliwebpack-dev-serverlite-server
Justin
Justin

Reputation: 720

Angular CLI - ng serve with seperate backend server

I am in the process of converting a custom webpack built angular application to the Angular CLI and everything seems to be working well except I can't figure out how to get ng serve to work. I have about 11 applications within this Angular work-space and the one main app talks to the others, like the login application for example. running ng serve main works fine at first and the application starts but then is immediately redirected to localhost:4200/login to get authenticated but the problem is that my IIS application is running on localhost:9000 and so when it tries to get the login application there is an error Cannot GET /login.

My question is: how can I setup ng serve to work with all of these applications?

All of the source code had been built to the dist folder so /dist/login is ready to be served. I have tried various arguments to the serve command as well as trying to serve from the same port that my IIS server is using but in that case I get EACCES: permission denied errors. I'm not the most experienced with the IIS side of things but if the problem can be resolved in that realm I can get help from a senior dev.

Can this be solved with lite-server?

Really any input will be helpful, I am a little lost on where to even look. Thanks!

Upvotes: 0

Views: 1786

Answers (1)

Justin
Justin

Reputation: 720

After trying lite-server and reading through more documentation, I stumbled upon proxying to a backend server. This configuration option allows you to setup a proxy for any requests going to a backend server on another port and forward them to the correct address.

Simply setup a proxy.conf.json file that tells the webpack-dev-server where to redirect the traffic:

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

Then in your angular.json set the serve options to look for your proxy file:

...
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },
...

The requests for external files will now correctly be routed to your backend server running on port 3000!

Upvotes: 1

Related Questions