This series of tutorial teaches you to create a new ASP.NET Core MVC web application with react-redux and JWT authentication in Visual Studio Code and use it as a template or boilerplate for our future use.
Contents
- Who this tutorial is for?
- Why not use already existing React-Redux Template provided by Microsoft?
- Overview
- Prerequisites
Who this tutorial is for?
This tutorial is for you if:
- you are already familiar with ASP.NET Core.
- you have a good grasp on JavaScript, ES6, React and Redux.
- you are looking forward to learn how to Setup ASP.NET Core with React-Redux web application from scratch.
Why not use already existing React-Redux Template provided by Microsoft?
There is a built-in template for asp.net 2 application with react-redux. To create this project type, we should run dotnet new reactredux instead of dotnet new mvc in a terminal window. But there are a few points that I was persuaded to create my own template.
- Existing Template comes with lots of features that are already set up.
When you create a new project using dotnet new reactredux command. It creates a new dotnet core project with React and Redux added to it. It also set up Babel and Webpack for you and add some default libraries like bootstrap.js. All these things need setup and connections to work. If you use this template you may not understand how they really connected to each other and how they work. So, creating your own project will help you understand how to set up everything related to your project and also prevent unnecessary libraries to be included with your project.
- It uses Typescript instead of JavaScript, which I’m not a big fan of it.
As you know, TypeScript is a superset of JavaScript which primarily provides optional static typing, classes, and interfaces. One of the big benefits is that IDEs can provide a richer environment for spotting common errors as you type the code.
Actually, I’m a C# developer and I really liked using Typescript at first but there are few problems when you use it with react:
- Usually, the learning courses of React and Redux aren’t using Typescript.
- When you search on the internet for an issue related to React you will find it in JavaScript.
- Most of the time open source packages and component that you may use are not using Typescript.
After dealing with these problems I decided to not using Typescript. But, it is totally up to you; In fact, it brings lots of benefits with it, but it also has lots of headaches. So, I will not use it in this tutorial.
- Implement Authentication
We mostly wrote asp.net core applications that require individual authentication so it was good to have a template with authentication already setup. One of the easiest solutions to implement OpenID Connect server in our ASP.NET Core Application is to use OpenIddict package. We will learn how to implement authentication using OpenIddict in this tutorial.
Overview
This tutorial is consist of below topics :
Get Started
To get started we will create an ASP.NET Core application, then we will setup Webpack and Babel. Next, we will create a simple React project with react-navigation and enable hot module replacement. In the end, we will solve server vs. client-side routing problems.
Setup Authentication in ASP.NET Core Web Application
In this section, we will learn how to add Entity Framework core to our project. Then we will learn to implement an OpenID Connect server in our ASP.NET Core application with simple and easy-to-use OpenIddict package.
Implement React-Redux Application
Now, that we did a great job in our server-side application, it’s time to implement our client side with react-redux. We already added a React project in “Get Started” section; so first, we will add Redux to project. Next, we will implement sign-in and sign-up in React-Redux project.
