How to run HTML on “localhost” in VS Code on Mac with Live Server
Let’s run HTML on localhost like a web application!
Hey guys…most tech tutorials deal with advanced subjects. It doesn’t mean that they’re generally more helpful though.
Learning to code from scratch? 👇
Please Subscribe To My Coding Channel on YouTube.
(Publishing new tutorials almost daily.)
The original how to run HTML on localhost article was published on Semicolon. I’m republishing it here with minor edits.
Okay guys, you can read this article and learn the step by step process for running your HTML, CSS and JavaScript on localhost.
But there is a faster way to learn.
If you don’t like reading, simply watch these video tutorials.
It will only take 2 to 3 minutes of your time to learn how to run HTML on localhost. So let’s get started 🙂
Video is probably the fastest way to learn how to run HTML locally:
How To Run HTML In VSCode A Mac / Live Server
So this is how you would run HTML in VSCode on a Mac / Macbook Pro / Macbook Air. Pretty much Visual Studio Code works same way everywhere.
How To Run HTML File On Localhost On Windows
And this is how you’d run HTML files in VS Code on Windows 7 10 or 11
Still reading? Great let’s take a look how to set up HTML to run locally.
If you just started coding in Visual Studio Code and you are still llearning HTML, one of the first things you want to do is run HTML files from localhost address in your browser.
An alternative to running HTML files on localhost is simply opening them in your browser. But the problem with doing that is that HTML doesn’t function in the same way as a real web application.
So let’s learn how to run HTML on localhost in your browser.
Step 1 — Download And Install Visual Studio Code
Get your VSCode editor ready.
One of the fastest ways to get started with running an HTML file on your localhost is to use Live Server extension which is part of VS Code editor. Best part is that both VSCode and Live Server are free!
Step 2 — Install Live Server Extension
Let’s install Live Server!
1. With Visual Studio Code open, navigate to the extensions button.
2. Start typing live server into extensions’ search box.
3. Click on first search result that should say Live Server.
4. Click on the install button.
Step 3 — Configuring Live Server To Run In Chrome
1. Go to the Settings button, and select “Extension Settings” option from its drop down menu.
This will open Live Server Extension’s settings page.
2. In the upper right corner, click on small button to open settings.json file as shown in the screenshot above.
3. Edit settings.json file by adding the following new property and “chrome” value.
Add the line to your settings.json file as follows:
“liveServer.settings.AdvanceCustomBrowserCmdLine”:”chrome”
So now your settings.json file will look something like:
{
"liveServer.settings.AdvanceCustomBrowserCmdLine":"chrome",
"editor.fontSize": 25,
}// there might be other properties in your settings.json file
This will setup Live Server for opening your HTML file in chrome browser. But you can also specify other values like firefox or safari for example.
4. Run HTML File On Localhost in VSCode
So how do you run an HTML file on localhost as though on a live server?
1. Create a new folder for your HTML project.
2. In VSCode menu go to File > Open Folder.
3. Add a new file to your project, let’s say index.html and type some basic HTML.
4. Important: In order for Live Server to launch your HTML file, it must contain <head> and <body> tags. Without them, Live Server will not run your HTML file and display an error message.
What is one of the best reasons to learn how to run HTML on localhost?
One of the greatest reasons that generally we build HTML apps to run on localhost is due to the fact that running HTML files in browser is a matter of security. And while we should prevent any random script from gaining access to our system, we as developers still want to be able to edit our code and run it on our PC with full system access.
Imagine opening an HTML file containing a webapp that someone else created. If you run it locally in your browser, it would gain access to your hard drive, network, etc. Because naturally this is how web applications are written, to run as a server, so they can have complete access to the system.
So this is why we should learn how to run HTML files from localhost. (Same goes for CSS and JavaScript, as they will be usually bundled together with your main HTML file.)
Why should you learn to run HTML from localhost?
The reason you want to learn how to run HTML from localhost is that it will be running as a real web application on a web server (but you can still continue to test and run it on your computer, as if it was being hosted online.)
This is really useful for many reasons. First you’ll be learning how professional web applications run, and not just opening an HTML file in your browser. Also to deploy your app online all you will have to do is copy the files to your web host server.
Oh and One Last Thing…
Learning to code? 👇
Please Subscribe To My Coding Channel on YouTube.
(Publishing new tutorials almost daily.)
