I recently made my first contribution to Uli. To get started, I tried setting it up on my local machine last week and spent some time doing so. Despite following the official README, it proved to be more challenging than I anticipated. I overlooked certain steps, and there were additional requirements for Windows that I had to address as well.
This is a step-by-step guide on setting up "Uli" locally for development. In this tutorial, I will walk you through the process of setting up Uli on your own local machine, allowing you to dive into its codebase and contribute to its development.
This is the official GitHub repository for Uli - https://github.com/tattle-made/Uli
Uli is a browser plugin that de-normalizes the everyday violence that people of marginalized genders experience online in India and provides tools for relief and collective response. It is an attempt to invert the top-down logics of platform moderation and center the experiences of those subject to online gender-based violence.
The plugin installation link and the user guide can be found here: https://uli.tattle.co.in/
Before we begin, let's understand the file structure of the code a bit. All the code for the browser plugin can be found in the
The code is primarily broken into two folders,
|plugin||code for browser extension - essentially the frontend|
|api-server||a rest server for storing user preferences and archived tweets - essentially the backend|
Uli is currently supported on Chrome/Brave and Mozilla Firefox only. The code will work on only these two browsers.
Clone the repository and navigate to the
Next, install all the necessary packages in the
We've completed step 1 – Uli is cloned, and all the required browser extension libraries are now installed.
Before starting the development server, you'll need to do a few things, like adding a file and making some changes to another file.
api-serverfolder and create a new file called
development.envwith the following content. Add this content inside the
api-serverfolder to change the control characters of a file. You will have to change the
entrypoint.shfile from CRLF to LF by running the following command. Please ignore this step if you are not using Windows
pluginfolder and include the following code in the
manifest.jsonfile. Add this entry to the
connect-srcsection within the
content_security_policy in the
manifest.json should now look like this.
This process allows you to develop and test your changes on the Chrome browser locally. To enable the same for Firefox, repeat the process in the
manifest.firefox.json file located inside the
I know that was quite a few steps, but believe me, it's smooth sailing from here on. It's all straightforward and simple now.
If you get
ERROR: Unknown database 'uli_dev', the database was not successfully created and database migration failed. Manually create the
uli_dev database by logging into
http://localhost:8080/ using the username and password from
Uli/browser-extension/api-server/db/config/config.js and execute the following.
You should now see database migration in the logs. The
api-server will be running now.
NOTE - For if you are on Windows, you might have to start the
api-servermanually. You can do this by running the following command inside the
api-server docker container.
Please ignore this step if you are not using Windows
Or you can also manually access the
api-server container within Docker Desktop. Inside the container's terminal, run the command
nodemon index.js after navigating to the
api-server in Docker Desktop.
Now, you have successfully started the development server.
Run the following command to begin local plugin development.
If all services run correctly, you should be able to load the plugin from
plugin/dist folder into Chrome/Brave/Firefox.
NOTE - If you are on Windows, you will need to make the following changes before running the commands. You'll need to modify the
plugin/package-json file as described below.
Please ignore this step if you are not using Windows
Secondly, running the commands mentioned in the table above will create a
-p and a
dist folder every time, which you will need to delete in order to generate a new distribution to reflect major changes.
Once you run the
npm run dev:chrome command or the
npm run dev:firefox, a
dist folder will be created. This folder contains the unreleased extension. Load it in your browser to see the extension in action and develop it further.
To learn how to install the unreleased extension in your browser, follow the instructions here
Or, you can follow the instructions below.
Settingsand then navigate to
Developer modein the Extensions
about:debuggingin the address bar (where you enter url's and do your web searches)
This Firefoxin the left-hand sidebar.
Temporary Extensionsdropdown. Within it, click on the
Load Temporary Add-on..button and load any single file from the dist folder. This will load the extension into the browser.
To see significant changes, you'll need to reload the
dist folder in your browser each time. To start fresh with a new distribution, use this command to delete the
NOTE - if you are on Windows, you will also have to delete the
-p folder along with the
If you have made it here, hurrayy!! (a big hi-fi) You've successfully set up Uli on your local machine for development. We're looking forward to seeing the new changes and pull requests you'll be making!
To start contributing, head over to the contribution guide
You can create issues and reach out to the maintainers of Uli for more help if you need it.