The Modelit Embedded HTTP server for Matlab can be used to call Matlab functions over the web. The result of this call will be for example a json or xml object with the result of the Matlab function. But what if we want to build a complete web app with a front-end in HTML and the back-end in Matlab. The front-end typically consists of one or more HTML, CSS and JavaScript files which have to be downloaded by the client's browser from the Matlab server.

In this article we will explain how you can use the Matlab Embedded HTTP server to serve files to a client, thereby making it possible to use it to deploy web apps.

Use the following code to setup the Modelit Embedded HTTP server:

>> server = modelit.web.server.Server(8081, @FileCallback).start()

server = 

  Server with properties:

    running: 1
       port: 8081
 

And define the callback (FileCallback) in a separate .m file:

function FileCallback(event)
% TableCallback - Callback called by the modelit.webserver.Server object for
% serving files.
%
% CALL:
%   FileCallback(event)
%
% INPUT:
%   event: <modelit.webserver.HttpExchange>
%     with the request data and methods to generate a response.
%
% OUTPUT:
%   No output, a response with a the contents of the requested file is
%   returned to the client.
%
% EXAMPLE:
%  server = modelit.web.server.Server(8081, @FileCallback).start()
%
%  % Open a webbrowser and type: http://localhost:8081/file/filename.ext in
%  % the address bar.

%   Copyright 2023 Modelit, www.modelit.nl

% Limit the request to HTTPGet requests
switch lower(event.getRequestMethod)
    case 'get'
        p = char(event.getPath);

        fname = fullfile(pwd, 'examples', 'resources', p);
        if isfile(fname)
            response = readBytesFromFile(fname); %this file needs ##readBytesFromFile##
            event.send(200, response);
            return
        else
            event.send(404);
            return
        end

    otherwise
        event.send(405); % Method not allowed
        return;
end
end

This callback will be triggered if a HTTPGet request is send to http://localhost:8081 in case another HTTP method (e.g. HTTPPost) is used the errorcode 405: Method not allowed will be returned.

Now, if a HTTPGet request arrives at http://localhost:8081 the getPath() method of the event object returns the path after the hostname: For example if the request was http://localhost:8081/html/index.html the method returns '/html/index.html'.

this result can now be used to locate the request file on the filesystem of the server. In this case the function is trying to locate the file relative to the path fullfile(pwd, 'examples', 'resources')

Use the function readBytesFromFile which is included in the toolbox to read the request file from disk. If required adjust the MIME-type of the returned result by using the method event.addResponseHeader('Content-Type', MIME_TYPE) in case of an HTML file the MIME_TYPE is 'text/html' see https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types for an overview of possible types.

If the file is not found, the standard HTTP errorcode 404 is returned.

Note that this FileServer also works when files, e.g. .css, .js or images, are referenced within an .html file.