Overriding webpack-dev-server settings on the new frontend-base

Development
1

I’m trying to follow along with the recent workshop - Composable Frontends: A Tutorial (Open edX frontend-base) from YT. I’m trying to work in a multipass VM so want to override some of the webpack dev server settings.

I saw some instructions for frontend-build that looked promising, and it looked like I could just plop a webpack.config.dev.js at the root of my new app and it would work. It definitely gets picked up - I can’t work out what to put in there though! If I try and use the same (commonjs I guess?) syntax from the frontend-build example it complains about [webpack-cli] SyntaxError: Unexpected token 'export' and if I try and use an ESM import then it says [webpack-cli] TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts".

Any suggestions most appreciated!

2

@arbrandes :slight_smile:

3

I admit this feature hasn’t been properly tested since the port to frontend-base, so I’m not particularly surprised it’s failing. I also haven’t had time to debug it, yet. (And probably won’t until after the Ulmo cut from master.)

What I can tell you now is that when I do start debugging this, I’ll start looking at what the default webpack/webpack.config.dev.js ends up looking like. It is currently compiled by tsc from tools/config/webpack/webpack.config.dev.ts into tools/dist/webpack/webpack.config.dev.js (which is what ends up getting used) with some interesting incantations at the top. Such as:

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });

You could try to replicate these on you plain js version, but ideally one would also be able to use a Typescript version that gets compiled similarly. I’ll try to get this working, at some point.

1 Like
4

Thanks @arbrandes ! On the small chance anyone else wants to do something similar before something more long-term gets done:

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
  return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });

const fb = __importDefault(require('@openedx/frontend-base/config'));
const config = fb.getBaseConfig('webpack-dev');

config.default["devServer"]["host"] = 'apps.local.other.domain';
config.default["devServer"]["port"] = 8880;
config.default["devServer"]["proxy"][0]["target"] = 'http://local.other.domain:8900';
exports.default = config.default;

Seems to work fine!

1 Like