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.
- 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
- 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
- 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.