Online Compilier using Node.JS

6 min readMay 15, 2022

Getting Started

If you are a programmer then you definitely must have used an online compiler in your life but have you ever wondered “Can I make something like this?” and the answer is “Yes”.

You can definitely make your own online compiler for the programming language you want to code. In this article, you will learn how to build your own Online Compiler in Node.JS (a JavaScript framework). Let’s get started:-

First of all let us look at how our compiler is going to GET requests and POST responses on the server and the flow of the all the processes from selecting a programming language and defining its parameters:-
1->In the index.html file we will define our form with the text area to write our code, options to select the programming language with input or without input respectively, and submit button to submit the code to get the output;
2->In the main app.js file we will define all our functions for the language and to delete the temporary files.
3->In the first step will define the POST function from the ‘/compile code route where we will extract all the information entered by the users is the code written by the user, the language selected, input, and if the input is selected or not and store each of them in different variables. Then we will compare the language selected by the user is equal to the functions defined in the app.js file and call the functions related to the programming language from the complex modules.
4->Now what will happen under the hood is that complex will generate a temporary file based on the compiler in your pc (gcc for linux and g++ for windows for C or C++ language) and will generate output if the code is correct and send that output to the server or generate the errors if any.
5->This is the last or optional step if you want to remove all the temporary files generated we will define a flush function to remove all the temporary files in the temp folder.

Before we start let’s discuss what will be done in this article:-

First of all set up the working environment make the working directory and install the required packages.
In the second step you will be working on creating the root page(index.html) which will contain a text area for code and input where you will write your code and give input respectively in your choice of programming language.
In third step, we will start the work on our main file app.js which will define all the functionality of our online compiler.
At last, we will define a function to delete the temporary files that were created in the server during compiling the program. Still, it’s an optional step if you don’t want to clear the memory every time rather than manually deleting them.

1=>Set up the environment for the Application.

First, make a directory where all your files and folders will reside.
Go to terminal or cmd and write the following commands

Now, what these commands will do is set up your project and will open visual studio code.

2=>Install the required packages

Now install the following packages/modules that will be required for the web-application

Let’s us try to understand what these packages will be used for:-
1-> Express will be used for routing pages and creating the server where the web application will run.
2-> Body-parser To handle HTTP POST requests in Express.js version 4 and above, you need to install a middleware module called body-parser. Body-parser extract the entire body portion of an incoming request stream and exposes it on req.body.The middleware was a part of Express.js earlier but now you have to install it separately. This body-parser module parses the JSON, buffer, string, and URL encoded data submitted using HTTP POST request..
3-> Complex is a npm package that contains all the predefined functionality to create a compiler for several language which can be accessed using express GET and POST functions.

After installation of these packages/modules the package.json should look like this:

->Let’s code

3=>Create the root page

Now, make a HTML file that will serve as our root page you can name it index.html or anything you like but make the required changes in the app.js file.
What we will do in index.html is that we will define a form that will contain textarea for writing code and input, an options menu, radio buttons for input or not respectively, and submit button for result.
index.html should look like this:-

Here’s a screenshot of Our Online Compiler Home page

4=>Create app.js file

Now create an app.js file which will be the main page but make sure that it should be of the same name as that of the “main” in the package.json file which you should have defined during npm init process.

Get Qasid Shoaib’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In the app.js first of all, include all the packages and modules that you will use. It can be done using required keyword as shown below:-

After the inclusion of all the packages in the app.js file we will use these packages along

with other node packages to link all the pages and try to run the web application.

Now, let’s create a app variable for using express packages and body-parser

Then initialize compiler options from the complex package and link “/” root page with the “index.html”.

And define the post function for the language you want your compiler to have and with input or without input options

hen last and final step set the port for the server to listen and define the get function to send the output data generated after the executed code to the server.

5=> Summary

Now what’s happening here is that when you write your code in the code section and select the language of your code and also set input button if there is any and submit your code and get the output.
That’s it now run your program.