|Build Status| |Codecov| |license| frontend-template-application ================================= Please tag **@edx/fedx-team** on any PRs or issues. Thanks. Introduction ------------ 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. After Copying 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. Also edit index.html to replace "Application Template" with a friendly name for this application that users will see in their browser tab. **Prerequisite** `Devstack <https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/installation/index.html>`_. 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. 1. Clone your new repo: ``git clone https://github.com/edx/frontend-template-application.git`` 2. 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 <https://github.com/nvm-sh/nvm>`_. 3. Install npm dependencies: ``cd frontend-template-application && npm install`` 4. 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 5. Start the dev server: ``npm start`` The dev server is running at `http://localhost:8080 <http://localhost:8080>`_ or whatever port you setup. Making Your New Project's README File ------------------------------------- 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. Project Structure ----------------- The source for this project is organized into nested submodules according to the ADR `Feature-based Application Organization <https://github.com/edx/frontend-template-application/blob/master/docs/decisions/0002-feature-based-application-organization.rst>`_. Build Process Notes ------------------- **Production Build** The production build is created with ``npm run build``. Internationalization -------------------- Please see `edx/frontend-platform's i18n module <https://edx.github.io/frontend-platform/module-Internationalization.html>`_ for documentation on internationalization. The documentation explains how to use it, and the `How To <https://github.com/edx/frontend-i18n/blob/master/docs/how_tos/i18n.rst>`_ has more detail. .. |Build Status| image:: https://api.travis-ci.com/edx/frontend-template-application.svg?branch=master :target: https://travis-ci.com/edx/frontend-template-application .. |Codecov| image:: https://codecov.io/gh/edx/frontend-template-application/branch/master/graph/badge.svg :target: https://codecov.io/gh/edx/frontend-template-application .. |license| image:: https://img.shields.io/npm/l/@edx/frontend-template-application.svg :target: @edx/frontend-template-application