Online Cross Platform Application in Under 10 Minutes Using ngrok and Flutter Markup Language

7 min readJan 18, 2023

Today, we are going to look at how to get an application up and running on every platform in under 10 minutes (total) using Flutter Markup Language and ngrok, no code required. This will be accessible from any device with an internet connection.

Flutter Markup Language is a simple way to build powerful applications. It works across all platforms and is interpreted rather than compiled, allowing you to instantly update and deploy applications on every platform from a single hosted project. For an overview of FML, visit fml.dev, visit the wiki, or check out the medium articles An Introduction to Flutter Markup Language and Benefits and Use Cases of Flutter Markup Language.

What we will cover:

Setting up ngrok for an online temporary file server from your desktop.
Serving the Flutter Markup Language (FML) files from the ngrok http server to any device via a temporary url.
Connecting to and running the FML app on web browser over the internet.
Connecting to and running the FML app on mobile as an application over the internet.
Connecting to and running the FML app on desktop as an application over the internet.
A brief overview of editing and building your own application from the FML server files.

The two pieces you will need to do this are ngrok, and a copy of Flutter Markup Language. For our purposes we are going to be working on a Windows PC and an Android device, but ngrok and FML work on Linux, Mac and iOS as well.

Note: This is a solution for quick cross platform development only. Other prerequisites will be required before releasing your app to the public. Your own domain and file server can greatly improve the development experience. A self-compiled copy of FML can automatically open your app without having to link a url. This can also be configured with your own logo, icons, and app store version. Quick start local development on web or desktop is also possible without external software or file servers. LAN development is also possible by setting up your own LAN http file server. A guide for doing this using XAMPP and apache can be found here.

Part 1: Install and Setup ngrok

With FML being an interpreted language, it requires a file server to serve the application files and templates. If you are familiar with http file serving or aren’t interested in ngrok, you can skip this step and check out the Server Configuration Guide for your preferred solution.

First, you will need to sign up for an ngrok account at https://ngrok.com/.

2. Next you will need to download and unzip ngrok. Remember where you’re extracting the .exe file to.

3. Open ngrok (double click the .exe) and Run the setup command to link your copy of ngrok to your account. These commands should be on the page after you’ve signed up.

4. Create a folder on your computer to place your project in, we are going to call ours “FML_APP” for ease of use.

5. Run the ngrok command to start your file server:

ngrok http "file:///YOUR_PATH_HERE"

In our case the command is:

ngrok http "file:///C:\Users\isaac\Documents\Developer\Programs\FML_APP"

Remember, you can enter your folder and copy the filepath if you are unsure.

6. ngrok will connect and generate a url where your app can be accessed. Keep this running for the next steps!

note: if ngrok immediately closes after opening, check for and kill any ngrok processes in the task manager, or restart your computer. If you have any other issues running ngrok, you can troubleshoot them on their website.

Part 2: Install and Link Flutter Markup Language

Install and Run FML for web.

To download fml for web, click here to download the FML server file.

2. Once downloaded, extract the zip file to the folder “FML_APP” that we created in Part 1.1.

3. Now enter the url ngrok printed in Part 1.6 into your web browser, if you stopped ngrok restart it by running the same command as 1.5. You may be prompted with a would you like to connect message.

4. After a quick load in your app will be running in the web browser! This will work on both mobile and desktop browsers.

Note: each time you restart ngrok, you will receive a new url for your application.

Install FML from the app store on your device and link your app.

5. Download the app called Flutter Markup Language on your device from the play store for android, or from the app store for iOS. This will allow you to connect to your http file server and render your application.

6. Open the application. You should be prompted with the following screen:

7. Click the add app button. You will need to supply it with a name for your app, in this case we will call it sample app, as well as the same url from ngrok step 1.6 that you entered into your browser.

8. Click connect and click the icon that has added your application! There you have it, the same app running in mobile.

Note: each time you restart ngrok, you will have to reconnect your application as the url will change. You can delete and reconnect your app within the FML app.

Download and link the FML desktop application

The steps here are going to be very similar to installing for mobile.

9. Download and launch the fml.exe app for windows or macOS.

10. Once you have installed the application, follow steps 6–8 from the mobile section to connect your app. Tap the icon to open your linked app!

Note: each time you restart ngrok, you will have to reconnect your application as the url will change. You can delete and reconnect your app within the FML app.

There you have it, a custom application running on all platforms in under 10 minutes!

Part 3: Building Your App

FML comes with a basic app that can be edited and removed. You can see a large library of functional examples, the FML website, and the wiki to help your development. The app starts on the main.xml file in the templates folder.

To edit your application you can use any text editor. Once saved, simply refresh the window on any device.

If you would like to create a new file for the home page that is not named main.xml, you can change the HOME_PAGE to your desired file path in config.xml in the main directory of “FML_APP”.

For more information on how to build out your application and using FML, you can:

Remember, when moving to production or if you have not set up your own file server:

This url is temporary, and once development is complete you will need your own domain name, file server.
Connecting the app through the FML app works great and can be used in production! For a more custom feel and less user friction, the source code can be downloaded and compiled. This can be customized with the address linked automatically, your own name, logos, and app store download!
Be on the lookout for a guide on each of these, as well as setting up a serverless api using FML and Firebase.
If you would like to set up a permanent server, you can look at googles cloud guide with apache, or set up your own LAN server using XAMPP.

Chat with us on Our discord.

Visit The Wiki.

Subscribe to Our YouTube Channel.