Flutter Web Apache2 404 Issue when user refresh the page

Copy the entire /build/web into /var/www/html or anywhere you like

Configure Apache

Enable rewrite for apache2 server

sudo a2enmod rewrite

Then restart Apache:

sudo systemctl restart apache2

Create a .htaccess for flutter app

Create .htaccess inside /var/www/html and save it

<IfModule mod_rewrite.c>
  RewriteEngine On

  # If the requested file exists, serve it
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d

  # Otherwise, serve the index.html file
  RewriteRule ^ index.html [L]
</IfModule>

OR

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Redirect www to non-www (optional)
  RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
  RewriteRule ^ https://%1%{REQUEST_URI} [L,R=301]

  # Serve files if they exist
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^ - [L]

  # Redirect all other requests to index.html
  RewriteRule ^ /index.html [L]
</IfModule>

Configure the Apache config file

I am using /etc/apache2/sites-available/default-ssl.conf and the <Directory> along with the current configuration.

<VirtualHost *:443>

    DocumentRoot /var/www/html

    <Directory /var/www/html>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

Once done run sudo apachectl configtest if it returns Syntax OK then your configuration is all alright, now move forward and restart the server sudo service apache2 restart.

Now there will be no issue when user try to visit any endpoint and it will return error when hit refresh button.

Written on October 23, 2024