Development

Why does this project exist?

This project exists to create a beginner-friendly, community-oriented, free software licensed language learning application. If you want to learn more about LibreLingo's background, I recommend reading my article.

Project structure

Clickable flow chart

Setting up the development environment

Prerequisites

In order to install the dependencies of this project, you will need to have some basic development tools installed.

Ubuntu

If you are on Ubuntu, run this command in order to make sure you have all the basic dependencies:

apt-get install curl git python3-venv libpython3-dev wget unzip gcc libyaml-dev npm

On Ubuntu, it is also recommended to use Python 3.x as your default Python version:

apt-get install python-is-python3

Obtaining the source code

Clone the repository:

git clone [email protected]:LibreLingo/LibreLingo.git

Move into the repo directory:

cd LibreLingo

Web app

Having the correct version of Node

You will need Node. Note that this project is not yet compatible with Node v16.

In order to make sure you have the correct node version, it's recommended to use nvm. To install nvm, please consult nvm's official documentation, but if you already have the correct version, you might not strictly need it.

First, install the correct node version with this command:

nvm install 14

Then, to choose this version of node in your terminal, use

nvm use 14

Install dependencies:

Yarn is a package manager for JavaScript that helps manage project dependencies, ensuring consistent and efficient installations. For more information about Yarn, please refer to the official documentation. The steps required to install yarn itself are documented here.

yarn install

Starting the development server

Start the development server:

yarn web dev

Now you should be able to see your app on http://localhost:3000/

Setting up the development environment for Python

If you want to test new features in the YAML format, or some changes in how they are being used in the frontend, you need to be able to export YAML courses locally.

Install Poetry

You will need Poetry. If you don't have Poetry, you can install it with

curl -sSL https://install.python-poetry.org | python3 -

For more information, check out Poetry's official documentation.

Install dependencies using Poetry

Install dependencies at the top level and for the apps:

poetry install

cd apps/librelingo_yaml_loader
poetry install
cd ../..

cd apps/librelingo_json_export
poetry install
cd ../..

Handling Outdated Local Dependencies

When you update your local repository by pulling remote changes, your local dependencies might become outdated. To ensure your local dependencies are in sync with the project requirements, follow these brief steps:

Updating JavaScript Dependencies with Yarn

Update your local dependencies:

yarn install

This command ensures your local dependencies match the project's package.json file. For more information, refer to the Yarn documentation.

Updating Python Dependencies with Poetry

Update your local dependencies:

poetry install

This command ensures your local dependencies match the project's pyproject.toml and poetry.lock files. For more information, refer to the Poetry documentation.

Locally test LibreLingo with real courses

In order to test LiberLingo with real courses just like in the deployed production version, you need to install courses locally and export them from YAML to JSON.

Install courses

The following command installs all courses listed in the courses.json file just like in production. Keep in mind that in order to use them in the frontend, the courses also need to be exported!

yarn web run installAllExternalCourses

Export courses

In order to use a locally installed course when locally testing the frontend, you should export the course first. You should also export the course every time you make local changes to this course and you want the changes to be visible in the frontend.

Use the following command:

yarn exportAllCourses

You can export a single course using the following command (change the name of the course for the one that you need to export):

yarn run exportCourse spanish-from-english

Setting up Semaphore CI in a clone

In order for Semaphore CI to correctly operate, you will need to set up certain secrets.

This might not be necessary for you in all cases, but it cannot be avoided if you want to fully fork the repo, or work on CI configuration related tasks.

Consult this page to read about setting up secrets in Semaphore CI.

Here's a list of the tokens you need to set up. Each of them is a link to a page explaining how to obtain the token:

• GH_TOKEN
• KNAPSACK_PRO_TEST_SUITE_TOKEN_CYPRESS
• PERCY_TOKEN

Testing courses using GitHub gists

It's possible to test courses without them as HTML and deploying them.

One way of doing that is using GitHub gists. You can create a GitHub gist with the course JSON files.

The first step is to export the course as JSON. Then, you have to create a GitHub gist with the course files.

Keep in mind, that you have to prefix all file names with librelingo___ and therefore The first step is to export the course as JSON. Then, you have to create a GitHub gist with the course files.

Keep in mind, that you have to prefix all file names with librelingo___ and replace / with ___ in your paths, as GitHub gists don't natively support uploading folders.

So, for example challenges/animals.json should be uploaded as the GitHub gist file librelingo___challenges___animals.json.

Mocks

For mocks in the frontend, LibreLingo uses MSW. For Cypress tests, cy.intercept() is used. All of these mocks are defined in apps/web/src/mocks/handlers.js.