{"id":24077,"date":"2015-06-09T21:01:43","date_gmt":"2015-06-09T13:01:43","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24077"},"modified":"2024-04-04T02:19:47","modified_gmt":"2024-04-03T18:19:47","slug":"access-localhost-public-address","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/access-localhost-public-address\/","title":{"rendered":"How to Make Your Local Server Publicly Accessible"},"content":{"rendered":"

For nearly a decade, I\u2019ve navigated the challenges of developing websites, with one of the trickiest aspects being the coordination between local development environments and live testing scenarios. Working locally is efficient and speedy, yet it lacks the capability for remote viewing. Moreover, migrating work often involves intricate database operations, such as renaming tables and adjusting values.<\/p>\n

In this article, I\u2019m excited to share a straightforward method that allows you to operate a local server<\/strong> which can be accessed from your phone and other mobile devices<\/strong> without a hitch, and even share your projects over the Internet. This means you can showcase your work to clients directly from the comfort of localhost.<\/p>\n

Setting Up Your Local Development Environment with Vagrant<\/h2>\n

Not long ago, I shared insights on Hongkiat about using Vagrant<\/a> for local development, so I\u2019ll touch only on the essentials here. For an in-depth guide, do check out that article!<\/p>\n

First off, download and install VirtualBox<\/a> and Vagrant<\/a>. These free tools help you set up a virtual machine to run your server smoothly.<\/p>\n

Next, create a \u201cWebsites\u201d folder in your main user directory to organize your projects. This will be \/Users\/[username]\/Websites<\/code> on macOS and C:\/Users\/[username]\/Websites<\/code> on Windows.<\/p>\n

Inside this directory, make a new folder named wordpress<\/code> for your virtual machine. The structure allows each site within Websites<\/code> to operate on its own virtual machine. Although you could technically run multiple sites on a single machine, I prefer organizing them by platform \u2013 such as WordPress, Laravel, Custom.<\/p>\n

This guide will focus on setting up a WordPress site.<\/p>\n

In the WordPress<\/code> folder, we\u2019ll need two key files: Vagrantfile<\/code> and install.sh<\/code> for configuring our virtual machine. Jeffrey Way has provided excellent starter versions of these; grab his Vagrantfile<\/a> and install.sh<\/a>.<\/p>\n

Open your terminal, navigate to the WordPress<\/code> directory, and run vagrant up<\/code>. It might take some time for the box to download and install, so why not enjoy a coffee and explore 60+ WordPress tips<\/a> in the meantime?<\/p>\n

After completion, visiting 192.168.33.21<\/code> should display your site. Your main content folder will be the html directory inside the WordPress folder, where you can begin to add files, install WordPress, or undertake any development tasks you have in mind.<\/p>\n

For more detailed instructions on setting up virtual hosts and domain mapping like mytest.dev<\/code>, make sure to consult the complete Vagrant guide<\/a>.<\/p>\n

Testing Local Websites on Mobile Devices with Gulp<\/h2>\n

As you develop a website, considering how it responds on various devices is crucial. You can mimic smaller screens by adjusting your browser window, but this doesn\u2019t fully replicate the experience, especially when considering high-resolution retina displays.<\/p>\n

The goal is to view your local site on your mobile devices seamlessly, which is straightforward as long as your devices share the same network.<\/p>\n

We\u2019ll leverage Gulp<\/a> and Browsersync<\/a> to achieve this. Gulp streamlines the development process through automation, while Browsersync offers a robust solution for creating a local server that synchronizes actions like scrolling, clicks, and form inputs across multiple devices.<\/p>\n

How to Get Started with Gulp<\/h2>\n

Getting Gulp up and running is straightforward. Simply visit the Getting Started<\/a> guide for detailed instructions. First, you\u2019ll need NPM (Node Package Manager), which comes with Node.js. For installation guidance, head to the Node.js website<\/a>.<\/p>\n

After installing Gulp globally with the command npm install --global gulp<\/code>, the next step is to integrate it into your project. Do this by running npm install --save-dev gulp<\/code> in your project\u2019s root directory and then create a gulpfile.js<\/code> file there.<\/p>\n

For now, we\u2019ll start with a simple line in that file to confirm our use of Gulp.<\/p>\n

var gulp = require('gulp');<\/pre>\n
To explore the full potential of Gulp, like script concatenation, Sass and LESS compilation, image optimization, and more, take a look at our Guide To Gulp<\/a>. This guide will mainly focus on the process of setting up a server.<\/p>\n
Integrating Browsersync with Gulp<\/h2>\n
Adding Browsersync to your Gulp setup is a simple two-step process. First, we install it using npm, and then we configure it in our Gulpfile.<\/p>\n
In your project\u2019s root directory, execute the npm install browser-sync gulp --save-dev<\/code> command in the terminal to install Browsersync. Next, open your Gulpfile and add the following code:<\/p>\n
var browserSync = require('browser-sync').create();<\/pre>\n
This line informs Gulp that Browsersync will be part of our toolset. The next step is to set up a Gulp task to specify how Browsersync should function.<\/p>\n
gulp.task('browser-sync', function() {\r\n browserSync.init({\r\n\t proxy: \"192.168.33.21\"\r\n\t });\r\n });<\/pre>\n
After configuring, launching a server is as simple as typing gulp browser-sync<\/code> in the terminal. You\u2019ll see a display similar to the image below.<\/p>\n
\"Browsersync<\/figure>\n
The interface provides four key URLs, each serving a distinct purpose:<\/p>\n