Developing MFEs using Tutor

Development
, , ,
1

Hi.
I’m running into a problem setting up a local development environment for MFEs using tutor.
I have managed to bring up my MFE container using the tutor-mfe guide on development. The container is up, the mfe directory is bindmounted and the webpack is generated on any changes.
The issue is that the node environment is not getting rendered. For example the title of the index.html of the MFE:

<title>Application Template | <%= process.env.SITE_NAME %></title>

is getting rendered as is:

Screenshot from 2022-08-14 17-50-49
Screenshot from 2022-08-14 17-50-49881×142 20.6 KB

Running node from the container I can verify that the envs are set:

root@bc2445078e36:/openedx/app# node 
Welcome to Node.js v12.22.10.
Type ".help" for more information.
> process.env
{
  BASE_URL: 'apps.www.myopenedx.com',
  DISCOVERY_API_BASE_URL: '',
  HOSTNAME: 'bc2445078e36',
  MARKETING_SITE_BASE_URL: 'http://www.myopenedx.com:8000',
  REFRESH_ACCESS_TOKEN_ENDPOINT: 'http://www.myopenedx.com:8000/login_refresh',
  CSRF_TOKEN_API_PATH: '/csrf/api/v1/token',
  PACT_SKIP_BINARY_INSTALL: 'true',
  YARN_VERSION: '1.22.17',
  LOGIN_URL: 'http://www.myopenedx.com:8000/login',
  PWD: '/openedx/app',
  LOGO_TRADEMARK_URL: 'http://www.myopenedx.com:8000/theming/asset/images/logo.png',
  ENABLE_NEW_RELIC: 'false',
  PORT: '1622',
  STUDIO_BASE_URL: 'http://studio.www.myopenedx.com:8001',
  NODE_ENV: 'development',
  HOME: '/root',
  USER_INFO_COOKIE_NAME: 'user-info',
  MY_CUSTOM_MFE_SETTING: 'dev value',
  CPPFLAGS: '-DPNG_ARM_NEON_OPT=0',
  CREDENTIALS_BASE_URL: '',
  TERM: 'xterm',
  ACCESS_TOKEN_COOKIE_NAME: 'edx-jwt-cookie-header-payload',
  LANGUAGE_PREFERENCE_COOKIE_NAME: 'openedx-language-preference',
  LMS_BASE_URL: 'http://www.myopenedx.com:8000',
  PUBLISHER_BASE_URL: '',
  SHLVL: '1',
  PUBLIC_PATH: '/avidmfe/',
  LOGOUT_URL: 'http://www.myopenedx.com:8000/logout',
  LOGO_WHITE_URL: '',
  LOGO_URL: 'http://www.myopenedx.com:8000/theming/asset/images/logo.png',
  SEGMENT_KEY: '',
  SITE_NAME: 'FOO',
  PATH: './node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin',
  FAVICON_URL: 'http://www.myopenedx.com/favicon.ico',
  NODE_VERSION: '12.22.10',
  ECOMMERCE_BASE_URL: '',
  _: '/usr/local/bin/node'
}

I’d appreciate any insight or starting point for debugging this issue.

2

What MFE are you trying to run? Is it an existing one or a new one?

MFEs are generally developed with React, so they use JSX, and not whatever template language that is (EJS?). Most of the tooling involved, including tutor-mfe, frontend-platform, and frontend-template-application is designed for you to write your MFE using webpack+React. It may be possible to use some other tools but you’ll have to figure out how to get it to work, and it may require more work on your end, or even a custom Tutor plugin that’s different from tutor-mfe.

That said, I could be missing something here, as I’m not too closely involved in Open edX frontend work these days.

2 Likes