To better support front-end development in Visual Studio 2022, we\u2019re introducing a new JavaScript\/TypeScript project type.\u00a0 With this new project type, you will be able to develop standalone Angular, React, and Vue projects. You will also be able to easily integrate your front-end projects with an ASP.NET Core backend, and even leverage existing tools in Visual Studio like the Test Explorer.<\/p>\n
CLI-Based Front-End\u00a0Project Templates<\/h3>\n
The current Angular, React, and Vue templates included with Visual Studio were often not up to date, and users told us they wanted to choose the version of the framework they are using. To address this feedback, we\u2019re leveraging each framework\u2019s native CLIs to create these front-end project templates:<\/p>\n
- \n
- Angular CLI<\/a><\/li>\n
- Create React App<\/a><\/li>\n
- Vue CLI<\/a><\/li>\n<\/ul>\n
Visual Studio will\u00a0discover and use\u00a0the version of the\u00a0CLI\u00a0installed on your\u00a0path to scaffold the project.<\/p>\n
When creating your project, Visual Studio will open a command prompt so you can see the CLI\u2019s progression.<\/p>\n
![\"Text](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/08\/text-description-automatically-generated.png\")
<\/p>\nNote: If you do not have the CLI of choice installed, you\u00a0will\u00a0get an error in the New Project Dialog Window, for example:<\/p>\n
React cannot be found on your device.<\/em><\/p>\n
That\u2019s okay! You\u2019ll just need to run the appropriate\u00a0
npm<\/code>\u00a0install command:<\/p>\nAngular:<\/p>\n
npm\u00a0install -g @angular\/cli<\/code><\/p>\nReact:<\/p>\n
npm\u00a0install -g create-react-app<\/code><\/p>\nVue:<\/p>\n
npm\u00a0install -g @vue\/cli<\/code><\/p>\nAs\u00a0React and Vue\u00a0support both TypeScript and\u00a0JavaScript, you also\u00a0can\u00a0specify\u00a0whichever\u00a0language\u00a0you prefer\u00a0during\u00a0project\u00a0creation.\u00a0Visual Studio will add the proper flags to the CLI commands for your choice.<\/p>\n
![\"Graphical](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/08\/graphical-user-interface-application-description.png\")
<\/p>\nASP.NET Core Integration<\/h3>\n
Many\u00a0of our JavaScript and TypeScript developers are building their\u00a0front-end\u00a0projects alongside\u00a0their\u00a0ASP.NET Core backend projects.\u00a0In one of our user studies, participants\u00a0mentioned\u00a0they like to keep their\u00a0front-end\u00a0and backend projects separated, and\u00a0that\u00a0they would open them in\u00a0multiple\u00a0editors.\u00a0To\u00a0create\u00a0a similar setup, we\u00a0moved to a\u00a0two\u00a0project in one solution model,\u00a0where\u00a0JavaScript\/TypeScript\u00a0projects\u00a0can be easily integrated with ASP.NET Core\u00a0Web APIs.\u00a0You\u00a0will be able to choose if you want to run, debug and edit your projects together or separately while having access to tooling for both\u00a0the front-end and backend.<\/p>\n
Starting the two-project solution is as easy as\u00a0selecting\u00a0the \u201cAdd integration for Empty ASP.NET Web API project\u201d\u00a0option\u00a0while\u00a0setting up the project in the New Project Dialog:<\/p>\n
![\"Graphical](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/08\/graphical-user-interface-text-application-descr.png\")
<\/p>\nWhen you select the\u00a0integration,\u00a0you\u00a0will notice\u00a0files that have been added or modified\u00a0in the\u00a0JavaScript projects, that will make them differ slightly from\u00a0the\u00a0original templates:<\/p>\n
- \n
- Additional JavaScript files with an aspnetcore prefix<\/li>\n
- Slightly modified package.json that will include additional npm commands to start up the front\u2013end and the backend<\/li>\n
- Slightly modified application files that automatically use the data created in the .NET Core project\u2019s demo weather API<\/li>\n<\/ul>\n
These files will allow you to add a .NET Core project to your solution and be able to run the two together, without having to add any\u00a0added\u00a0code.<\/p>\n
![\"Graphical](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/08\/graphical-user-interface-description-automaticall.png\")
<\/p>\nJavaScript\/TypeScript Testing<\/h2>\n
Unit testing with the Test Explorer is one of the new features enabled when creating a JavaScript\/TypeScript project. We leverage Jest for React and Vue projects, and Karma and Jasmine for Angular projects. By default, you will be able to run the default tests provided by each framework, as well as any additional tests you write. \u00a0Just hit the play button in the Test Explorer. If you don\u2019t already have your Test Explorer\u00a0open,\u00a0you can find it by opening\u00a0the Test menu in the menu bar.<\/p>\n
![\"Graphical](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2021\/08\/graphical-user-interface-application-word-descr.png\")
<\/p>\nWe also support the Mocha and Tape test libraries. To use one of these, simply change the default test library in\u00a0package.json\u00a0to the appropriate\u00a0test library\u2019s package.<\/p>\n
Easily\u00a0Work with VS\u00a0Code<\/h2>\n
To allow JavaScript\/TypeScript projects to also be easily debugged using Visual Studio Code, we\u2019ve included a\u00a0launch.json\u00a0file to the project template. This file will be used to set your launch configurations in Visual Studio, as well as in VS Code. As a result, you will be able to seamlessly open, edit, and debug your JavaScript\/TypeScript projects in both VS and VS Code.<\/p>\n
Getting Started<\/h2>\n
- Create React App<\/a><\/li>\n