How to create a JavaScript project in Visual Studio

Visual Studio - Create JavaScript Project

Knowing JavaScript is more or less required when working with front-end web development. One way to learn JavaScript is to start with a simple web project containing an HTML page that uses JavaScript. So, the next question is which IDE or editor to use. In this post, we will create a JavaScript project in Visual Studio IDE. It supports JavaScript IntelliSense with auto-complete suggestions and debugging capabilities.

Note: This article was written using Visual Studio 2022 on Windows System. For a VS Code example, check Create a JavaScript project using VS Code article.

Visual Studio includes templates for many different types of projects, but if we search for "javascript" in the "Create a new project" window, there will only be two project templates listed:

  • Standalone JavaScript React Project
  • Standalone JavaScript Vue Project

Visual Studio - Available JavaScript Templates

Those two are JavaScript libraries/frameworks for building user interfaces, but we want to create a simple web page that uses JavaScript code without relying on more advanced React or Vue frameworks.

We will start with a blank solution In Visual Studio. Next, we will add a "Web Site" project to the solution and populate it with an HTML page, a JavaScript file, and a CSS stylesheet.

Step 1 - Create a blank solution

To create a blank solution, we go through the following steps:

  • Launch the Visual Studio and select "Create new project" from the starting page.
    Visual Studio - Create new project
  • The "Create a new project" window will appear, displaying a list of all available templates. Search for "blank" or "solution" and select the "Blank Solution" template.
    Visual Studio - create a new project - search for a blank solutionClick "Next" to configure the solution.
  • Give the solution a name and then click the "Create" button.
Note: If you are having trouble finding Blank Solution in the list of templates or would like to have a more detailed guide on how to create it, check How to create Blank Solution in Visual Studio article.

Visual Studio IDE should now create a blank project with an empty Solution Explorer.

Visual Studio - Empty Solution Explorer

Step 2 – Add existing Web Site in the Solution

In this step, we are going to add a "Web Site" that uses a local file system. The web site doesn't exist yet, but it will be created using the steps below.

  • Right-click on empty Solution Explorer and select Add > Existing Web Site from the context menu.
    Visual Studio - Solution Explorer - Add Existing Web Site
  • The "Add Existing Web Site" window will open. Select File System from the left sidebar. We select the location of our website project from the folder dialog. We can add it to our solution path, but this is not required. At the bottom is an input field that contains the path to the selected folder.

    In the example below, we added the "MySimpleWebSite" at the end of the selected path. The MySimpleWebSite folder doesn't exist yet, but it will be created in the next step.Visual Studio - Add Existing Web Site - File System

  • Click "Open" and if the folder does not exist yet, it will ask us if we want to create it. Click "Yes".
  • Visual Studio will add the Web Site to the current project solution. It might show us the "Target framework not supported" window and recommend we update to .NET Framework 4.8. Leave the first option selected and press the "Continue" button.

    Visual Studio - Target framework not supported window

    This will create a Web.config file in our project. We won't be using any .NET components, but we still need web.config file to have debugging enabled. It is set to "False" by default, but when we run the project with "Run with Debugger", Visual Studio will ask us if we want to enable the Debugging.

    Note: In some cases, Visual Studio might not create Web.config file at all, but when we first run the project it will ask us if it should "Add a new Web.config file with debugging enabled.". Click "OK" so we can make use of the debugging.

Now, let's start adding some files to our website.

Step 3 – Add new items to the project

In this step, we will add three files to our project. Right-click on the website folder inside Solution Explorer and select Add > Add New Item as shown below:

Visual Studio - Solution Explorer - Add New Item

This will open the "Add New Item" window from where we can choose the file type to add to the project.

Visual Studio - Add new item

In our case, we need to add the following items:

  • HTML Page
    Rename it index.html and click "Add". This is the HTML page that will open when we run the project. It will contain minimal HTML content.
  • JavaScript File
    Rename the file hello.js and click "Add". This is the JavaScript file that will contain our JavaScript code. The index.html will need to reference this file.
  • Style Sheet
    Rename this to style.css and click "Add". We can add CSS rules here to style our HTML page.

After we've added all three files, our Solution Explorer should now look something like this:

Visual Studio - Solution Explorer with Web Site and added files

Adding JavaScript and Stylesheet references to index.html

To make use of JavaScript and Stylesheet, the index.html needs to reference them.

We can add the necessary code manually or we can open index.html in the code editor and "Click+Drag" the hello.js and style.css files from Solution Explorer into the code editor.

Visual Studio - Dragging a file into code editor from Solution explorer

For hello.js, this is what gets added:

<script src="hello.js"></script>

The above code should be placed before the closing </body> tag.

And for style.css, the following code is added:

<link href="style.css" rel="stylesheet" />

The above style.css code should be placed within the <head></head> section of the index.html.

Content of index.html

The index.html file should now contain the following HTML code:

<!DOCTYPE html>
    <meta charset="utf-8" />
    <link href="style.css" rel="stylesheet" />
    <script src="hello.js"></script>

Step 4 - Running JavaScript Project from Visual Studio

If we run the project now (press F5 or go to Menu > Debug > Start Debugging), an empty webpage should open. All that is left is on customizing the HTML page to our needs and adding JavaScript code.

Below is an example of a simple web page that uses JavaScript. The user enters their name into the input field and the page greets them after they click the "Submit" button.

Note: For a more detailed explanation of the code below, check THIS article.

See the Pen
Very Simple JavaScript innerHTML Example
by HowToSolutions (@HowToSolutions)
on CodePen.

Copy the content of the HTML tab to the index.html at the beginning of <body> section. The content of the JS tab should be copied into hello.js file and the content of the CSS tab into style.css file.

If we now run the project now (Menu > Debug > Start Debugging or F5), we should get the same result in a browser as shown in the above CodePen example.

Note: For simple HTML Canvas example, check Create Particle System that uses animation of pixels using JavaScript.


In this post, we learned how to create a JavaScript project in Visual Studio that does not use a React library or the Vue framework. We started with an empty solution and then added "Web Site" to it. Inside it, we added an HTML page, a JavaScript file, and a Stylesheet file. Finally, we dragged both the JavaScript and Stylesheet into the index.html page, so that the HTML page references both files.

This article was first published in May 2016 and has since then been republished and updated.


Click HERE to add your Comment
  1. Evan
    October 13, 2016
    • admin
      October 13, 2016
  2. Helgy
    March 7, 2017
  3. Naman
    November 21, 2017
    • admin
      November 21, 2017
  4. Moller
    October 14, 2020
    • admin
      October 14, 2020
  5. NewbieJSCoder
    March 11, 2021
  6. Jenny Craig
    October 30, 2021
  7. Jace Malloy
    November 2, 2021

Write a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.