Programatically set baseUrl in webpack.config on build

Help Requests
1

Hi,

I’m using aurelia-cli with Webpack and Typescript.

Is there a way to set baseUrl in webpack.config.js based on settings from dev.ts, stage.ts and prod.ts on au build --env ?

Thank you

2

For this purpose, webpack.DefinePlugin can help you https://webpack.js.org/plugins/define-plugin/

Probably it will be something like this:

new webpack.DefinePlugin({
  BASE_URL: JSON.stringify(production ? 'production url' : 'dev url'),
});

and in your code, define it

declare const BASE_URL: string;

// Just use it 
fetch(BASE_URL + '/data')
3

Thank you. Instead of using above, I have just change this line in webpack.config

publicPath: baseUrl,

to

publicPath: production ? '/myapp.web' : '/',
4

I ran into a situation similar to this last week. If you need to supply information from your environment.ts to the webpack configuration, you should update your build.ts (/aurelia_project/tasks/build.ts) to pass the information through via webpackConfig.

In our case, we have special connection strings for our serverside endpoints when debugging locally. Out of the box, only the production flag is passed along.

See below build.ts

const analyze = CLIOptions.hasFlag('analyze');
const buildOptions = new Configuration(project.build.options);
const production = CLIOptions.getEnvironment() === 'prod';
const debug = CLIOptions.getEnvironment() === 'debug';
const server = buildOptions.isApplicable('server');
const extractCss = buildOptions.isApplicable('extractCss');
const coverage = buildOptions.isApplicable('coverage');

const config = webpackConfig({
  debug, production, server, extractCss, coverage, analyze
});

Referenced via webpack.config.js

module.exports = ({ debug, production, server, extractCss, coverage, analyze } = {}) => {

Now I am able to do switches based on the debug boolean.