If you are wanting this feature, you need to get some service like browserSync running. I think you'll need to use a more real world web server than the build in one, but I'm not sure.
I've had this running by using Laradock locally, once Laradock is set up it's pretty easy to get browswersync running and get live refreshes.
NOTE: The instructions are not dependent on XAMPP. You could use any apache/nginx server setup stack. i.e LAMP to follow along.
This assumes that you're using XAMPP
Install XAMPP.
Move/set up your project to thehtdocs
folder of XAMPP. (C:\xampp\htdocs
)
NOTE: Moving forward, I'll useyour-project
to mean your actual project name.
Set up a virtual host for your project. i.e:
Open the file:C:\xampp\apache\conf\extra\httpd-vhosts.conf
Then add the tags below at the end of this file:
<VirtualHost *:80>
ServerAdmin [email protected]
DocumentRoot "C:\xampp\htdocs\your-project\public"
ServerName local.your-project
<Directory "C:/xampp/htdocs">
Options Indexes FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all
Require all granted
</Directory>
</VirtualHost>
You may change theServeAdmin
andDocumentRoot
as you which.
Adjust yourhosts
file to always route to127.0.0.1
when you access the project from the browser.
For "Windows Operating System" users, you will find the file at:C:\Windows\System32\drivers\etc\hosts
Open thehosts
file and add the line below at the end:
127.0.0.1 local.your-project
Ensure that the necessary PHP extensions are enabled/installed to smoothly run your project.
You may need to remove the preceding;
characters on the respective lines to enable these extensions.
For "Windows Operating System" users, you will find the configuration file at:C:\xampp\php\php.ini
Open yourphp.ini
configuration file and confirm that the extensions below are enabled.
; Directory in which the loadable extensions (modules) reside.
; http://php.net/extension-dir
;extension_dir = "./"
; On windows:
extension_dir="C:\xampp\php\ext"
extension=bz2
extension=curl
extension=fileinfo
extension=gd
extension=gettext
extension=intl
extension=mbstring
extension=exif
extension=openssl
extension=pdo_mysql
extension=mysqli
extension=php_openssl.dll
extension=php_ftp.dll
NOTE: All commands below assume that your terminal/command prompt is pointing at your project root directory. i.e:cd C:\xampp\htdocs\your-project
.
NOTE: The commands below assume that Node.js and NPM are already installed on your computer.
Installbrowser-sync
npm i browser-sync --save-dev
Installbrowser-sync-webpack-plugin
npm install browser-sync-webpack-plugin --save-dev
Install any pending unrun dependencies.
npm install
Open the file atyour-project-root-directory\webpack.mix.js
Add the configuration below at the end of that file.
// ...
mix.browserSync({
port: 8089,
proxy: {
target: "http://local.your-project/",
}
});
sass
in your application, you may wish to include the dependencies below.npm install sass-loader sass resolve-url-loader --save-dev
npm run dev
npm run watch
http://localhost:8089/
This denotes theport
you set up while configuringbrowserSync
.
browserSync
will refresh the page automatically whenever you change a project file.Whenever you start working on your project, just make sure that both MySQL and Apache services are running. Then runnpm run watch
in your terminal forbrowserSync
to start listening for file changes.
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Find the answer in similar questions on our website.
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.
PHP (from the English Hypertext Preprocessor - hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites.
The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/
Laravel is a free open source PHP framework that came out in 2011. Since then, it has been able to become the framework of choice for web developers. One of the main reasons for this is that Laravel makes it easier, faster, and safer to develop complex web applications than any other framework.
https://laravel.com/
JavaScript is a multi-paradigm language that supports event-driven, functional, and mandatory (including object-oriented and prototype-based) programming types. Originally JavaScript was only used on the client side. JavaScript is now still used as a server-side programming language. To summarize, we can say that JavaScript is the language of the Internet.
https://www.javascript.com/
Node.js is an open source server-side framework built on top of the Google Chrome JavaScript Engine. The number of sites using NodeJS has increased by 84,000. It is one of the busiest cross-platform JavaScript runtimes. Node.js is an asynchronous, single-threaded, non-blocking I / O model that makes it lightweight and efficient. The Node.js package ecosystem, npm, is also the world's largest open source library ecosystem.
https://nodejs.org/
DBMS is a database management system. It is designed to change, search, add and delete information in the database. There are many DBMSs designed for similar purposes with different features. One of the most popular is MySQL.
It is a software tool designed to work with relational SQL databases. It is easy to learn even for site owners who are not professional programmers or administrators. MySQL DBMS also allows you to export and import data, which is convenient when moving large amounts of information.
https://www.mysql.com/
Welcome to the Q&A site for web developers. Here you can ask a question about the problem you are facing and get answers from other experts. We have created a user-friendly interface so that you can quickly and free of charge ask a question about a web programming problem. We also invite other experts to join our community and help other members who ask questions. In addition, you can use our search for questions with a solution.
Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.
Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.