DEV Community 👩‍💻👨‍💻

Cover image for New to Web Development? Let's show you three ways to setup a Local Server
Brad Westfall
Brad Westfall

Posted on

New to Web Development? Let's show you three ways to setup a Local Server

Photo by Philipp Katzenberger on Unsplash

This is a preview from my CSSBootcamp.com course.

If you're newer to web development, I understand it can feel a bit chaotic when you want to just start by building something simple. This video shows you how to setup a local server in three different ways so you can run your website on your machine "locally".

#1. VSCode Extensions

If you're using VSCode, you can probably setup a local server for static HTML, CSS, and JavaScript websites with an extension called "Live Server". Just go to the extensions section in VSCode and search for "Live Server"

Screen Shot 2021-09-06 at 12.37.13 PM

Install it and then click the "Go Live" link in the footer of VSCode. Make sure you have a project folder open so the extension knows what folder to use as your server. See the video above for an example.

#2. Starting a server from CLI

These next two options require just a little bit of CLI knowledge. Even if you don't much CLI, you'll need to learn it anyways as a web developer so take every chance you get to learn something new in CLI.

We're going to use a Python command to run a server on a Mac. Python comes installed by default on Macs so we don't need to do much. Even if you're not doing Python development, this is a very easy way to run a server when you need one.

Make sure you cd (change directory) to the one you want to use as your server's root path. Checkout the video if you need more help with that. Then do:

python -m SimpleHTTPServer 8000
Enter fullscreen mode Exit fullscreen mode

Now go your browser put this in the URL.

127.0.0.1:8000
Enter fullscreen mode Exit fullscreen mode

Do Control+C to quit the server when you're finished. Since it's a python server you may need to do Control+C twice.

#3. Node and NPM with BrowserSync

If you already have Node installed (do node -v to see if you do), then you can use BrowserSync after you install it with

npm install -g browser-sync
Enter fullscreen mode Exit fullscreen mode

Now you can just do from any folder and get a server

browser-sync
Enter fullscreen mode Exit fullscreen mode

If you don't have Node/NPM installed, the video walks you through those steps as well.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.