CODEWITHSUNDEEP
angularwebpackwebpack-dev-server
Gustavo Lopes
Gustavo Lopes

Reputation: 4174

Angular Proxy in root level

I have an Angular application and a landing page written in jQuery.

I want to serve the landing page every time the request is on the root of http://mywebsite.com. Anything else, let's say http://mywebsite.com/otherpage, I want to serve the Angular application.

With nginx (production), this is fairly easy.

When developing Angular, we can easily proxy other requests, like /api, with --proxy-config proxy.config.json CLI option.

The problem I'm getting is with the root level.

What am I doing wrong? Can't I proxy the root level?

Angular docs tells us to go to Webpack dev-server docs, but still I couldn't figure out how to do it.

My proxy.config.json is like the following:

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug"
  },
  "/": {
    "index": "",
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug"
  }
}

Upvotes: 9

Views: 1846

Answers (4)

Dan King
Dan King

Reputation: 3580

Update

The solution below worked for me at time of writing, but no longer seems to work with later versions of Webpack/Angular.

@Zygimantas has suggested a solution in the comments below, but unfortunately that doesn't work for me either.

I got this to work as follows:

In angular.json:

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./my-custom-webpack.config.js"
      },

  ...

  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "proxyConfig": "webpack-proxy.conf.js",

  ...

In my-custom-webpack.config.js:

module.exports = {
  ...
  devServer: {
    index: '' // Allows us to proxy the root URL
  }
}

In webpack-proxy.conf.js

const PROXY_CONFIG = [{
  context: [
    '/'
  ],
  target: 'http://proxy-to-url',
  bypass: function(request) {
    // proxy the root URL, plus "/api/*" - otherwise serve using Angular
    return /^\/(api\/.*)?$/.test(request.url) ? null : '/index.html';
  },
  secure: false
}];

module.exports = PROXY_CONFIG;

(Needs @angular-builders/custom-webpack installed: npm i -D @angular-builders/custom-webpack)

Upvotes: 1

MicMro
MicMro

Reputation: 167

It works if you set devServer.index to a falsy value.

https://webpack.js.org/configuration/dev-server/#devserver-proxy

Note that requests to root won't be proxied by default. To enable root proxying, the devServer.index option should be specified as a falsy value:

module.exports = {
    //...
    devServer: {
        index: '', // specify to enable root proxying
        host: '...',
        contentBase: '...',
        proxy: {
        context: () => true,
        target: 'http://localhost:1234'
        }
    }
};

Upvotes: 1

c0l3
c0l3

Reputation: 823

I got a working proxy config which just intercepts the root and not a angular application served with baseHref. You need to use a .js config (https://angular.io/guide/build#proxy-multiple-entries) with an exclusion defined for http-proxy-middleware (https://github.com/chimurai/http-proxy-middleware#context-matching). The config below proxies every request expect when it starts with /otherpage. The angular application should use '/otherpage' as baseHref

const PROXY_CONFIG = [
  {
    context: [
      "/**",
      "!/otherpage**"
    ],
    "target": "http://localhost:3000",
    "secure": false,
  }
];

module.exports = PROXY_CONFIG;

Upvotes: 3

Gustavo Lopes
Gustavo Lopes

Reputation: 4174

It looks like it was a conflict with the root level after all.

Changing to other level, I could make it work.

The documentation is not explanatory on this.

Upvotes: 1

Related Questions