1. Web Design
  2. XAMPP

Three Local Site Preview Methods in 60 Seconds

Read Time:1 minLanguages:
This post is part of a series called 60 Second Video Tutorials.
HTTP Status Codes in 60 Seconds
Color for Attention and Depth in 60 Seconds

Here are three ways to setup local website previews, in 60 seconds! First, we’ll look at Prepros. Then we’ll use BrowserSync with Gulp. Lastly, we’ll look at XAMPP. Done.

Three Local Site Preview Methods

1. Prepros

Install and run the prepros app for your operating system. Drag your static site project folder onto the interface. Right-click the project name and choose Open preview.

2. BrowserSync

In your project folder run npm init, then install BrowserSync and Gulp with sudo npm install gulp browser-sync –save-dev. Make a gulpfile.js with the right code in it (download the source files for help on doing this). Run gulp browser-sync.


For projects using PHP install XAMPP for your operating system. Put “yourprojectfolder” inside XAMPP’s “htdocs” folder, then run XAMPP and start the Apache and MySQL services.

In a browser go to localhost/yourprojectfolder. That’s it!

Useful Resources

Learn more about running websites locally on Envato Tuts+.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.