htmlnode.jsvisual-studionpm

Run HTML file from a folder / Develop code in Visual Studio without projects or solutions

I am trying to run an HTML file by opening a folder, in Visual Studio 2022, without any solution/project

Following below How to tutorial:
https://learn.microsoft.com/en-us/visualstudio/ide/develop-code-in-visual-studio-without-projects-or-solutions?view=vs-2022

I performed these steps

The VS was not able to run the HTML page. Please have a look at the screenshot below. enter image description here

The Run and debug your code section of the document mentions:

You can debug your code in Visual Studio without a project or solution! To debug some languages, you may need to specify a valid startup file in the codebase, such as a script, executable, or project. The drop-down list box next to the Start button on the toolbar lists all of the startup items that Visual Studio detects, as well as items you specifically designate. Visual Studio runs this code first when you debug your code.

Configuring your code to run in Visual Studio differs depending on what kind of code it is, and what the build tools are.

The Start button doesn't detect the HTML file. enter image description here

When I right click the index.html file I don't find Set as Startup Item option enter image description here

The Run and debug your code section further explains how to run different code bases but doesn't mention HTML code base

The reason I want to open the code as folder... is I want add some node modules in the legacy code.

If I open Web Site instead of folder, I certainly be able to run the HTML file but when I add npm modules to the web site using terminal window, I don't get node modules and package.json files visible in the web site node under the solution explorer. If I open folder I get node modules and package.json files.

Solution

  • I got an acceptable workaround to this.

    1. Install parcel bundler
      Steps
      a. Right click on folder node in Solution explorer
      b. Select Open in terminal
      c. In terminal window type following:

      npm install --save-dev parcel

      enter image description here

    2. Configure package.json file
      a. Add this scripts item underneath dependencies:

    "devDependencies": {
    "parcel": "^2.14.4"
    },
    "scripts": {
    "start": "parcel src/index.html"
    }

    1. Type npm start in the Terminal and press ENTER.
    2. Copy and paste the URL in your browser window.

    enter image description here