Awesome
<p align="center"> <img style="width:128px;min-width:128px;max-width:128px;height:auto" src="assets/YaadeIcon.png" alt="yaade-icon"/> </p> <h1 align="center"><span style="color:#48bb78">Yaade</span> - Yet Another API Development Environment</h1>Yaade is an open-source, self-hosted, collaborative API development environment.
<img src="assets/dark-mode.png" alt="dark-mode-screenshot"/>📚 Documentation
Visit docs.yaade.io.
🤔 Why did you develop Yaade?
I was looking for a self-hosted Postman alternative so that API collections can easily be shared between teammates. Even though popular solutions like <a href="https://hoppscotch.io/de/">Hoppscotch</a> exist, their self-hosted app does not come with authentication and relies on Firebase for persistency. Yaade is developed from the ground up with self-hosting and security in mind. That means sensitive information in API requests can safely be stored on your own server!
🌟 Features
- Self-hosted: data never leaves your own server
- Multi-user: manage users and their permissions
- Persistent: even across container or server restarts
- Easy single-file data import / export
- Requests are executed on your machine so you can call localhost as well as remote servers
- Collection and Request description (documentation) with Markdown
- Request/Response scripts (for both collections and requests)
- Most importantly: dark mode default
⚡ Install
To have the best experience with Yaade run the docker container on your server and install the browser extension on your local machine.
1. 🐋 Docker
docker volume create yaade
docker run -d --restart=always -p 9339:9339 -e YAADE_ADMIN_USERNAME=admin -v yaade:/app/data --name yaade esperotech/yaade:latest
The default password is password
. After login go to ⚙️ > Account and change the password.
2. 🔧 Extension
Yaade uses a browser extension as a proxy to enable CORS requests. Install the extension using your browsers extension store. Currently only a chrome extension is available. You can find it <a href="https://chrome.google.com/webstore/detail/yaade-extension/mddoackclclnbkmofficmmepfnadolfa">here</a>. Then open it and input your server URL, eg. https://yaade.example.com/
. From that point all requests originating from your Yaade browser tabs will be proxied through the extension.
⬆️ Upgrade
To upgrade the docker container with a new version, first stop the running container, pull the latest version and start a new container with the old volume.
docker rm -f yaade
docker pull esperotech/yaade:latest
docker run -d --restart=always -p 9339:9339 -e YAADE_ADMIN_USERNAME=admin -v yaade:/app/data --name yaade esperotech/yaade:latest
💾 Technology
- SPA built with TypeScript, React and Vite.
- Backend built with Kotlin.
- H2 file-based database.
- Browser extension with plain JavaScript.
🖥️ Local development
- Install the required dependencies
- Java 11
- Kotlin
- Node >= 16
- Clone the repository
- Install the project specific dependencies
cd scripts/
chmod +x install.sh
./install.sh
- Start the server on port 9339 using your IDE of choice (I use IntelliJ IDEA)
- you can also run it by using the jar file directly
$ java -jar server/build/libs/yaade-server-1.0-SNAPSHOT
- note that you must set the environment variable
YAADE_ADMIN_USERNAME
to run
- you can also run it by using the jar file directly
- Start the vite dev server on port 9338
cd client/
npm run dev
- Start the dev-proxy on port 9337
cd dev-proxy/
node index.js
- Now open your browser and visit http://localhost:9337
🔨 Build
cd scripts/
chmod +x build.sh
./build.sh
Screenshots
🌙 Dark mode
<img src="assets/dark-mode.png" alt="dark-mode-screenshot"/>☀️ Light mode
<img src="assets/light-mode.png" alt="light-mode-screenshot"/>More Screenshots
<div style="width:100%;min-width:100%;display:flex;flex-wrap:wrap;justify-content:space-evenly"> <img style="width:48%;min-width:48%;max-width:48%;height:auto;margin-bottom:20px" src="assets/documentation.png" alt="documentation-screenshot"/> <img style="width:48%;min-width:48%;max-width:48%;height:auto;margin-bottom:20px" src="assets/environments.png" alt="environments-screenshot"/> <img style="width:48%;min-width:48%;max-width:48%;height:auto" src="assets/scripts.png" alt="scripts-screenshot"/> <img style="width:48%;min-width:48%;max-width:48%;height:auto" src="assets/user-management.png" alt="user-management-screenshot"/> </div>🤝 How can I contribute?
Your contribution is very welcome! First open an issue about the topic you want to contribute on, eg. adding a new feature, bugfixing or refactoring. We will then discuss further details. Eventually, I will review your Pull Request and merge / release it.