May 30, 2020
Temporary Web-Hosting using XAMPP and ngrok
Since code privacy is one of the main concern, no one prefers to share their source code with anyone, but what if we wanted to share our web app with someone? Neither one prefers to choose to share the whole source code nor to buy a hosting for this purpose. Right?
Rather we would prefer to host our project on the local server and then generate a temporary sharable URL. With this, the person to whom we provide the URL can easily have a look at the project without having access to the source code. So to proceed with this option, we use the following two tools:
- XAMPP: It stands for Cross-platform, Apache, MariaDB(Mysql), PHP and Perl. It is a free, open-source and cross-platform tool to create a local server. It makes easy for us to test the web-app locally.
- ngrok: It is a multiplatform tunnelling software, which is used to establish a connection by making a tunnel in between the local server and the public endpoint such as an internet.
Steps for installing XAMPP:
Step-1: Download the XAMPP setup from the Apache Friends website.
Step-2: Open the downloaded XAMPP file for installation.
Step-3: Deactivate UAC:
Once the downloaded XAMPP file is opened, a warning will appear to deactivate the User Account Control (UAC). It is deactivated because it denies permission for writing in the C: drive. Click the ‘OK’ button to deactivate it.
Step-4: The setup wizard will open automatically after clicking on the ‘OK’ button. Now click on the ‘Next>’ button for the configuration.
Step-5: Select the installation directory where you want to install XAMPP and then click on ‘Next’.
Step-6: Select the language and then click ‘Next’.
Step-7: Now once all these preferences are selected then the installation process will begin.
Step-8: Now once all the components are unpacked and installed, click on ‘Finish’ to finish the installation.
Now after the installation process is completed, the XAMPP control panel will be opened. In the control panel, there will be different components which were selected during the installation process. The control panel looks as follows:
Steps for installing ngrok:
Step-1: Download the ngrok setup. It will be in a ZIP format.
Step-2: Unzip the downloaded file and place the ‘ngrok.exe’ file on the desktop. If you want to use it frequently then move it to the desired directory and set the path variable.
With this, we have finished setting up ngrok and both the tools are ready for use.
Starting XAMPP:
Now since the setup is completed, we are going to run the XAMPP server and host our project on the local server. To achieve this the steps are listed as follows:
Step-1: Open the XAMPP control panel and start the “Apache” and “SQL” modules.
When both the modules are successfully started, they are highlighted with the green colour as shown above.
One more way to verify this is to open any browser and search for “localhost”. If it will be in the running state then the following screen of localhost dashboard will be displayed.
Step-2: Move the file which is to be shared in the “htdocs” directory whose location is “C:\xampp\htdocs”.
Step-3: To display the moved file on the local server, switch to the browser and search for “C:\xampp\htdocs”. Then all the files in your ‘htdocs’ folder will be displayed in the browser.
Step-4: Select the file which is to be previewed or shared, like I want to share the “helloworld.php” then I will select it and it will be executed on the browser.
Since in the above steps we have started XAMPP and previewed our ‘php’ file on the ‘localhost’, it means that we are running our file on the local server successfully. It is generally started on the port number ‘80’.
Starting ngrok:
Step-1: Open ‘cmd’ (Command Prompt) and set directory where the ngrok file is placed. For example, I have moved it on the ‘Desktop’ so I will write “cd Desktop” in the cmd.
Step-2: Write the command “ngrok http 80”. Here ‘80’ is specifying the port number.
Step-3: After the above command is run, the session starts and displays the temporary URL which is to be used for sharing the project.
Finally, after starting both the tools, we are only two steps away from our goal. These steps are the most simple ones:
Step-1: Copy the URL which is mentioned in front of Forwarding in the ‘cmd’ as highlighted below:
Note: The requests made for the URL will also be displayed on the same ‘cmd’ window.
Step-2: Copy the selected URL and paste it in the browser. Then proceed the copied URL with the file name which you have to share and moved to the ‘htdocs’ directory. For me, it was the “helloworld.php” so the complete URL will be: “https://b281869f376f.ngrok.io/helloworld.php”.
Note: Once you quit ‘XAMPP’ and ‘ngrok’, the sharable link will also be disabled.
Finally, this URL is the one which can be shared to whom so ever you want to share your project by hosting it on the local server ‘XAMPP’ and generating a temporary URL with the help of ‘ngrok’ by establishing a pipeline in between your server and the person with whom the project is shared.
#Learntocode Happy Learning!😊
