Table of contents
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.
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.
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-namefor 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.
You can find the demo application here. You can use the following credentials to login.
- Username: admin
- Password: 1q2w3E*
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.
- Next JS
- Tailwind CSS
- Radix UI
- Role Management
- User Management
- Tenant Management
- Responsive Design
- 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 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.
I'm working on the documentation. It will be available soon.
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.
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.
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!