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.
A Bit More Detail
Learn more about running websites locally on Tuts+.
- A Quick Introduction to BrowserSync tutorial
- The Command Line for Web Design: Live Reload & BrowserSync tutorial
- Source files for this tutorial
60 seconds?!
This is part of a new series of quick video tutorials on Tuts+. We’re aiming to introduce a range of subjects, all in 60 seconds–just enough to whet your appetite. Let us know in the comments what you thought of this video and what else you’d like to see explained in 60 seconds!
Subtitles/CC
Here you’ll find the content of the “captions.sbv” file, which we can use to add subtitles to the screencast. Turn subtitles on by clicking the Subtitles/CC button on the player–click the settings gear icon to select the language:
0:00:00.179,0:00:03.659
Here’s three ways to set up local site
previews in sixty Seconds
0:00:03.659,0:00:07.350
First, Prepros. Install and run the
prepros
0:00:07.350,0:00:11.259
app for your operating system. Drag your static
site project folder
0:00:11.259,0:00:14.330
onto the interface. Right click the
project name
0:00:14.330,0:00:17.590
and choose “Open preview”
0:00:17.590,0:00:21.390
Second, BrowserSync. In your project folder
run
0:00:21.390,0:00:24.770
npm init, then install BrowserSync
and Gulp
0:00:24.770,0:00:28.740
with sudo npm install gulp browser-sync
–save-dev
0:00:28.740,0:00:32.590
Make a gulpfile.js with the right
code in it
0:00:32.590,0:00:36.000
(download the source files for help on doing
this).
0:00:36.000,0:00:39.600
Run gulp browser-sync.
Third, XAMPP
0:00:39.600,0:00:43.090
for projects using PHP. Install XAMPP for your
0:00:43.090,0:00:48.100
operating system. Put yourprojectfolder
inside XAMPP’s htdocs folder
0:00:48.100,0:00:52.239
Run XAMPP and start the Apache and MySQL
services
0:00:52.239,0:00:55.559
In a browser go to local host/
0:00:55.559,0:00:58.860
yourprojectfolder
That's three local site preview methods
0:00:58.860,0:00:59.660
in 60 seconds
