Software Development

JavaScript and TypeScript Tasks with React, Angular, or Vue in Visible Studio 2022 with or with out .NET

July 20, 2022

1b4f

1b4f
1b4f 1b4f
1b4f 1b4f

1b4f I used to be studying 1b4f 1b4f Gabby’s weblog publish in regards 1b4f to the new TypeScript/JavaScript venture 1b4f expertise in Visible Studio 2022 1b4f . It’s best to learn 1b4f the docs on 1b4f JavaScript and TypeScript in Visible 1b4f Studio 2022 1b4f .

1b4f

1b4f For those who’re used to 1b4f ASP.NET apps when you concentrate 1b4f on apps which are JavaScript 1b4f heavy, “entrance finish apps” or 1b4f TypeScript centered, it may be 1b4f complicated as to “the place 1b4f does .NET slot in?”

1b4f

1b4f You could think about the 1b4f obligations of your numerous tasks 1b4f or subsystems and the a 1b4f number of completely legitimate methods 1b4f you possibly can construct a 1b4f website or net app. Let’s 1b4f think about only a few:

1b4f

1b4f An ASP.NET Net app that 1b4f renders HTML on the server 1b4f however makes use of TS/JS 1b4f
- 1b4f This will have a Net 1b4f API, Razor Pages, with or 1b4f with out the MVC sample. 1b4f
- 1b4f You perhaps have simply added 1b4f JavaScript through <script> tags 1b4f
- 1b4f Possibly you added a script 1b4f minimizer/minifier process
- 1b4f Will be complicated as a 1b4f result of it could possibly 1b4f really feel like your app 1b4f must ‘construct each the shopper 1b4f and the server’ from one 1b4f venture
1b4f
1b4f A principally JavaScript/TypeScript frontend app 1b4f the place the HTML might 1b4f be served from any net 1b4f server (node, kestrel, static net 1b4f apps, nginx, and many others) 1b4f
- 1b4f This app could use Vue 1b4f or React or Angular but 1b4f it surely’s not an “ASP.NET 1b4f app”
- 1b4f It calls backend Net APIs 1b4f which may be served by 1b4f ASP.NET, Azure Capabilities, third occasion 1b4f REST APIs, or the entire 1b4f above
- 1b4f This state of affairs has 1b4f generally been complicated for ASP.NET 1b4f builders who could get confused 1b4f about duty. Who builds what, 1b4f the place do issues find 1b4f yourself, how do I construct 1b4f and deploy this?

1b4f

1b4f VS2022 1b4f brings JavaScript and TypeScript 1b4f assist into VS with a 1b4f full JavaScript Language Service primarily 1b4f based on TS. It offers 1b4f a TypeScript NuGet Package deal 1b4f so you possibly can construct 1b4f your entire app with MSBuild 1b4f and VS will do the 1b4f correct factor.

1b4f

1b4f

1b4f NEW: 1b4f Beginning in Visible Studio 2022, 1b4f there’s a new JavaScript/TypeScript venture 1b4f sort (.esproj) that means that 1b4f you can create standalone Angular, 1b4f React, and Vue tasks in 1b4f Visible Studio.

1b4f

1b4f The .esproj idea is nice 1b4f for people accustomed to Visible 1b4f Studio as we all know 1b4f {that a} Answer comprises a 1b4f number of Tasks. Visible Studio 1b4f manages information for a single 1b4f utility in a 1b4f Undertaking 1b4f . The venture contains supply 1b4f code, assets, and configuration information. 1b4f On this case we will 1b4f have a .csproj for a 1b4f backend Net API and an 1b4f .esproj that makes use of 1b4f a shopper aspect template like 1b4f Angular, React, or Vue.

1b4f

1b4f Factor is, traditionally when Visible 1b4f Studio supported Angular, React, or 1b4f Vue, it is templates have 1b4f been old-fashioned and never up 1b4f to date sufficient. VS2022 makes 1b4f use of the native CLIs 1b4f for these entrance ends, fixing 1b4f that drawback with 1b4f Angular CLI 1b4f , 1b4f Create React App 1b4f , and 1b4f Vue CLI 1b4f .

1b4f

1b4f If I’m in VS and 1b4f go “File New Undertaking” there 1b4f are Standalone templates that remedy 1b4f Instance 2 above. I will 1b4f decide JavaScript React.

1b4f

1b4f Then I will click on 1b4f “Add integration for Empty ASP.NET 1b4f Net API. This may give 1b4f me a frontend with javascript 1b4f able to name a ASP.NET 1b4f Net API backend. I will 1b4f 1b4f observe alongside right here 1b4f .

1b4f

1b4f It then makes use of 1b4f the React CLI to make 1b4f the entrance finish, which once 1b4f more, is cool because it’s 1b4f no matter model I need 1b4f it to be.

1b4f

1b4f Then I will add my 1b4f ASP.NET Net API backend to 1b4f the identical answer, so now 1b4f I’ve an esproj and a 1b4f csproj like this

1b4f

1b4f Now I’ve a pleasant clear 1b4f two venture system – on 1b4f this case extra JavaScript centered 1b4f than .NET centered. This one 1b4f makes use of npm to 1b4f startup the venture utilizing their 1b4f net improvement server and proxyMiddleware 1b4f to proxy localhost:3000 calls over 1b4f to the ASP.NET Net API 1b4f venture.

1b4f

1b4f Here’s a React app served 1b4f by npm calling over to 1b4f the Climate service served from 1b4f Kestrel on ASP.NET.

1b4f

npm app running in VS 2022 against an ASP.NET Web API

1b4f That is inverted than most 1b4f ASP.NET Of us are used 1b4f to, and that is OK. 1b4f This reveals me that Visible 1b4f Studio 2022 can assist both 1b4f improvement fashion, use the CLI 1b4f that’s put in for no 1b4f matter Frontend Framework, and permit 1b4f me to decide on what 1b4f net server and net browser 1b4f (through Launch.json) I need.

1b4f

1b4f If you wish to flip 1b4f it, and 1b4f put ASP.NET Core as the 1b4f first after which usher in 1b4f some TypeScript/JavaScript, observe this tutorial 1b4f as a result of 1b4f that is additionally doable!

1b4f

1b4f Sponsor: 1b4f Make login Auth0’s drawback. Not 1b4f yours. Present the handy login 1b4f options your prospects need, like 1b4f social login, multi-factor authentication, single 1b4f sign-on, passwordless, and extra. 1b4f Get began free of charge.

1b4f

1b4f 1b4f

1b4f
1b4f 1b4f 1b4f

1b4f
1b4f 1b4f 1b4f 1b4f

1b4f About Scott

1b4f
1b4f 1b4f 1b4f 1b4f

1b4f Scott Hanselman is a former 1b4f professor, former Chief Architect in 1b4f finance, now speaker, marketing consultant, 1b4f father, diabetic, and Microsoft worker. 1b4f He’s a failed stand-up comedian, 1b4f a cornrower, and a guide 1b4f creator.

1b4f
1b4f 1b4f 1b4f 1b4f 1b4f
1b4f 1b4f 1b4f 1b4f 1b4f
1b4f 1b4f 1b4f 1b4f
1b4f
1b4f 1b4f 1b4f 1b4f 1b4f About 1b4f 1b4f E-newsletter 1b4f
1b4f 1b4f 1b4f 1b4f