Diode 🔌
Diode is an easy to use API proxy to hide your API secrets and add common middlewares without implementing a backend! ✨
Repository Video ▶️Diode 🔌
Open-source API proxy server with an easy-to-use dashboard for configuring middlewares and secrets.
What does Diode do?
Third party APIs make it easy to integrate functionalities across apps. But using them on a purely front-end project is a hassle. Most of the time, the API endpoints require an API key which cannot be exposed on the frontend. Hence, most of us setup a proxy backend server that makes the request to the third party API with the API keys and make the frontend request this proxy server instead. While it might be a trivial solution that shouldn't take a lot of time to implement, it can get very repeatable and tedious over time.
Diode solves this problem by abstracting this proxy server and allowing you to add and configure as many API routes and consume them directly on the frontend without having to worry about exposing any API keys! Since Diode sits in between all the requests going to the third-party server, it also makes it easy to add commonly used middlewares to the API route with just a click!
Fun fact: All of this happens without you having to write a single line of code.
Features
- 💡 Easy to use dashboard.
- ⏩ Query parameters and request headers forwarding.
- 🕶️ Encrypted Secrets that get dynamically injected when making requests.
- 🔮 Request and Response structure preservation.
- One-click middlewares for:
- 🚫 IP/HTTP restriction
- ⏱️ Rate-limiting
- 📌 Caching
- 💙 Open source, can be self-hosted.
Try it out
Note: Deploying on Heroku free plan may cause higher latencies
Project Setup
Pre-requisites:
- Node.js and npm installed.
- Postgres installed.
- Redis installed.
Clone the repo, install dependencies
git clone https://github.com/blenderskool/diode.git
cd diode
npm install
Setup environment variables
Create a .env file and provide values for all the variables listed in .env.example file.
Setup database
In the root of this project, run the following command to setup the database schema
npx prisma db push
Build the project
npm run build
Start the server
npm run start
Diode will start running at port 3000.
Explore the database
Prisma Studio makes it easy to explore and edit the data in the database. You can start it by running
npx prisma studio
Prisma Studio will be running at port 5555.
License
Diode is MIT Licensed
Done with most of the frontend!
The last 2 hours were really productive. Have completed most of the UI work, connecting to the backend is left in some parts. What's remaining:
- Connecting some frontend forms with the backend.
- Testing the integration.
- Preparation for deploying on Heroku.
Added Project details page ✨
The project details page is where Api routes, secrets, and stats associated with that project are shown. Using Chakra-UI for the first time, it's really good!
Setup Frontend and built the Projects page
Setup Chakra-UI for the frontend, also got done with the Projects page.
Added Secrets substitution and performance metrics capturing 🕶️
Secrets are variables that can be used within the requests in their query string and headers. They can be some API keys or any arbitrary string. Secrets are encrypted and stored on the database and only decrypted while making the actual request.
Performance metrics captured are:
- Total number of successful calls to origin endpoint.
- Total number of failed calls to origin endpoint.
- Average response time of origin endpoint.
This completes most of the backend work of Diode, at least the MVP! 🚀
Added Cache middleware 📌
Cache middleware caches the API response + headers in Redis and returns it for a specified duration before re-fetching new data from the origin server.
Had to implement this from scratch as well, couldn't find an existing middleware that supported configurations required for this project. Learned a lot ✌️
Turns out that caching the headers is as crucial as caching the response!
Added IP addresses and HTTP Restriction middleware 🚫
Restriction middleware restricts which IP addresses or origins can make the request to the endpoint. Users can configure any one of the following restrictions:
- IP address: Restricts access to only some IP addresses.
- HTTP origins: Restricts access to only origins. Blocks others with CORS.
Could make use of some express middlewares for this one with Next.js!
Added Rate Limiting middleware ⏱️
Rate limiting middleware limits the number of requests that can be made within a specified time interval. Took longer than expected to implement this as most middleware packages did not allow modifying the key used in the Redis store, so had to use a custom solution. Thinking of adding some more middlewares 💪
Added schema and basic proxy functionalities 👌
Query and request headers are forwarded by the proxy. Took a little bit of fiddling to get the headers forwarding working. Notice how in the demo below, the request does not pass any Unsplash API keys(because the proxy picks them up from DB)
Started working on the project! 🙌
Created a project repository, scaffolded it with Next.js and Prisma.
Project created by Akash Hamirwasia