Step 1:
You will need to install the Xamp which you can download from SourceForge which you can download here: https://sourceforge.net/projects/xampp/?source=directory and this work for both Windows 32-bit and 64-bit version.
Step 2:
Once it is downloaded install the Xampp directly on C:\ drive instead of program files to make it easier to locate later on.
Step 4:
After the Xampp is installed on C:\ drive the location should be like so C:\xampp
Step 5:
Now download Notepad++ and it's free you can find it from its official website https://notepad-plus-plus.org/download/v7.5.4.html. This time you have to choose either 32-bit or 64-bit depending on the Windows 10 operating system you are using. After downloaded then install the Notepad++ and it can be anywhere you preferred most commonly in programs files (by default) that is fine.
Step 6:
Now you can write HTML document and run with localhost - in order to do so you have to create a sub-folder under C:\xampp\htdocs for example web-development folder so it reads C:\xampp\htdocs\web-development. Inside the web-development folder you can create html file that you are working on to make website. For example copy the code below and paste onto NotePad++ document and save as index.html under the C:\xampp\htdocs\web-development folder that you created.
Ensure the xampp control panel open and start Apache is started see below
Open a chrome browser and type http://localhost/web-development/index.html the browser should read and interpret the content of the file and display it on the Chrome browser. But this will be tedious if you keep typing the address every time running the file and it takes too much time. So you will need to run the file from the NotePad++ >>Run>> launch in ...as per guide below. Without the below modification the file will run as file:///C:/xampp/htdocs/web-development/index.html and will not work for .php file or javascript.
How to run the file directly from NotePad++ >> Run >> Launch in Chrome for example
Step 1: You need to create a redirect.php file using the code below. Copy the code below to NotePad++ and save it as redirect.php under the C:\xampp\htdocs folder.
<?php
$root = $_SERVER['DOCUMENT_ROOT'];
$file = str_replace('\\', '/', $_GET['file']);
$file = str_replace($root, '', $file);
header("Location: http://localhost{$file}");
?>
Step 2: Once redirect.php is create then click on Windows Start and type %AppData% in the search box and press ENTER. This will direct to AppData>>Roaming folder. Click on NotePad++ folder and edit the shortcuts.xml using NotePad++
Step 3: Add new command in the shortcuts.xml file like so.
Step 4: Testing if it works. I am using index.html file that was created under C:\xampp\htdocs\web-development folder and run it on NotePad++ and by click on Run>> Launch in Chrome Localhost. This will run the file using Chrome browser via http://localhost/web-development/index.html
NOTE: Remember always create file or folder under C:\xampp\htdocs in order to run as localhost.
No comments:
Post a Comment