Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 11 additions & 77 deletions README-template-frontend-app.rst
Original file line number Diff line number Diff line change
Expand Up @@ -42,91 +42,25 @@ by the new Fantastico storage engine.
Getting Started
===============

Devstack Installation
---------------------
Prerequisites
=============

The Tutor_ platform is a prerequisite for developing an MFE.
Utilize `relevant tutor-mfe documentation`_ to guide you through
the process of MFE development within the Tutor environment.

.. _Tutor: https://github.com/overhangio/tutor

.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development

.. note::

[TODO]

Describe in detail how this MFE can be installed and set up for development
in a devstack. Include as many screenshots as you can to make your guide
with tutor. Include as many screenshots as you can to make your guide
easier to follow! Use the following steps as an example:

Follow these steps to provision, run, and enable an instance of the
[PLACEHOLDER] MFE for local development via the `devstack`_.

.. _devstack: https://github.com/openedx/devstack#getting-started

#. To start, clone the devstack repository as a child of an arbitrary ``~/workspace/`` directory.

.. code-block::

mkdir -p ~/workspace/
cd ~/workspace/
git clone https://github.com/openedx/devstack.git

#. Configure default services and setup devstack

Create a ``devstack/options.local.mk`` file with only the services required.
Commonly, this will just be the LMS:

.. code-block::

DEFAULT_SERVICES ?= \
lms

#. Start the devstack with:

.. code-block::

cd devstack
make dev.pull
make dev.provision
make dev.up

#. In an LMS shell, enable the ``ENABLE_[PLACEHOLDER]_MICROFRONTEND`` feature flag:

.. code-block::

make lms-shell
vim /edx/etc/lms.yml
---
FEATURES:
ENABLE_[PLACEHOLDER]_MICROFRONTEND: true

Exit the shell and restart the LMS so changes take effect:

.. code-block::

make lms-restart

#. Create and enable the waffle flag required to redirect users to the MFE,
enabling it for everyone:

.. code-block::

make lms-shell
./manage.py lms waffle_flag --create --everyone [PLACEHOLDER].redirect_to_microfrontend

#. Start this MFE with:

.. code-block::

cd frontend-app-[PLACEHOLDER]
nvm use
npm ci
npm start

#. Finally, open the MFE in a browser

Navigate to `http://localhost:8080 <http://localhost:8080>`_ to open the
MFE. This is what it should look like if everything worked:

.. figure:: ./docs/images/template.jpg

"Polycon marking template" by mangtronix is licensed under CC BY-SA 2.0.

Configuration
-------------

Expand Down
20 changes: 7 additions & 13 deletions README.rst
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,8 @@ tab.
Prerequisites
=============

The `devstack`_ is currently recommended as a development environment for your
new MFE. If you start it with ``make dev.up.lms`` that should give you
everything you need as a companion to this frontend.

Note that it is also possible to use `Tutor`_ to develop an MFE. You can refer
to the `relevant tutor-mfe documentation`_ to get started using it.

.. _Devstack: https://github.com/openedx/devstack
`Tutor`_ is currently recommended as the development environment for your
new MFE. You can refer to the `relevant tutor-mfe documentation`_ to get started using it.

.. _Tutor: https://github.com/overhangio/tutor

Expand All @@ -54,12 +48,12 @@ created when copying this template above.

``git clone https://github.com/openedx/frontend-app-[PLACEHOLDER].git``

2. Use node v18.x.
2. Use the version of Node specified in the ``.nvmrc`` file.

The current version of the micro-frontend build scripts support node 18.
Using other major versions of node *may* work, but this 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>`_.
The current version of the micro-frontend build scripts supports the version of Node found in ``.nvmrc``.
Using other major versions of node *may* work, but this 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:

Expand Down