Now, we will scaffold one project with IDE and another project with command line interface. For the purpose of this demo, I have created two subfolders, spa_cli, this will hold the project that will be scaffolded using command line interface; and the other folder, spa_ide, this will hold the project that I will be scaffolding using Visual Studio. Let's go to Visual Studio now and scaffold the project.
Once the project is created, it will try to resolve a lot of dependencies. It has two types of dependencies: one is .NET dependencies that we can see from this folder, Dependencies; and another one is NPM dependencies. This project will be dependent on a lot of node packages. So Visual Studio will automatically download all the dependencies, and when all are done, it will say, installing packages complete.
There it is, so our project is ready. OK, as we see that there are many folders and files and components in this new project. I will explain what they are in the next module. Now, I will go to the command line interface and create a new project from there. So, let's go to the folder that I have created for the project. Right-click, hold the Shift, right-click, and open a command line here.
OK, and now we need to resolve the node dependencies by installing the node packages, npm install. This is going to take a minute or so to install all the dependencies. All right, all the dependencies are resolved. And also to mention that if you want to create a project with other framework, then you just type, say, you want to create with the Vue, so dotnet new vue.
If you want create a project with Knockout as the front-end framework, just type knockout. Now, let go to the Explorer window and see what happened there. I am going to click on the spa_cli. OK, now, we see the files that are created. I will now double-click the project to open the project in Visual Studio. OK, we now have the project open in Visual Studio. Let's just run the debugger to see that the project is running properly.
It is going to build the project and run in the debugger mode. It succeeded. Now, this is coming because we are running it in the debugging mode in the developer environment. Now, our first project is created, and we see this template has given us three tabs, or three navigation options: Home, Counter, Fetch data. Counter, Increment, Counter. The data is being fetched from the server site using React.js.
There, our ASP app with React.js is up and running from Visual Studio Dev Environment.
- Setting up a dev environment
- Front-end frameworks
- Templates: React.js, Angular.js, Vue.js, Aurelia.js
- NodeServices and Node.js
- Single-page application services
- Using HMR (Hot Module Replacement)
- Performing server-side prerendering
- Using node-chartist
- Creating a database, tables, and stored procedures
- Creating data models, controllers, and actions
- Adding React components and subcomponents
- Testing and publishing an app