Hosting Your Flutter Web App with a Static IP on Your Local Machine
Have you ever wanted to seamlessly host and showcase your Flutter web application on your local machine, ensuring it’s accessible across your Internet with a static IP address? This guide will explore how to configure and host your Flutter web application with a static IP address, empowering you to efficiently share your website across the internet. You can check out my static IP http://183.87.163.184/ you will be able to see my portfolio website.
Before delving into configuration details, let’s first grasp the concept of IIS (Internet Information Services) in Windows.
Internet Information Service(IIS) is a web server developed by Microsoft that operates on Windows systems to deliver requested HTML pages.
With the help of IIS, our website will automatically be hosted when our machine is turned on.
Generate your Flutter project’s web build by executing the command `flutter build web`.
Next, open the Control Panel, go to Programs, then click on Programs and Features. From there, select Turn Windows features on or off. Check both Internet Information Services and Internet Information Services Hostable Web Core.
Here, open IIS Manager and navigate to Sites -> Add Website.
Enter the site name and specify the folder path to your Flutter web project’s build folder (typically `projectdir/build/web`). Bind the port to 80. After clicking OK, you will find your website listed under Sites in IIS Manager.
Now, if you attempt to open your localhost URL (`http://localhost:80/`), you should be able to view your website.
Hosting your Website in Static IP
To allow incoming requests to reach your system when someone accesses your static IP, you’ll need to configure port forwarding on your router.
To find your static IP address, open your Wi-Fi router’s login URL (typically http://192.168.0.1 or http://192.168.1.1), navigate to the Network tab, and there you would be able to see your Static IP Address.
If your IP address changes unexpectedly, contact your Internet Service Provider (ISP) to obtain a static IP address.
Attempting to access the static IP results in an Internal Server Error.
To enable port forwarding, configure the router so that any requests to the static IP address are forwarded to your local machine.
For configuring these changes you might need to get the IPv4 of your System
On your router’s virtual machine setup, add your machine’s IP address. Since it’s an HTTP request, select TCP as the protocol. Ensure the port you configure matches the one set in IIS.
Now, if you try to access your IP address, you should be able to view your website.
If you try to access this static IP http://183.87.163.184/ you will be able to see my portfolio website.
Note that the website will only be accessible when your local machine is turned on.
Do you know you can press the clap👏 button 50 times? The higher you go, the more it motivates me to write more stuff for you guys!
Hello, I am Agnel Selvan. You can find me on Linkedin or stalk me on GitHub.
If you like my work or the free stuff on this website and want to say thanks or encourage me to do more, you can buy me a coffee!
