FREELessons: 14Length: 2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.9 Local Site Previews

Hey, welcome back to Linux for Web Design. In this video, we're gonna go through some of the options that you have for setting up local previews when you're working on your sites. So we're going to have a little look at ways you can set up local previews for static sites and a couple of options that you have for dynamic database-driven sites. So I'm gonna give you a few different options. And the first one, and this is what I find to be pretty much the easiest way to get a preview of a static site, is just by using an extension along with Atom Editor. So I'll show you which one it is, so we're just gonna go to Packages, Settings View, and Install Packages. And then we're gonna search for live server. And the one we want is this one, asem-live-server. So I already have this one installed. Once you do have it installed, all that you need to do to spin up a live preview that will also have live reload. Is to just go up to Packages and then choose atom-live-server, and Start Server. Now that's spun up a preview on localhost and then it automatically opens it up in your default browser for you. And if you make any changes to the content of your site, so I'll just add in Some Changes. Then you get an automatic refresh, and you'll see that change right away. So that's really good if you're just using plain code and you don't have anything that you need to compile like Pug templates, or Stylus, or SAS, for example. If you do have code that you need to compile, then the next option that I would recommend on Linux is just working with a product called Prepros. So there's a free version of Prepros that can do pretty much everything that you need it to. Or there's a pretty cheap Pro version, which is $29 and it gives you some extra functionality. Things like being able to push your previews out to mobile devices that you have on the same Wi-Fi Network as your work machine, that's really useful. So to get it installed on Linux just click the Download button. Now unfortunately there is only a deb file, so this is just one of those things that I was talking about earlier. You will get a wider range of software compatibility if you have a Debian-based system, so that's just something to bear in mind. So then just go ahead and download that deb file and then install it on a machine in the way that we described earlier. And then here's how Prepros works. So all you have to do is you just grab your project folder from your file manager and you just drag it in. And then Prepros will automatically detect any file type that needs compilation. And then it will just automatically compile it and write the results into the correct file format. So you can see here, it's just taking that scss file and converting it into style.css. And you can see in the list here that it compiles quite a few languages, and that makes it very handy. And then to load a live preview all you have to do is right-click on your project, and just go Open Live Preview. Or just copy the URL and paste it into your preferred browser. So then the same thing again, we've got a live preview. It will automatically refresh itself whenever you make changes and including when your source files are compiled. So once again, this is the easiest way to get a preview up and running for anything that needs compilation. Now if you wanna have a bit more control over exactly what's happening in your build process and your preview process. Then your best bet is gonna be to work with something like Grunt, or Gulp, and then write yourself a Grunt file, or Gulp file, that works with browser sync. And then use the browser sync module to control your live previews. So if working with Grunt and Gulp is something that you already do, then you don't need me to run you through how that works. But what I will show you through is how to get Node installed on your computer in the first place in the Linux environment. So you can then install Grunt, or Gulp, or whatever else it is that you like to use in your build process. Now on other operating systems you might be used to downloading an executable, for example, and then just running it to install Node. But on Linux Node is on the central repository, so you can just bring it in straight from there. But you can install it with command line, and that's actually a very straightforward to go about it. And if you're working with Grunt anyway, then you're gonna be using command line, so you're probably not gonna be put off by the idea of doing that. However, even if you do use command line it's still probably gonna be helpful to you to have a graphical user interface to browse all of the packages that are available in the central repository. So you know which one to target with your command line installation. There are different graphical programs that you can use to browse different distros' central repositories. On Debian-based systems the most common one is called Synaptic Package Manager. So that can be installed on your machine to start with if you want. Just search for synaptic, and then install that straight out of the repositories. And then when you run it, you get this interface. So now we can search in here for node, I'll actually put in node.js to help us find it. And now if we scroll down we can go through until we find the correct package. And this is it right here. And we can confirm that this is the correct package that we want to install just by checking on the description down here. So if you want to install a package straight out of this package manager then you just tick this box, choose Mark for installation, confirm. And then when you're ready, just press the Apply button and that will install Node directly onto your machine. If you wanna install Node by command line, this is what you do. First you enter sudo, which elevates you to administrative privileges or super user privileges. Then we're gonna say apt-get, apt-get is the utility that we use to fetch and install software. Then we're gonna say install and then we just specify the name of the package that we want to install, which is nodejs. And by the way, this is the exact same command that you can use to install any program out the repository. So that can be sudo apt-get install or Gimp, or Synaptic, or anything else that's in the central repository. Then we hit Enter, put in our password, and then it downloads Node and installs it for you, and just like that everything is good to go. So we can just check what version of Node.js we've just installed by typing in nodejs -v, then we've got version 4.2.6. Now we also wanna install npm so we're just gonna do the same thing again, sudo apt-get install npm. It's checked everything else that needs to be installed along with npm and this is gonna download everything and put all the files in the right place for us automatically. So now I've got Node installed and up and running, and we have npm. So, then we're good to go to, in turn, install Gulp, and Grunt, and Browsersync, and whatever else we need to set up our tightly controlled build process and a local preview. All right, now we're gonna have a look at a couple of options that have if you need to have previews of dynamic sites, like WordPress sites, for example. And once again, there are a few different ways that you can approach this. Probably the most straightforward way, and this is good if you want to sort of keep your command line use to a minimum, is to just install the XAMPP program. So you wanna head to the XAMPP website and go to the Linux section here. Then just grab one of these installers depending on which version of PHP you wanna have running inside your XAMPP installation. And that will get a whole server infrastructure set up for you, contained inside XAMPP. It will also include phpMyAdmin so that you can use that interface to set up your databases and what have you. So what we're looking at pretty much is setting up a LAMP stack here. And XAMPP gives you a way to do that with a graphical user interface and it kind of smooths out the whole process. But you can also use one of Bitnami's installers, they have a LAMP Stack installer that you can use as well. And that's sort of the same thing, you just come over here and you decide which one of these installers with which version of PHP is gonna work for your project. And just download it and use that setup process that it provides for you. Now if you're not really looking for just a general LAMP stack, if you're looking to locally install a specific type of website. Then you also might like to use some of the Bitnami add-ons for XAMPP. So as you can see here, there are a whole bunch that you can just download. And then you download this add-on, use it along with Bitnami. And then you can really smooth out that whole installation process with these two things together. The other option that you do have with Linux if you wanna create some dynamic site previews is to actually install a whole LAMP stack on your machine. You can't do that because you're using the same infrastructure on your local machine as most hosts are using. Going through how to do that, though, is a little bit beyond the scope of this video because it does defer from distro to distro. However, the basic process is just installing all the packages that you need, so for example with a LAMP stack you've already got the L, which is Linux. And then you just install Apache packages, MySQL packages, and PHP packages. Then you would also install phpMyAdmin, and then configure it all so that you can set up databases directly on your computer. And so WordPress sites, Grav CMS sites, and anything else you need directly onto your machine. Be prepared that it can be a little bit more technically involved. But once you've gotten through the setup process, it is really handy having that ability to just run any type of site that you need. Right there on your computer without any sort of extra software, right? So now we're just about finished with this course. The last area that I wanna go through with you is a couple of miscellaneous pieces of software that are good for just general bits and pieces that you have to do around the web design workflow. Like using FTP, writing, working with Git, and working with other types of media. So we're gonna go through that in the next video which is the last of the course, I'll see you there.

Back to the top