Setup Develop Environment

Prerequisites

Overleaf is a typical open-source project for microservice architecture, with all services running in Docker.

• The Official Community Edition source code is on GitHub Overleaf Official.

• The source code for Overleaf-CEP is available on GitHub Yu-i-i/Overleaf.

To set up an Overleaf development environment, you'll need a powerful server; a configuration of at least 8 cores and 16GB of RAM is recommended, as you'll need to run more than 20 containers simultaneously.

Since servers with 8 or more CPU cores are typically expensive, It's highly recommend using your local computer for development.

Meanwhile, as a developer, we believe you should already be familiar with Docker installation. We strongly suggest using latest Ubuntu LTS and Docker for development, as this reduces the possibility of encountering unexpected errors.

In summary, you will need:

• A powerful server/desktop to develop

• The latest version of Ubuntu LTS

• Docker and Git environment

Configuration Tutorial

Here, we will use overleaf-cep as an example to demonstrate how to configure an Overleaf development environment.

1

Pull the Source Code

First of all let's clone the repo:

bash

git clone https://github.com/yu-i-i/overleaf-cep.git
cd overleaf-cep

2

Synchronize package-lock.json

Since Overleaf is developed in an internal repository, the package-lock.json file is very likely to become out of sync due to some development issues. We need to run the following command to synchronize it. (if you have your local nodejs environment)

bash

npm install --package-lock-only --ignore-scripts

If you don't have nodejs installed, don't be worried, you can directly use docker to run the same command. run from the root of the Overleaf repository:

bash

docker run --rm \
  -v "$(pwd)":/workspace \
  -w /workspace \
  node:22.18.0 \
  npm install --package-lock-only --ignore-scripts

3

Build Develop Image

Overleaf provides a dedicated directory /develop for storing development scripts. Just build the services:

bash

cd ./develop
bin/build

If Docker is running out of RAM while building the services in parallel, create a .env file in this directory containing COMPOSE_PARALLEL_LIMIT=1.

4

Start All Services

Then start the services:

bash

bin/up

Once the services are running, open http://localhost/launchpad to create the first admin account.

TeX Live

Compiling a PDF requires building a TeX Live image to handle the compilation inside Docker:

docker build texlive -t texlive-full

To compile on a macOS host, you may need to override the path to the Docker socket by creating a .env file in this directory, containing DOCKER_SOCKET_PATH=/var/run/docker.sock.raw

Development

To avoid running bin/build && bin/up after every code change, you can run Overleaf Community Edition in development mode, where services will automatically update on code changes.

To do this, use the included bin/dev script:

bin/dev

This will start all services using node --watch, which will automatically monitor the code and restart the services as necessary.

To improve performance, you can start only a subset of the services in development mode by providing a space-separated list to the bin/dev script:

bin/dev [service1] [service2] ... [serviceN]

Starting the web service in development mode will only update the web service when backend code changes. In order to automatically update frontend code as well, make sure to start the webpack service in development mode as well.

If no services are named, all services will start in development mode.

Debugging

When run in development mode most services expose a debugging port to which you can attach a debugger such as the inspector in Chrome's Dev Tools or one integrated into an IDE. The following table shows the port exposed on the host machine for each service:

Service	Port
web	9229
clsi	9230
chat	9231
contacts	9232
docstore	9233
document-updater	9234
filestore	9235
notifications	9236
real-time	9237
references	9238
history-v1	9239
project-history	9240
linked-url-proxy	9241

To attach to a service using Chrome's remote debugging, go to chrome://inspect/ and make sure Discover network targets is checked. Next click Configure... and add an entry localhost:[service port] for each of the services you want to attach a debugger to.

After adding an entry, the service will show up as a Remote Target that you can inspect and debug.

Other Tools

Once you've done all, you can refer to the next section to add some debug tools to your overleaf development.