Search code examples
flutterwebwebserverdesktop

Hosting a web server in a local enviroment using only Flutter


Is it possible to host a Flutter web app on a local environment using a Flutter desktop-based app?


Solution

  • The google-search for a solution like this can be difficult, since it involves many keywords that lead to similar situations (online hosting when you need a local solution, command-line only solution, and so on).

    After some digging, I ended up using the shelf package to deploy my own Flutter web app on a local network. I developed this for Windows only, so I can't guarantee it will work on other platforms. First thing to do is obviously adding the shelf package in your pubspec.yaml: after that, this is how my main method looks like

    import 'package:shelf/shelf_io.dart' as shelf_io;  
    import 'package:shelf/shelf.dart' as shelf;  
    import 'package:shelf_router/shelf_router.dart' as shelf_router;  
    
    [...]  
    
    void main() async{  
    
    [...]    
    
      var secureContext = SecurityContext();  
      try {  
        //privKey and cert are the String names of the two files for the SSL connection,  
        //placed in the root directory of the flutter project or along with the .exe  file (when released)
        secureContext.usePrivateKey(privKey);  
        secureContext.useCertificateChain(cert);  
      } catch (error) {  
        logger.e("Error on init SecurityContext");  
      }
      try {  
        //this is the handler that deploys the files contained in 'webAppFolder': I just simply pasted the result of  
        //the flutter webapp building inside (the index.html file is the default one for flutter web)   
        //and put the folder in the root of the flutter project (or, again, in the same folder with the .exe file when released)
        final _staticHandler = createStaticHandler("webAppFolder", defaultDocument: 'index.html');    
    
        //this I kept just for a reminder on how to deploy a static page, if needed
        final _router = shelf_router.Router()  
          ..get(  
            '/time',
            (request) => shelf.Response.ok(DateTime.now().toUtc().toIso8601String()),  
          );  
      
        final cascade = shelf.Cascade()   
            .add(_staticHandler)  
            .add(_router);  
      
        try {  
          var server = await shelf_io.serve(  
            cascade.handler,  
            InternetAddress.anyIPv4,  
            mainPort,  //this is the number of the port on which the webapp is deployed (I load this from a .ini file beforehand
            securityContext: secureContext,  
          );  
          // Enable content compression  
          server.autoCompress = true;  
      
          logger.i("Serving at https://${server.address.host}:${server.port}");  
        } catch (err) {  
          logger.e("Error while serving");  
          logger.e(err.toString());  
        }  
      } catch (err) {  
        logger.e("Error while creating handler");  
        logger.e(err.toString());  
      }  
      runApp(MaterialApp(  
      [...]
    

    This is the part related to the deploy of a web app: since the flutter desktop app already provides a GUI, I used that to add some maintenance and testing utilities to check if everything is working fine.
    For more details regarding shelf, refer to their API on their pub.dev page.