ABP React Template

Introduction

React Starter Template for ABP application with Next.js and Tailwind CSS is ready to use. You can use this template to start your next project.

Why?

I have been working on a project that uses ABP Framework, Next.js and Tailwind CSS for a while and I want to create a template that will kickstart my next project easily. Since ABP doesn't have React Template yet. I thought it would be useful for others as well. So, I decided to share it with you. I hope you find it useful.

What is ABP Framework?

ABP Framework is a full stack web application framework. It is based on ASP.NET Core. It provides a lot of features out of the box. You can use it to build enterprise applications. It is free and open source. You can find the source code on GitHub. You can also find the documentation on docs.abp.io.

What is Next.js?

Next.js is a React framework. It removes lots of complexity of the react application. It is free and open source. You can find the source code on GitHub.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework. You can find the source code on GitHub.

Getting Started

Prerequisites

• Node.js
• pnpm
• ABP Framework
• .Net 7

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

Best Use Case

The best use case is to create customer facing applications. You can use it to create a dashboard or a portal. You can also use it to create a public website. The template is not limited to these use cases. You can use it to create any kind of application. It supports SSR, CSR and static pages.

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.

Key Technologies

• Next JS
• Tailwind CSS
• TypeScript
• DaisyUI
• Radix UI

Features

• Authentication
• Authorization
• Role Management
• User Management
• Tenant Management
• Localization
• Theming
• Responsive Design

Goals

• Provide a starter template for ABP Framework with React.
• It should be easy to use and extend.
• It should be easy to add new features.
• It should be easy to customize.
• It should be easy to integrate with ABP Framework.
• It should be up to date with ABP Framework and React.

The main focus is the customization. you should be able to bring your own Design system and UI components. I have only used Tailwind CSS and Radix UI for the demo application. You can use any other design system and UI components.

Special Thanks

Special thanks to Sajan for his help. His help was invaluable. I started this project a while ago. But I couldn't find time to finish it. He helped me to finish it. Thanks a lot, Sajan.

Documentation

I'm working on the documentation. It will be available soon.

Contributing

I'm open to contributions. Please feel free to open an issue or a pull request.

What to expect next?

Multi-tenant support is coming soon. I'm working on it. I will update this post when it's ready. I will also update the documentation.

Road map

Most of the features are implemented. We are planning to keep it similar to the ABP Framework Open Source Application. That means all the commercial features will not be implemented.

Conclusion

I hope you find this template useful. If you have any questions or suggestions, please feel free to open an issue or a pull request. I will try to answer them as soon as possible. Thanks for reading. Happy coding!