To deploy the Flutter web app in Apache webserver or any hosting platform is pretty simple and straightforward.
In this post, I am going to share how to build your Flutter project for the web and deploy it on an apache webserver.
I have deployed several Flutter apps in Hostinger hosting services and found them working fine. So, this should be the solution for you if you are searching for how to deploy a flutter web application in Hostinger hosting service.
1. Build Flutter Web
Before building your flutter application for deployment, make sure that there are no errors. Check out how to run a flutter project here.
To generate a web version of your flutter project run the following command:
flutter build webNo errors? Great. Proceed to the next step.
2. Zip the web folder in the build folder of your Apache web server
Inside your project, you will see that there is a directory named build. Inside it, you see several directories. We are interested in the web directory.
web directory is where you will see the files you need to deploy your application on a web server.
Before you zip the web folder, rename the folder as per your requirement.
Or create a new folder and copy all the files and directories inside the web directory.
3. Copy the zipped directory into your webserver
Copy the zipped directory into your webserver and unzip it in your desired directory.
To make your new web app accessible, make sure that your Apache web server or hosting service is up and running.
4. Edit root path in index.html
After unzipping the directory, you will have to use a code editor to edit index.html file.
If your application is not placed in the root directory of your web server, you will have to tweak the root path in index.html to make your application accessible.
Here is what the index.html script would look like:
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-->
<base href="/">
.
.
.
.Code language: HTML, XML (xml)Edit the line <base href="/"> as per your deployment structure. Say you are deploying it as yourdomain.com/web then specify the <base href> as:
<base href="/web/">
5. Your web app is up and running
If every configuration goes correctly you will see that your web application is up and running.
That’s it.
If you come across any issues share them in the comment box below. I will be more than happy to assist you.
if deploy Flutter web in Apache webserver is ok,
how to get client ip in Flutter web?