How to deploy Flutter web in Apache webserver

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

Build folder in your project (highlighted in this screenshot)

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="/">
.
.
.
.

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.