Deploying MFEs in the community

Working Groups Build-Test-Release
22

Launching Native Install with MFEs

This is a happy little set of instruction to get a native install of open edX working with the new MFE deployments.
It will download the master branches of most repos and a few selected branches that are being considered to be merged before the Koa release.

It should take about 2~3 hours to do all this, but most time is unattended ansible work.

  1. Getting started

Shopping list:

  • web server with ubuntu 16
  • public wildcard domain
  • SSL cert

I started this on a brand new t2.large on AWS Using the baseline ubuntu 16.
Storage disk should be at least 25GB. Go for 30 to be safe.
This is a public facing web server with ports 80 and 443 open to the world.
Public IP: 52.12.48.91

I created a DNS A record for this IP to the domain wildcard:

.mfe-example.publictest.edunext.co

For the SSL cert I used certbot:

    sudo apt udpate
    sudo apt upgrade
    sudo apt install letsencrypt
    sudo certbot certonly --standalone

Note: certbot failed due to deprecated python2 libraries. To fix it I did:

    pip install requests urllib3 --force --upgrade

I used the cli wizard to create a certificate for domains (a wildcard would work just as well):

    lms.mfe-example.publictest.edunext.co
    studio.mfe-example.publictest.edunext.co
    react-apps.mfe-example.publictest.edunext.co
  1. The native install part:

Following the instructions on the draft PR (https://github.com/edx/configuration/pull/6128).

    mkdir mfe_example
    cd mfe_example
    export OPENEDX_RELEASE=nedbat/tk.1106c
    wget https://raw.githubusercontent.com/edx/configuration/$OPENEDX_RELEASE/util/install/ansible-bootstrap.sh -O - | sudo -E bash
    wget https://raw.githubusercontent.com/edx/configuration/$OPENEDX_RELEASE/util/install/generate-passwords.sh -O - | bash

Note: edited on 09.11.2020 to use the nedbat/tk.1106c which fixes the elasticsearch problems and it is similar to what koa will be.

nano config.yml

# config.yml

################################
# general settings for ansible #
################################

module_lang: en_US.UTF-8
module_set_locale: True

########################
# edxapp role settings #
########################

EDXAPP_LMS_BASE_SCHEME: https

EDXAPP_LMS_BASE: "lms.mfe-example.publictest.edunext.co"
EDXAPP_CMS_BASE: "studio.mfe-example.publictest.edunext.co"

EDXAPP_SESSION_COOKIE_DOMAIN: ".mfe-example.publictest.edunext.co"

EDXAPP_CSRF_COOKIE_SECURE: true
EDXAPP_SESSION_COOKIE_SECURE: true
EDXAPP_CROSS_DOMAIN_CSRF_COOKIE_DOMAIN: ".mfe-example.publictest.edunext.co"
EDXAPP_CROSS_DOMAIN_CSRF_COOKIE_NAME: "cross-domain-cookie-mfe"

EDXAPP_CORS_ORIGIN_WHITELIST:
- studio.mfe-example.publictest.edunext.co
- react-apps.mfe-example.publictest.edunext.co

EDXAPP_CSRF_TRUSTED_ORIGINS:
- react-apps.mfe-example.publictest.edunext.co

EDXAPP_LOGIN_REDIRECT_WHITELIST:
- studio.mfe-example.publictest.edunext.co
- react-apps.mfe-example.publictest.edunext.co

# Needed to link the LMS instructor dashboard to the writable gradebook micro-frontend
EDXAPP_LMS_WRITABLE_GRADEBOOK_URL: https://react-apps.mfe-example.publictest.edunext.co/gradebook

# Needed to link to the new profile micro-frontend.
EDXAPP_PROFILE_MICROFRONTEND_URL: https://react-apps.mfe-example.publictest.edunext.co/profile/u/

# Needed to link to the new account micro-frontend.
EDXAPP_ACCOUNT_MICROFRONTEND_URL: https://react-apps.mfe-example.publictest.edunext.co/account

EDXAPP_LMS_SSL_NGINX_PORT: 443
EDXAPP_CMS_SSL_NGINX_PORT: 443

EDXAPP_ENABLE_CORS_HEADERS: true
EDXAPP_ENABLE_CROSS_DOMAIN_CSRF_COOKIE: true

#######################
# nginx role settings #
#######################

NGINX_ENABLE_SSL: yes

NGINX_SSL_CERTIFICATE: '/etc/letsencrypt/live/lms.mfe-example.publictest.edunext.co/fullchain.pem'
NGINX_SSL_KEY: '/etc/letsencrypt/live/lms.mfe-example.publictest.edunext.co/privkey.pem'

#####################
# mfe role settings #
#####################

MFE_BASE_SCHEMA: https
MFE_DEPLOY_COMMON_HOSTNAME: "react-apps.mfe-example.publictest.edunext.co"

# This will override the logo in the header with a dummy logo
MFE_NPM_OVERRIDES: ["@edx/frontend-component-header@git+https://github.com/edunext/frontend-component-header-edunext.git"]

# This 2 variables make the whole process select branches of the MFEs repos where the changes are applied:
# Will not be necessary once the following PRs have been merged:
# https://github.com/edx/frontend-app-gradebook/pull/145
# https://github.com/edx/frontend-app-account/pull/340
# https://github.com/edx/frontend-app-profile/pull/386
# A similar PR will be necessary for all mfes
MFE_DEPLOY_GIT_PATH: 'edunext'
MFE_DEPLOY_VERSION: 'lmm/build'

And now we launch the full deployment:

wget https://raw.githubusercontent.com/edunext/configuration/mfe/community_deployment/util/install/native.sh -O - | bash

Note 1:
This native.sh comes from the mfe/community_deployment branch. What this does differently is that it clones the mfe/community_deployment branch before doing the ansible install. This would not be necessary once the PRs 6088 and 6049 are merged in master.

Note 2:
Running this failed once due to some deprecated SSL library. Perhaps I broke it when I did the urllib3 upgrade.
Fixed it with:

    sudo apt remove python-openssl

Note 3:
Installing the forum role did not work because of a known error in forum: initialize elasticsearch
What we did was to comment out the forum role in the mfe/community_deployment. This should not be a problem for anyone following this instructions after we already commented it. Just note that the forum will not work in this installation. Using branches named nedbat/tk.1106c fixes the forum

  1. Configurations for edxapp:

The site is live at: https://lms.mfe-example.publictest.edunext.co/

We now need a super user:

sudo su edxapp -s /bin/bash
cd edx-platform/
source ../venvs/edxapp/bin/activate
source ../edxapp_env
python manage.py lms createsuperuser

With this, we go to https://lms.mfe-example.publictest.edunext.co/admin, log in as a super user and turn on the necessary settings.

3.1: Site configurations:
-https://lms.mfe-example.publictest.edunext.co/admin/site_configuration/siteconfiguration/add/

I edited the example.com site to match lms.mfe-example.publictest.edunext.co

Site values:

{
"ENABLE_PROFILE_MICROFRONTEND":true,
"ENABLE_ACCOUNT_MICROFRONTEND":true
}

3.2: Waffle flags:
-https://lms.mfe-example.publictest.edunext.co/admin/waffle/flag/

Here you need to add the 2 following flags for “everyone”

  • account.redirect_to_microfrontend
  • learner_profile.redirect_to_microfrontend

This is it. Now you can visit:

-https://lms.mfe-example.publictest.edunext.co/

And log in with any of the usual demo users. Honor, Verified, Staff …

All the MFEs will be deployed in the react-apps.mfe-example.publictest.edunext.co domain.
For example:

Tagging the people in the call today for more visibility: @nedbat, @sambapete, @nimisha, @antoviaque, @pdpinch, @regis. And @djoy for good meassure.

A million thanks to @morenol for all the hardwork.

4 Likes