Different ways of running your HTML file locally

Hi, this is Charu from Classmethod. In this hands-on blog, we'll explore different methods to test your HTML files locally, from basic approaches like opening files directly to more advanced options involving local servers and specialised tools.

1. Localhost:

Opening your HTML file directly in a browser is the most straightforward method. Simply navigate to the file location on your computer and open it in the browser. However, keep in mind that if your website involves API calls, you might encounter CORS restrictions which I faced while testing mine.

2. Local Server:

Running a local server is a better approach and helps overcome CORS limitations. Since TypeScript is a superset of JavaScript, it needs to be changed to JavaScript before it can run in a browser. Here is how you can setup a local server in TypeScript,

Make the following changes in your tsconfig.json file,

{
  "compilerOptions": {
    "outDir": "dist"
  }
}

This will make sure that all your files which are converted into JavaScript will be stored in dist directory.

To convert your TS files into JS, run the following command,

tsc

To setup a local server, install it globally using the following command,

npm install -g http-server

Finally, run the following command to run your server,

http-server

You can click on the localhost link displayed to view your HTML page.

3. VS Code Live Server Extension:

You can also use Live Server extension in your VS code. This tool allows you to serve static files, on a local server.

You need to install this extension in your VS code,

Click on the 'Go Live' button at the bottom, right-click on your HTML file, and select "Open with Live Server"

4. Online HTML Editors:

You can also try online HTML editors. These platforms allow you to write, test, and share your HTML, CSS, and JavaScript code directly in your browser. There are plenty of them, you can search for them on Google and go with whichever you like.

Conclusion:

To test your HTML file you can experiment with these approaches and find the one which enhances you web development experience.

Thank you for reading!

Happy Learning:)