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
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
ClientAppsubdirectory is a standard React application based on the
create-react-apptemplate. 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
npmcommands such as
- 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 runcommand, you notice that the development server from
To understand this, open Startup.cs and take a look at the
configuremethod code. The
UseSpamiddleware runs the react development server in development mode.
- As mentioned earlier, the
dotnet runcommand 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 startcommand to start the react development server.
Copy the development server URL from the command prompt, and replace the following line in Startup.cs,
dotnet runcommand 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
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.