Run authn MFE in local development

Site Operators Tutor Help
1

Hi all,

I’m trying to run the authn MFE in local development mode using tutor. I installed the tutor and tutor-mfe package, cloned the repository, checked out the olive.2 tag and performed the steps:

npm install  # to install NPM packages
tutor config save --interactive  # to create config.yml
tutor dev start --mount=. authn

Everything seems to startup fine:

...
<i> [webpack-dev-server] [HPM] Proxy created: /api/mfe_config/v1  -> http://local.overhang.io:8000
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:1999/
<i> [webpack-dev-server] Content not from webpack is served from '/openedx/app/public' directory
<i> [webpack-dev-server] 404s will fallback to '/authn/index.html'
<i> [webpack-dev-middleware] wait until bundle finished: /authn
<i> [webpack-dev-middleware] wait until bundle finished: /
<i> [webpack-dev-middleware] wait until bundle finished: /authn
asset app.js 33 MiB [emitted] (name: app)
tutor_dev-authn-1  | asset 95ec738c0b7faac5b5c9126794446bbd.svg 342 bytes [emitted] [immutable] [from: node_modules/@edx/frontend-component-cookie-policy-banner/node_modules/@edx/paragon/dist/Avatar/default-avatar.svg]
tutor_dev-authn-1  | asset index.html 324 bytes [emitted]
tutor_dev-authn-1  | 4384 modules
tutor_dev-authn-1  | webpack 5.50.0 compiled successfully in 163784 ms

When trying to access http://local.overhang.io:1999/authn though, I get an error saying:

### Error

getLocale called before configuring i18n. Call configure with messages first.

The entire stack trace in case it matters:

getLocale
  node_modules/@edx/frontend-platform/i18n/lib.js:262:11
 ErrorPage
  node_modules/@edx/frontend-platform/react/ErrorPage.js:97:115
 renderWithHooks
  node_modules/react-dom/cjs/react-dom.development.js:14803:27
 mountIndeterminateComponent
  node_modules/react-dom/cjs/react-dom.development.js:17482:13
 beginWork
  node_modules/react-dom/cjs/react-dom.development.js:18596:16
 callCallback
  node_modules/react-dom/cjs/react-dom.development.js:188:14
 invokeGuardedCallbackDev
  node_modules/react-dom/cjs/react-dom.development.js:237:16
 invokeGuardedCallback
  node_modules/react-dom/cjs/react-dom.development.js:292:31
 beginWork$1
  node_modules/react-dom/cjs/react-dom.development.js:23203:28
 performUnitOfWork
  node_modules/react-dom/cjs/react-dom.development.js:22154:12

In the logs I see the following error message:

 [webpack-dev-server] [HPM] Error occurred while proxying request local.overhang.io:1999/api/mfe_config/v1?mfe=authn to http://local.overhang.io:8000/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)

I was following the MFE Development part of this guide: GitHub - overhangio/tutor-mfe

Any idea what I’m missing?

3

Very simple mistake, the environment was not initialized, as I never ran tutor dev launch. It might be worth adding this to the Readme in GitHub - overhangio/tutor-mfe, as reading the docs one could get the impression that running the authn MFE in this example is enough.