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 web
No 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 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
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
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:
Code language: HTML, XML (xml)
<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="/"> . . . .
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:
5. Your web app is up and running
If every configuration goes correctly you will see that your web application is up and running.
If you come across any issues share them in the comment box below. I will be more than happy to assist you.
Kuzu Zangpo la! I am Sonam Dargay. I am a full-time software developer. Apart from 9-5 office works, I am a tech enthusiast, blogger, and dreamer.
I graduated from the College of Science and Technology(CST), affiliated with the Royal University of Bhutan.