Custom url domain in Xampp

If you are developing website in Xampp, you can use custom domain instead of localhost or You can make url like http://mydomain.local as an url for you local development.

Prepare project

I’m assuming you have website project directory in C:/xampp/htdocs/mywebsite. We want to use url http://mydomain.local. I like using .local TLD to differentiate it with actual internet url. Then, add this line in the bottom.

Edit hosts file

Open C:\Windows\System32\drivers\etc\hosts. You need Administrator Access to edit this file. mywebsite.local www.mywebsite.local

Edit httpd-vhosts.conf

This file is located in C:\xampp\apache\conf\extra\httpd-vhosts.conf. Add this code to the bottom.

<VirtualHost *:80>
  DocumentRoot C:/xampp/htdocs/
  ServerName localhost

Then, add this code and adjust with your projects.

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/mywebsite"
    ServerName mywebsite.local
    ServerAlias www.mywebsite.local
    <Directory "C:/xampp/htdocs/mywebsite">
        AllowOverride All
        Require all granted


You are done. Start or restart your Apache server. Go to http://mywebsite.local to test it. If you have any problems, drop the comments below.

SocketException: OS Error: Connection refused, errno = 111

I got this weird error when developing flutter app in windows. I have set my local apache as my API server. When I tested my API in Postman, everything is okay. Error appears when I tested API on my app with emulator.

Turn out, the problem is from emulator. Android emulator can’t communicate with or localhost. The solution is just change localhost to This IP is special alias to your host loopback interface.

You can read more about this in this docs. –>

Login page template in Flutter

One of the most common thing I made in mobile development is login page. This project is boilerplate, template, or whatever you called, of basic login page. Made with Flutter.

It has standard 2 fields, username and password with toggle which can be clicked to show/hide password.

One of the problem I got as a flutter beginner is bottom overflowed by xx pixels. This problem would appear when virtual keyboard needs to be showed. Keyboard take half of our screen, if you done your layout wrong (like page that take more than half of screen), you will got bottom overflowed error.

The solution is use SingleChildScrollView in the top widget. So, when you got this error, you can scroll through our overflowed part of the page.

This project is on github –>

UPDATE : check the web preview here!!