How To Run HTML On localhost In VSCode On Mac | Live Server
To run HTML in VSCode on a Mac is relatively simple. To setup VSCode for running your HTML website or JavaScript application on a MacBook Pro will require taking steps outlined in this tutorial. Just watch the video below, it's the fastest way to learn. By end of this tutorial you'll be able to run HTML and JavaScript on your Mac, from Terminal or by using LiveServer extension, which makes your JavaScript code run like a real web application on localhost.
Let's run HTML on localhost like a web application!
So this is how you would run HTML in VSCode on a Mac / Macbook Pro / Macbook Air
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 File In VSCode On Localhost On A Mac (Live Server)
See below
How To Run HTML File In VSCode On Localhost On Windows
And this is how you would 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 in your browser.
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 - Open VSCode And 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 (Or Another Browser)
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.
Articles Related To Vscode Community
- VSCode Keyboard Shortcuts on 13 Jan 2023 by Ghost Together
- VSCode: How To Disable Red Wavy Underline (Warnings) on 6 Oct 2022 by Ghost Together
- How To Create A New File In VSCode on 8 Sep 2022 by Ghost Together
- Fastest Way To Open settings.json In VSCode on 14 Aug 2022 by Ghost Together
- VSCode Keyboard Shortcuts on 17 Apr 2021 by Ghost Together
Last 10 Articles Written On Ghost Together
- xv on 24 Jun 2024 by AndrewOcean
- How to get started on 17 Dec 2023 by Kenya
- How To Make Characters In Midjourney on 14 Dec 2023 by Ghost Together
- How to make money online on 12 Dec 2023 by DRSMS313
- How To Make Consistent Characters In Midjourney on 12 Dec 2023 by Ghost Together
- Wildfires and Wastelands on 10 Dec 2023 by A. Stranger
- How To Download, Install And Activate Davinci Resolve Studio 18 on 10 Dec 2023 by Ghost Together
- How to use LUTs in Davinci Resolve 18 on 10 Dec 2023 by Ghost Together
- Write about Association between surface of the polyp with histomorphology Polypoi... on 10 Dec 2023 by msjrez
- How To Zoom On Video In Davinci Resolve on 10 Dec 2023 by Ghost Together
Last 10 Vscode Questions Asked On Ghost Overflow
- Ask your first Vscode question! (Help us build the largest database of questions on any subject)
Other Websites In Our Content Network
Voxel Engine Tutorials | Jeep Windshield Decals | loom craft | etsy alternative | craigslist alternative | instagram alternative | discord alternative | reddit alternative | x alternative