Client Setup Guide
Extract the client folder to wherever you would like to manage the react client on your computer. If you are using a code editor like VS Code, open the client folder. The project structure will look quite familiar if you have ever worked with React before. The src folder contains all the react components, and the public folder is for static assets.
Included already is a .gitignore file, so that node modules, etc. are excluded when you initialize source control on this folder. The .env files contain variables which point the app at either a localhost or the server in a production environment. The project.json contains a manifest of all the modules used by this application.
Install NPM packages
To install all the necessary packages, run the following command
Node Package Manager will then begin installing everything we need. Usually this takes about 3 minutes. Once that completes there will be a new directory in the client folder called node_modules.
Run the Application
We can now run the application with the following command:
The first time you run the application, this process may take longer than usual, but once it completes the application should be running at http://localhost:3000/
Because we are using npm start to create our application, the app will be running in development mode. In development mode, the react app will use https://localhost:7250/ as its api. This means that the .net web api project must be running for things to work!
Build / Production
Once you have your app in a publishable state, you will want to create a ‘build’ version of the client app. A build version is an optimized version ready for the web. To create, run the following command with npm:
npm run build
Once this completes, React will create a new folder in your project called build.
Move all the files from the build folder into the wwwroot folder in the AspNano.WebApi project (overwrite any existing files). Now when you publish the .Net application, the updated react app will be served to visitors as a single page application.
To learn about the React project, start with the Client Overview documentation