Setting up XAMPP environment

You,•dart + flutter
Back

How to setup a dev environment for ... type of questions & A.

how to setup XAMPP Apache htdocs

how to setup a web server

At some point in your development journey of HTML/web, you must stop pointing your browser directly at file://your/path/somefile.html

Learn to quickly put up a local web server and render local files

under Apache

Navigate to location where Apache is installed and locate the htdocs folder. + for example, if you installed under c:\xampp + if you have a file somefile.html within c:\xampp, i.e. c:\xampp\somefile.html + start up the Apache web server after bringing up the Xampp control panel (How: click the start button next to Apache) + open a browser of your choice and navigate to http://localhost/somefile.html (opens in a new tab) + if you know what a port is, if you have setup a port other than default 80 on apache, say 8088 then, browser to http://localhost:8088/somefile.html (opens in a new tab)

Python 2

If you have Python 3 installed... (time to move to 3 and other than that ...)

Change directory into the folder where your file some.html or file(s) exist using the command cd /path/to/your/folder

Start up a Python web server using the command 
python -m SimpleHTTPServer

This will start a web server to host your entire directory listing at http://localhost:8000 (opens in a new tab)

You can use a custom port python -m SimpleHTTPServer 9000 giving you link: http://localhost:9000

This approach is built in to any Python installation.

Python 3

Do the same steps, but use the following command instead python3 -m http.server

VSCode

If you are using Visual Studio Code you can install the Live Server extension which provides a local web server enviroment.

use the npm http-server

(if you already have Node.js/npm )

Install http-server by typing npm install -g http-server

Change into your working directory, where your some.html lives

Start your http server by issuing http-server -c-1

This spins up a Node.js httpd which serves the files in your directory as static files accessible from http://localhost:8080 (opens in a new tab)

The above example is only to spin up a html file via a web server (http server). You will probably be doing much more than just an html file if your development itself is based on node.

Ruby

If your preferred language is Ruby: ruby -run -e httpd . -p 8080

PHP

Of course PHP also has its solution. php -S localhost:8000

Kind thanks to https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local (opens in a new tab)