Create a React app in 5 steps using dotnet cli

Earlier I posted about creating an Angular 5 app in 5 steps using dotnet cli based on the new release candidate version of Single-Page Application templates. These templates allow developers to create SPA application based on Angular, React, and React with Redux. At the time of writing this post, the final version is scheduled to release in Early 2018. This post shows how to create a React app in 5 steps using dotnet cli.

Create a React app in 5 steps using dotnet cli

You can create a React app either via Visual Studio 2017 or dotnet cli. But at this point in time, the newer SPA templates are not integrated with Visual Studio 2017. Below are the 5 steps to create a React app using dotnet cli.

This step is optional as you can still create React app without installing the new SPA templates. But it would be ideal to use the new SPA templates as it creates a standard React application based on the create-react-app template and targets to latest react version (16.0.0).

Note: At the time of writing this post, the latest react version is 16.0.0.

dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-rc1-final

dotnet new react

SET ASPNETCORE_Environment=Development

dotnet build

dotnet run

That’s it. Copy the URL from command prompt and open in the browser and you should see React app running. Easy and quick.

You can open this react application in VS Code or Visual Studio 2017. Let’s take a close look at the application structure and how ASP.NET Core running this react application.

Things to take note of

• The ClientApp subdirectory is a standard React application based on the create-react-app template. Below is the comparison of React App structures created using the new SPA template and the old SPA template. The newer template uses React 16 version where the old template refers to React 15.0.3 version.

  

  The newer template doesn’t use TypeScript, the older template does. Since the new app structure is based on standard react app, you can execute any npm commands such as npm test or npm install.

• By default, Server-side rendering is disabled.
• In development mode, there’s no need to run react development server. It runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file. So when you execute the dotnet run command, you notice that the development server from create-react-app runs.

  

  To understand this, open Startup.cs and take a look at the configure method code. The UseSpa middleware runs the react development server in development mode.

• As mentioned earlier, the dotnet run command runs the react development in the background and this increases the compile time for the application. In case of any C# code change, we need to restart the application and that will also restart the react development server. To speed up things, the react development server can be run as a standalone process. You can connect to it from the ASP.NET Core application. To do that, navigate to the ClientApp directory on command prompt and run npm start command to start the react development server.

  

  Copy the development server URL from the command prompt, and replace the following line in Startup.cs,

  spa.UseReactDevelopmentServer(npmScript: "start");

  with,

  spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");

  Execute the dotnet run command and you will notice it no longer starts the react development server in the background.

  

• In production mode, development-time features are disabled, and your dotnet publish configuration produces minified, efficiently bundled JavaScript files.

This react app doesn’t use redux, but you can also create the react with redux app using the following command.

dotnet new reactredux

Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

PS: If you found this content valuable and want to return the favour, then