Writing a multi-language online compiler for VS Code Part 1: The Architecture
I like to write my code in Visual Studio Code. And sometimes installing and setting up the compiler for some languages and getting it working is a pain. So, I thought of an idea.
What if I could compile my code through an API call without installing anything? Sure, It need not compile a huge project with multiple files but even if I could build something that compiles small snippets of code for swiftly trying out some programming language or compiling some code for a coding competition, that would be great and it would be a good learning experience as well.
I wrote this article to share with you, my thought process and journey in building such a compiler. This tutorial will be split into 4 parts, otherwise, it would be too much to cover and too much to take in. Cheers!
UPDATE: Part 2 is now available here.
UPDATE 2: Part 3 is now available here.
The Requirements:
As with any System Design problem, The first step is to clearly define what are the functionalities the system should support.
In our case, there are 2 main things.
- Automatically detect the programming language based on the file extension.
- Call the corresponding API with the code and necessary inputs and display the result.
The Plan of Attack:
Once the user is done writing their code, they can hit the ‘run’ command.
This will make an API request to the Proxy. The reason for a proxy server is that,
1. It allows us to have a single URL for multiple programming language servers.
2. It can be made to act as a load balancer if required.
3. It can take care of authenticating and authorizing the API requests.
The proxy server can then act as a reverse proxy and redirect the request to the correct language compiler service.
A reverse proxy is a server that sits in front of other web servers and forwards client requests to those web servers.
Each programming language will have its language compiler service that will have all the necessary libraries and compilers installed to compile/interpret that particular language.
How does the proxy server know what language?
Our request is going to be a POST request with the following body
The proxy server is simply going to look at the language field and figure out which server to redirect the request to.
So yeah, that’s the architecture of our compiler system. In the next part, we will start by building a language server that can take in requests and compile them in a safe environment and spit out the output.
You can check out the finished extension here
