ABP React Template V2

Introduction

V2 of the React Starter Template for ABP application with Next.js, Tailwind CSS, and shadcn-ui is ready to use. You can use this template to start your next project. This template uses the Next.js App Directory Structure. It is easy to use and extend.

Removed DaisyUI

I have removed DaisyUI from the template. I have added shadcn-ui instead of DaisyUI. shadcn-ui provides a lot of components out of the box. You can find the documentation here.

Getting Started

Prerequisites

• Node.js
• pnpm
• ABP Framework

Installing Template

Install the ABP React .Net Template

dotnet new install Anto.Abp.React.Template

Note: This only creates React Application. You need to create an ABP application separately. You can find the documentation here.

Creating a new project

Create a new project using the template

dotnet new abp-react -o my-project-name

Note: You can use any name for the project. I used my-project-name for this example. keep in mind that the project name should be in kebab case (all lowercase and words separated by hyphens) because it will be used as the name of the packages org name.

Running the project

cd my-project-name
pnpm install
pnpm dev

Note: You can use any other package manager instead of pnpm. But I recommend using pnpm. It's fast and reliable. Make sure you have ABP application is running before running the app.

Demo Application

You can find the demo application here. You can use the following credentials to login.

• Username: admin
• Password: 1q2w3E*

Source Code

You can find the source code on GitHub.

If you find this template useful, please consider starring the repository. It will help others to find it easily.

Major Changes

• Removed DaisyUI
• Added shadcn-ui
• Removed turbo repo
• Simplified the template
• Added more components sample components based on shadcn-ui
• cookie based authentication
• Better tenant management

Conclusion

This template is a good starting point for your next project. You can use it to create any kind of application. It supports SSR, CSR, and static pages. You can use it to create a dashboard, portal, or a public website. If you have any questions or suggestions, feel free to write them in the comments below.