...

1. Pick a name.  It should follow the convention: frontend-app-XXX.

   1. The repo name may or may not correspond with the sub-domain.  Examples:

      1. frontend-app-profile is served at profile.edx.org

      2. frontend-app-ecommerce is served at orders.edx.org

      3. If you can keep it one word it will make things easier

2. We have a GitHub template repository to help bootstrap your new application.

   1. If you have permission to create new repositories:

      1. Visit https://github.com/edx/frontend-template-application

      2. Click the "Use this template" button.

      3. Put in your chosen micro-frontend application name.

      4. Make sure to create it in the edX organization.

   2. If you do not have permission to create a new repository:

      1. Get someone to do the above steps for you.  You can read through How to request a new GitHub Repo to find a way to get someone to help you.

   3. Do a find and replace in your new repository to replace frontend-template-application with frontend-app-XXX.

   4. Similarly, there's an example module which demonstrates a basic module.  Feel free to rename the "example" directory or delete it.

3. Add a link to your new repo to Frontend Repos.

4. If you are replacing an existing legacy frontend, update MFE Rewrite Status accordingly.

...

Setup Automated Deployment

...

1. In edx/terraform, create two files:

   plans/edx/prod-frontends/frontend-app-XXXXX.tf

   Code Block

   variable "frontend_app_XXXXX_hostname" { type = string description = "Hostname of the frontend-app-XXXXX used for bucket naming and routing" } module "frontend_app_XXXXX_frontend" { source = "../../../modules/frontends/frontend" cloudflare_record_name = "XXXXX" route53_zone_id = var.route53_zone_id_edx_org frontend_hostname = var.frontend_app_XXXXX_hostname internal_frontend_hostname = "${var.environment}-XXXXX.edx.org" aws_region = var.aws_region deployer_user = aws_iam_user.frontend_deployer_user.arn cloudflare_zone_id = var.cloudflare_zone_id_edx_org cdn_type = "cloudflare" }

   
   plans/edx/stage-frontends/frontend-app-XXXXX.tf

   Code Block

   variable "frontend_app_XXXXX_hostname" { type = string description = "Hostname of the frontend-app-XXXXX used for bucket naming and routing" } module "frontend_app_XXXXX_frontend" { source = "../../../modules/frontends/frontend" cloudflare_record_name = "XXXXX.stage" route53_zone_id = var.route53_zone_id_edx_org frontend_hostname = var.frontend_app_XXXXX_hostname internal_frontend_hostname = "${var.environment}-XXXXX.edx.org" aws_region = var.aws_region deployer_user = aws_iam_user.frontend_deployer_user.arn cloudflare_zone_id = var.cloudflare_zone_id_edx_org cdn_type = "cloudflare" }

   Note the only difference between the stage plan and the prod plan is the cloudflare_record_name. For examples, see the existing plans/edx/prod-frontends/frontend-app-* configurations.
   

2. Add variables for your application for stage and prod:

   plans/edx/prod-frontends/terraform.tfvars

   Code Block
   ... # frontend-app-XXXXX frontend_app_XXXXX_hostname = "YYYYY.edx.org"

   
   plans/edx/stage-frontends/terraform.tfvars

   Code Block
   ... # frontend-app-XXXXX frontend_app_XXXXX_hostname = "YYYYY.stage.edx.org"

3. Optional for edge deployment

...