Skip to main content

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.

  • Step 1: Install the templates
  • 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
  • Step 2: Create a new React App
  • dotnet new react
  • Step 3: Change Environment variable to “Development”
  • SET ASPNETCORE_Environment=Development
  • Step 4: Build the application
  • dotnet build
  • Step 5: Finally, run the app
  • 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.

    create a React app in 5 steps using dotnet cli

    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.

      ASP.NET Core React App Structure Comparison

      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.

      Dotnet run command for React App

      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.

      Starting 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.

      dotnet run command without React development server

    • 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 Buy Me A Coffee

    7 thoughts to “Create a React app in 5 steps using dotnet cli”

    1. Hello,
      I want to do one of the tasks using react +Typescript+webpack +dotnet.
      Can anyone please me out?
      I tried above commands but not happen.
      Can anyone send me a git repo or steps for my requirement asap?

    2. You will need to add
      “proxy”: “http://localhost:5000/”
      to ClientApp/package.json to allow react app connecting to the dotnet server

    3. finally, it happened. Thank you! This is a very useful topic for me. I will try to migrate my project, which is just beginning.

    Leave a Reply

    Your email address will not be published. Required fields are marked *