LAN Cross-Platform Application Using XAMPP and Flutter Markup Language in under 10 Minutes
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 XAMPP on a LAN connection, no code required. This will be accessible from any device on your local network.
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 XAMPP for a LAN connection.
- Configuring XAMPP to run an apache http server on your LAN network.
- Serving the Flutter Markup Language (FML) files from the XAMPP apache http server to any device on your local network using your IP address on port 8080.
- Connecting to and running the FML app on web browser over LAN.
- Running the FML app on mobile as an app store application over LAN.
- Running the FML app on desktop as an application over LAN.
- 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 XAMPP, 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 XAMPP and FML work on Linux, Mac and iOS as well. Part 1 will likely differ for Mac and Linux.
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 hosted 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. Temporary fully-online development is also possible by using ngrok. A guide to ngrok setup and configuration can be found here.
Part 1: Install and Setup XAMPP
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, you can skip this step and check out the Server Configuration Guide for your preferred solution.
- First, you will need to download XAMPP for your hosting platform at https://www.apachefriends.org/.
2. Next you will need to setup XAMPP. Start by launching the installer you’ve just downloaded. Click next and uncheck all of the options other than the base package (unless you are familiar with XAMPP and would like to use its other features) and click next.
3. Take note of the folder it will be saved in, as you will need to access this folder in later steps. Continue to click next until you get to the installation bar.
4. Windows will prompt you with a Defender Notification. Ensure you check the box “Public Networks” and click “Allow Access”.
5. If XAMPP does not open automatically, search for XAMPP in the Windows Bar. Right click and select “Run As Administrator” on the app called XAMPP Control Panel. Click yes when prompted to “Allow XAMPP to make changes”. You should see the following window:
6. Next we will configure the XAMPP apache server so you can access it from any device in your localnetwork. First we are going to open apache > config > Apache (httpd.conf)
7. The document httpd.conf will open. Ctrl + F search for “Listen 80” and replace this line with “Listen 8080” and save the document. You can close this window.
8. Next, we are going to get the IPv4 address from our local machine. To do this, open the Command Prompt by clicking windows > and searching for Command Prompt. Once the window opens, you will type “ipconfig” and hit enter.
note: you can also find your IP address by going to the taskbar, select Wi-Fi network > the Wi-Fi network you’re connected to > Properties. Under Properties, look for your IP address listed next to IPv4 address.
9. Depending on which method you are using to connect to the internet, you will use the IPv4 Address under that section. In our case, we are using wifi, which can be found under “Wireless LAN adapter Wi-Fi 2". Write down “http://YOUR_IPv4:8080”.
http://YOUR_IPv4:8080
in our case:
http://192.168.3.191:808010. Next, open apache > config > Apache (httpd-xampp.conf).
11. The document httpd-xampp.conf will open. You are going to look for this code block in the document:
<Directory "C:/xampp/phpMyAdmin">
AllowOverride AuthConfig
Require local
ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
</Directory>12. Replace the line “Require Local” with “Require all granted” and save the document. You can close this window.
13. The final configuration step, we are going to go to xampp > config click on service and port setting and change apache Main Port from “80” to “8080”. Click save on the current (service settings) then previous (configuration of control panel) windows.
14. Close and reopen XAMPP Control Panel, remember to right click and choose “Run As Administrator” when reopening the control panel.
15. We are going to click start on the Apache server. Make sure that under ports it says 8080, and “status change: running” is displayed in the console.
16. On your current device as well as your separate device, enter “http://YOUR_IPv4:8080" in you browser’s address bar. You should be shown the XAMPP dashboard. Ensure this works both on your local machine, as well as on an alternate device that is connected to the same network as your device running XAMPP.
Note: If this is not working, try typing in http://localhost:80 in the device running XAMPP. If you see the page above, the port is not set up correctly. If you type in http://localhost:8080 and see a page, ensure you have your devices correct IP address (above). If this is correct, check your firewall settings to ensure port 8080 is open to the firewall. There are plenty of resources to ensure this port is open and listening on both PC and Mac. Do not proceed to the following steps if you cannot connect to the XAMPP dashboard.
Part 2: Install Flutter Markup Languages Server Files
Install and Setup FML for all devices in XAMPP.
These steps will show you how to put the FML server files on your XAMPP apache server running on your local network. All devices and platforms on your network can be linked from here.
2. Once downloaded, you will need to navigate to the filepath where XAMPP is installed. We are going to open up the file within the xampp folder called “htdocs”, ours is located at “C:\xampp\htdocs”, and delete all of the contents within.
3. Extract the fml server.zip files from Step 1 to the “htdocs” folder. Ensure they are directly in the htdocs folder not in another subfolder.
4. Finally Stop and Restart the XAMPP apache server from the XAMPP control panel. Record the address from Step 1.9 as it will be what you use to connect to the FML app on all of the devices running on your network.
http://YOUR_IPv4:8080
in our case:
http://192.168.3.191:8080Part 3: Running Your FML App on Every Device and Platform
Run FML in Web.
- Enter the IPv4 address recorded from 1.8 into any browser address bar on any device connected to your network. After a brief loading screen you should see the FML default app! Your app is now running in web!
Install the FML app 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 IP address from step 1.9 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: Ensure that your device is on the same network as the one running XAMPP and that the apache server is started. This can be confirmed by entering the same IPv4 address into the browser.
If you do not see the Application Name you entered, it is most likely that the config.xml has a preset application name. We will cover changing the config in part 3.
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: Ensure that your device is on the same network as the one running XAMPP and that the apache server is started. This can be confirmed by entering the same ip address into the browser.
If you do not see the Application Name you entered, it is most likely that the config.xml has a preset application name. We will cover changing the config in part 3.
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 filepath 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:
- Visit the fml wiki.
- Check out the flutter counter app clone guide on Medium.
- Chat with other Flutter Markup Language devs on our discord.
- Subscribe to our Youtube channel for upcoming tutorials!
Remember, when moving to production or if you have not set up your own file server:
- This IP works only on your local network, 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, the source code can be downloaded and compiled. This can be customised with the domain linked automatically, your own name, logos, and app store downloads!
- 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 a temporary online file server using ngrok.
