Implementing a Simple Web Server using Ballerina

Photo by Thomas Jensen on Unsplash

In this post we’ll be implementing a Web Server using the Ballerina programming language. It is a simple web server which can serve files off a url. It wont have all the gimmicks such as filters, stuff related to security and etc like in Tomcat.

We’ll also build a quick website using “create-react-app” which will then be served by the web server as a website.

Note: We will be using Ballerina 1.1.3 version to implement the web server.

Web Server Implementation

The Ballerina service that we are implementing is an unsecured service(you can secure it later on) that has 2 resource functions. One resource function to serve the files which would directly map to the URL path. Another resource function to serve static content. The web server would serve files placed in a folder called “app”.

The implementation of the “serverHtmlFiles” resource function uses the “rawPath” value from the request. This value represents the path of the requested url. If the requested url is “http://0.0.0.0:9090/hello-world/say/john”, the “rawPath” would have the value “/hello-world/say/john”. The “rawPath” value is assigned to the “requestedFilePath” variable with “app” prepended to it as thats where we are keeping our website files.

“index.html” is appended to the “requestedFilePath” variable if the path does not resolve to a file. The requested file is then set as the payload and is then responded back. The content type of the file is figured based on the extension of the requested file. The “MIME_MAP” map contains the extension to content type mapping. Depending on the requested file, the content type is selected. “application/octet-stream” is used if a matching content type is not found. You can add more content types late on for your needs.

Static content such as “css” and “js” files are captured by the “serverStaticFiles” resource function.

Website Implementation

The website we are implementing is called “Doggo World”. It just has one page with an image. Following steps were followed in implementing the website.

1. Use “npx create-react-app doggo-world” to create the application.
2. Modify the “App.js” file to have a photo of a husky(dog).
3. Execute “npm run build” which generates the build contents to the “build” folder.

Thats all! There are no specific changes related to Ballerina that needs to be done to the website implementation. See the source code at https://github.com/hemikak/doggo-world

Copy the contents generated in the “build” folder to the “app” folder we created earlier. So now we would have the following folder structure.

hemikak@Hemikas-WSO2-MacBook-Pro:webserver$ tree -L 3
.
├── app
│   ├── asset-manifest.json
│   ├── favicon.ico
│   ├── img
│   │   └── doggo-greeter.jpg
│   ├── index.html
│   ├── manifest.json
│   ├── precache-manifest.f30d35e0aa9a9e7729ddf8e0d89c822f.js
│   ├── service-worker.js
│   └── static
│       ├── css
│       │   ├── main.d85b4269.chunk.css
│       │   └── main.d85b4269.chunk.css.map
│       └── js
│           ├── 2.65aa1cca.chunk.js
│           ├── 2.65aa1cca.chunk.js.map
│           ├── main.c4b2dd38.chunk.js
│           ├── main.c4b2dd38.chunk.js.map
│           ├── runtime~main.a8a9905a.js
│           └── runtime~main.a8a9905a.js.map
├── web_server.bal

View the Website

All we now have to do it start up the webserver. To do this use the “ballerina run” command.

$> ballerina run web_server.bal
Initiating service(s) in 'web_server.bal'
[ballerina/http] started HTTP/WS endpoint 0.0.0.0:9090

Go to http://0.0.0.0:9090 on your browser and you should see the website.

Thats it!. This post explains how you can write your own webserver with just a little bit of code using Ballerina. You can extend the code to meet your needs and so on.