Please tag @edx/fedx-team on any PRs or issues. Thanks.
This repository is a template for Open edX micro-frontend applications. It is flagged as a Template Repository, meaning it can be used as a basis for new GitHub repositories by clicking the green "Use this template" button above. The rest of this document describes how to work with your new micro-frontend after you've created a new repository from the template.
You'll want to do a find-and-replace to replace all instances of frontend-template-application with the name of your new repository.
Prerequisite
Devstack. If you start Devstack with make dev.up.ecommerce that should give you everything you need as a companion to this frontend.
Installation and Startup
In the following steps, replace "frontend-template-application' with the name of the repo you created when copying this template above.
- Clone your new repo:
git clone https://github.com/edx/frontend-template-application.git
Use node v12.x.
The micro-frontend build scripts support node 12. Using other major versions of node may work, but is unsupported. For convenience, this repository includes an .nvmrc file to help in setting the correct node version via nvm.
Install npm dependencies:
cd frontend-template-application && npm install
Update the application port to use for local development:
Default port is 8080. If this does not work for you, update the line PORT=8080 to your port in all .env.* files
Start the dev server:
npm start
The dev server is running at http://localhost:8080 or whatever port you setup.
Move the file README-template-frontend-app.rst to your project's README.rst file. Please fill out all
the sections - this helps out all developers understand your MFE, how to install it, and how to use it.
The source for this project is organized into nested submodules according to the ADR Feature-based Application Organization.
Production Build
The production build is created with npm run build.
Please see edx/frontend-platform's i18n module for documentation on internationalization. The documentation explains how to use it, and the How To has more detail.