I’m in the middle of translating a small react-app to Aurelia and started out with Aurelia 1 and webpack 4.46.0. In webpack.config.js I have the following set-up for webpack’s dev-server:
devServer: {
contentBase: outDir,
// serve index.html for all 404 (required for push-state)
historyApiFallback: true,
hot: hmr || project.platform.hmr,
port: port || project.platform.port,
host: host || project.platform.host,
proxy: {
'/settlement.dashboard.api': {
target: 'http://localhost:5000',
pathRewrite: { '^/settlement.dashboard.api' : '' }
}
},
},
In my base api class one finds the following code:
import { Method } from './../../types/method';
export class ApiServiceBase {
apiRoot = '/settlement.dashboard.api';
protected async getHeader() : Promise<HeadersInit> {
return {
'Content-Type': 'application/json',
pragma: 'no-cache',
'cache-control': 'no-cache'
};
}
protected async verifyResponse(response: Response, method: Method) {
if (!response.ok) {
throw new Error('Request failed: ' + response.status + ' ' + response.statusText + ' ' + response.url);
}
}
protected async get<T>(url: string) : Promise<T> {
const response = await fetch(url, { method: Method.GET, headers: await this.getHeader()});
this.verifyResponse(response, Method.GET);
return await response.json();
}
}
(this is very similar to the base api class from the react project)
So the rewrite rule above says that the segment /settlement.dashboard.api should be replaced by an empty string. So far, so good. The application works like a charm. Feeling adventurous I decided to port the application to Aurelia 2. After a bit of struggle I got mostly everything working, except the proxy rewite rule which for some reason is not honoured.
This is the dev-server part of the new webpack.config.js (webpack 5.75.0):
devServer: {
historyApiFallback: false,
// open: !process.env.CI,
port: 9000,
proxy: {
'/settlement/dashboard/api': {
target: 'http://localhost:5000',
pathRewrite: { '^/settlement.dashboard.api' : '' }
}
},
},
I have turned off historyApiFallback on purpose as I wanted to see any 404s in the web-browser’s devtools view.
The api-class mentioned aboved was initially ported as is from the Aurelia 1 based project, but later changed to use Aurelia 2’s IHttpClient instead of fetch like so:
import { IHttpClient } from '@aurelia/fetch-client';
export class ApiServiceBase {
apiRoot = 'settlement.dashboard.api';
constructor(@IHttpClient private httpClient: IHttpClient) {
httpClient.configure(config => {
config.useStandardConfiguration();
config.withDefaults({
headers: {
'Content-Type': 'application/json',
pragma: 'no-cache',
'cache-control': 'no-cache'
}
});
return config;
});
}
protected async verifyResponse(response: Response) {
if (!response.ok) {
throw new Error('Request failed: ' + response.status + ' ' + response.statusText + ' ' + response.url);
}
}
protected async get<T>(url: string) : Promise<T> {
const response = await this.httpClient.fetch(url);
this.verifyResponse(response);
return await response.json();
}
}
When running npm start one can see that the rewrite rule is recognised by webpack:
> webpack serve
<i> [webpack-dev-server] [HPM] Proxy created: /settlement/dashboard/api -> http://localhost:5000
<i> [webpack-dev-server] [HPM] Proxy rewrite rule created: "^/settlement.dashboard.api" ~> ""
However, when the api class’ get “method” is called, no rewrite takes place and I’m getting 404s due to the fact that the url is incorrect.
So my question is, is there something I need to do on the side of Aurelia 2 or have I forgotten something wrt webpacks’ dev-server configuration? Or is the rewrite problem due to something else?
TIA
–norgie
