{"id":2314,"date":"2025-05-11T02:03:41","date_gmt":"2025-05-11T02:03:41","guid":{"rendered":"https:\/\/techtrendfeed.com\/?p=2314"},"modified":"2025-05-11T02:03:41","modified_gmt":"2025-05-11T02:03:41","slug":"javascript-and-typescript-tasks-with-react-angular-or-vue-in-visible-studio-2022-with-or-with-out-net","status":"publish","type":"post","link":"https:\/\/techtrendfeed.com\/?p=2314","title":{"rendered":"JavaScript and TypeScript Tasks with React, Angular, or Vue in Visible Studio 2022 with or with out .NET"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<div id=\"\">&#13;<br \/>\n            &#13;<\/p>\n<p>I used to be studying <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/the-new-javascript-typescript-experience-in-vs-2022-preview-3\/\">Gabby&#8217;s weblog submit in regards to the new TypeScript\/JavaScript mission expertise in Visible Studio 2022<\/a>. It is best to learn the docs on <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/javascript\/javascript-in-vs-2022?view=vs-2022\">JavaScript and TypeScript in Visible Studio 2022<\/a>.<\/p>\n<p>Should you&#8217;re used to ASP.NET apps when you consider apps which are JavaScript heavy, &#8220;entrance finish apps&#8221; or TypeScript targeted, it may be complicated as to &#8220;the place does .NET slot in?&#8221;<\/p>\n<p>It&#8217;s essential to think about the tasks of your varied initiatives or subsystems and the a number of completely legitimate methods you possibly can construct a web page or net app. Let&#8217;s think about only a few:<\/p>\n<ol>\n<li><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/javascript\/tutorial-aspnet-with-typescript?view=vs-2022\">An ASP.NET Net app that renders HTML on the server however makes use of TS\/JS<\/a>\n<ul>\n<li>This will have a Net API, Razor Pages, with or with out the MVC sample.  <\/li>\n<li>You perhaps have simply added JavaScript through <script><![CDATA[ tags  \n\n<li>Maybe you added a script minimizer\/minifier task  \n\n<li>Can be confusing because it can feel like your app needs to 'build both the client and the server' from one project]]><\/script><\/li>\n<\/ul>\n<\/li>\n<li>A largely JavaScript\/TypeScript frontend app the place the HTML might be served from any net server (node, kestrel, static net apps, nginx, and many others)\n<ul>\n<li>This app could use Vue or React or Angular however it&#8217;s not an &#8220;ASP.NET app&#8221;  <\/li>\n<li>It calls backend Net APIs that could be served by ASP.NET, Azure Features, third celebration REST APIs, or the entire above  <\/li>\n<li>This situation has generally been complicated for ASP.NET builders who could get confused about accountability. Who builds what, the place do issues find yourself, how do I construct and deploy this?<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/javascript\/javascript-in-vs-2022?view=vs-2022\">VS2022<\/a> brings JavaScript and TypeScript assist into VS with a full JavaScript Language Service primarily based on TS. It offers a TypeScript NuGet Package deal so you possibly can construct your complete app with MSBuild and VS will do the fitting factor.<\/p>\n<blockquote>\n<p><strong>NEW: <\/strong>Beginning in Visible Studio 2022, there&#8217;s a new JavaScript\/TypeScript mission kind (.esproj) that lets you create standalone Angular, React, and Vue initiatives in Visible Studio.<\/p>\n<\/blockquote>\n<p>The .esproj idea is nice for people aware of Visible Studio as we all know {that a} Answer comprises a number of Tasks. Visible Studio manages recordsdata for a single utility in a <em>Challenge<\/em>. The mission contains supply code, assets, and configuration recordsdata. On this case we are able to have a .csproj for a backend Net API and an .esproj that makes use of a shopper aspect template like Angular, React, or Vue.<\/p>\n<p>Factor is, traditionally when Visible Studio supported Angular, React, or Vue, it is templates had been old-fashioned and never up to date sufficient. VS2022 makes use of the native CLIs for these entrance ends, fixing that drawback with <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/angular.io\/cli\">Angular CLI<\/a>, <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/github.com\/facebook\/create-react-app\">Create React App<\/a>, and <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/cli.vuejs.org\/\">Vue CLI<\/a>.<\/p>\n<p>If I&#8217;m in VS and go &#8220;File New Challenge&#8221; there are Standalone templates that remedy Instance 2 above. I am going to decide JavaScript React.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"Standalone JavaScript Templates in VS2022\" style=\"border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px\" border=\"0\" alt=\"Standalone JavaScript Templates in VS2022\" src=\"https:\/\/images.hanselman.com\/blog\/Windows-Live-Writer\/97390fb5b7df_12523\/image_8fbe4808-d001-4208-a77c-614f8ed4126d.png\" width=\"567\" height=\"610\"\/><\/p>\n<p>Then I am going to click on &#8220;Add integration for Empty ASP.NET Net API. This can give me a frontend with javascript able to name a ASP.NET Net API backend. I am going to <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/javascript\/tutorial-asp-net-core-with-react?view=vs-2022\">comply with alongside right here<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"Standalone JavaScript React Template\" style=\"border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px\" border=\"0\" alt=\"Standalone JavaScript React Template\" src=\"https:\/\/images.hanselman.com\/blog\/Windows-Live-Writer\/97390fb5b7df_12523\/image_bc274b03-19f1-4f1f-8fb8-f9d2f9dce344.png\" width=\"467\" height=\"119\"\/><\/p>\n<p>It then makes use of the React CLI to make the entrance finish, which once more, is cool because it&#8217;s no matter model I would like it to be.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"React Create CLI\" style=\"border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px\" border=\"0\" alt=\"React Create CLI\" src=\"https:\/\/images.hanselman.com\/blog\/Windows-Live-Writer\/97390fb5b7df_12523\/image_3b618c5d-75cd-4dc3-b9c6-78be33dbe019.png\" width=\"600\" height=\"133\"\/><\/p>\n<p>Then I am going to add my ASP.NET Net API backend to the identical answer, so now I&#8217;ve an esproj and a csproj like this<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"frontend and backend\" style=\"border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px\" border=\"0\" alt=\"frontend and backend\" src=\"https:\/\/images.hanselman.com\/blog\/Windows-Live-Writer\/97390fb5b7df_12523\/image_ecdd0c10-39eb-4eb9-aa87-6d9c712d362f.png\" width=\"221\" height=\"330\"\/><\/p>\n<p>Now I&#8217;ve a pleasant clear two mission system &#8211; on this case extra JavaScript targeted than .NET targeted. This one makes use of npm to startup the mission utilizing their net improvement server and proxyMiddleware to proxy localhost:3000 calls over to the ASP.NET Net API mission. <\/p>\n<p>Here&#8217;s a React app served by npm calling over to the Climate service served from Kestrel on ASP.NET.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" title=\"npm app running in VS 2022 against an ASP.NET Web API\" style=\"border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px\" border=\"0\" alt=\"npm app running in VS 2022 against an ASP.NET Web API\" src=\"https:\/\/images.hanselman.com\/blog\/Windows-Live-Writer\/97390fb5b7df_12523\/image_5d1af2f4-4754-4aa8-9e24-8ab9fa23a01c.png\" width=\"915\" height=\"986\"\/><\/figure>\n<p>That is inverted than most ASP.NET People are used to, and that is OK. This exhibits me that Visible Studio 2022 can assist both improvement type, use the CLI that&#8217;s put in for no matter Frontend Framework, and permit me to decide on what net server and net browser (through Launch.json) I would like.<\/p>\n<p>If you wish to flip it, and <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/javascript\/tutorial-aspnet-with-typescript?view=vs-2022\">put ASP.NET Core as the first after which usher in some TypeScript\/JavaScript, comply with this tutorial as a result of<\/a> that is additionally attainable!<\/p>\n<hr\/>\n<p><strong>Sponsor: <\/strong>Make login Auth0\u2019s drawback. Not yours. Present the handy login options your clients need, like social login, multi-factor authentication, single sign-on, passwordless, and extra. <a rel=\"nofollow\" target=\"_blank\" href=\"http:\/\/pubads.g.doubleclick.net\/gampad\/clk?id=5840349572&amp;iu=\/6839\/lqm.scotthanselman.site\">Get began free of charge.<\/a><\/p>\n<p>&#13;<br \/>\n&#13;<br \/>\n&#13;<br \/>\n&#13;<\/p>\n<div class=\"about-scott\">\n<div class=\"bioBox\">\n<h4>About Scott<\/h4>\n<div class=\"bioBoxInner\">\n<p>Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, advisor, father, diabetic, and Microsoft worker. He&#8217;s a failed stand-up comedian, a cornrower, and a e book creator.<\/p>\n<p>                        <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/facebook.com\/shanselman\" class=\"sm-link\"><img decoding=\"async\" src=\"http:\/\/images.hanselman.com\/main\/icon-fb.png\" alt=\"facebook\"\/><\/a><br \/>\n                        <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/bsky.app\/profile\/scott.hanselman.com\" class=\"sm-link\"><img decoding=\"async\" src=\"http:\/\/images.hanselman.com\/main\/icon-bluesky.png\" alt=\"bluesky\"\/><\/a><br \/>\n                        <a rel=\"nofollow\" target=\"_blank\" href=\"http:\/\/feeds.hanselman.com\/ScottHanselman\" class=\"sm-link\"><img decoding=\"async\" src=\"http:\/\/images.hanselman.com\/main\/icon-rss.png\" alt=\"subscribe\"\/><\/a><br \/>\n                        <a rel=\"nofollow\" target=\"_blank\" href=\"http:\/\/hanselman.com\/about\">About<\/a> \u00a0 <a rel=\"nofollow\" target=\"_blank\" href=\"http:\/\/www.hanselman.com\/newsletter\">Publication<\/a>\n                    <\/div><\/div>\n<div class=\"ads-box\">\n<div class=\"ad-item\">\n                        <strong>Internet hosting By<\/strong><br \/>\n                        <a rel=\"nofollow\" target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/azure.microsoft.com\/free\"><img loading=\"lazy\" decoding=\"async\" alt=\"Hosted on Linux using .NET in an Azure App Service\" class=\"ad\" border=\"0\" valign=\"top\" vspace=\"4\" width=\"125\" height=\"125\" src=\"http:\/\/images.hanselman.com\/main\/azure-250x250.png\"\/><\/a>\n                    <\/div><\/div><\/div>\n<p>&#13;<br \/>\n&#13;<br \/>\n            &#13;<br \/>\n&#13;<br \/>\n&#13;<br \/>\n            &#13;<br \/>\n&#13;<br \/>\n            &#13;\n        <\/p><\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>&#13; &#13; I used to be studying Gabby&#8217;s weblog submit in regards to the new TypeScript\/JavaScript mission expertise in Visible Studio 2022. It is best to learn the docs on JavaScript and TypeScript in Visible Studio 2022. Should you&#8217;re used to ASP.NET apps when you consider apps which are JavaScript heavy, &#8220;entrance finish apps&#8221; or [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2316,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56],"tags":[837,2280,443,1703,2279,108,2278,1555,2281],"class_list":["post-2314","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-net","tag-angular","tag-javascript","tag-projects","tag-react","tag-studio","tag-typescript","tag-visual","tag-vue"],"_links":{"self":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/2314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2314"}],"version-history":[{"count":1,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/2314\/revisions"}],"predecessor-version":[{"id":2315,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/2314\/revisions\/2315"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/media\/2316"}],"wp:attachment":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<!-- This website is optimized by Airlift. Learn more: https://airlift.net. Template:. Learn more: https://airlift.net. Template: 69d9690a190636c2e0989534. Config Timestamp: 2026-04-10 21:18:02 UTC, Cached Timestamp: 2026-07-29 17:44:35 UTC -->