Giter Club home page Giter Club logo

abp-react's Introduction

ABP React

This repo is a work in progress(preparing for beta release). Check the Current Status in the Project Board. This project can be used as a drop-in replacement for the Angular UI of the ABP Framework.

Demo

You can see a demo of the app here

Getting Started

Documentation

You can find the documentation here

Prerequisites

Installing Template

Install the ABP React .Net Template

dotnet new install Anto.Abp.React.Template

Creating a new project

Create a new project using the template

dotnet new abp-react -o my-project-name --apiUrl abp.antosubash.com

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.

Update the Environment Variables

I have added the sample environment variables in the .env.sample file. You can update the values according to your project.

Running the project

cd my-project-name
pnpm install
pnpm dev

What is this?

This is a React UI for the ABP Framework. We are working on a beta release and it is officially not ready for production, However, you can use it with your own risk. It uses AbpTemplate as the backend. It is built using Next.js, TypeScript and Tailwind CSS.

Why Use ABP React?

The main reason is React and Next.js. In the modern web you need a framework which can build a fast and SEO friendly website. React and Next.js are the best options for that. You can build a static, SSR and CSR website with Next.js. It is also very easy to integrate with ABP Framework.

LightHouse Score

Lighthouse Score

The score is for the landing page. other pages are not yet checked for with lighthouse. you can check the score for the landing page here.

Goals

The goal of this project is to provide a React UI for the ABP Framework. It will be a fully functional UI that can be used as a starting point for any ABP project. It will also be a reference for anyone who wants to build a React UI for ABP. We will try to implement all the features of the ABP Framework Open Source Application.

Features

  • Landing Page
  • Login, Logout, Register, Forgot Password
  • Multilingual
  • Theme Switcher
  • Profile
  • Tenant Management
  • Role Management
  • User Management
  • Settings Management
  • Feature Management

Roadmap

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.

Support

If want to build your project with ABP React and need support, you can contact me at [email protected]

How to run

  1. Clone the repo
  2. cd into the src folder
  3. Run pnpm install
  4. Run pnpm dev

How to contribute

  1. Fork the repo
  2. Create a branch for your feature
  3. Make your changes
  4. Create a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details

Acknowledgments

Contributors

abp-react's People

Contributors

antosubash avatar dependabot[bot] avatar github-actions[bot] avatar sajanv88 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

abp-react's Issues

Always session is triggering even each and every screen redirect.

"next": "13.2.1",
"react": "18.2.0",

I am facing issue on screen redirection; it's all screen before it's asking for a session, and it's taking 10 more seconds time some times.

I am taken skeleton; from here it's self. any solution to avoid always trigger session api. how can we handle this.

image image

How i can handle this give me any suggestion to handle.

Error on generating new ABP React template

I tried generating a new template and using the ABP backend which has support for this template, but it seems I'm having an error during the build up phase. What can the issue be?

@my-project/ui:dev: src/Permission/PermissionActions.tsx(1,44): error TS2307: Cannot find module '@my-project/hooks' or its corresponding type declarations.

Create tenant

We should be able to create tenenat with following values

  • Name
  • Host
  • Connection String

List Tenant

Display tenant with list with pagination with following values.

  • Name
  • Host
  • Is Active
  • Edit
  • Delete

casl-react

Explore casl-react for managing permission

Create user

We should be able to create a user with the following values

User Info

  • username
  • password
  • name
  • surname
  • email
  • phone number
  • isActive
  • Lock on failed attempts

Roles

  • Roles list(checkboxes)

Authentication Required Error

I’m receiving the error message displayed on the screen. Upon detailed inspection of the code, I see that the isAuthenticated check is being performed on line 34 of the Admin.tsx file. However, this field, namely useCurrentUser, is not being populated anywhere. Could you please assist me with this issue?

image

image

only valid absolute URLs can be requested

Hi,

Nice work with this template. I'm trying not to get everything to work. But I keep getting stuck on this issue. Any idea on what it can be? I have the .env setup aswell.

bild

Asking about build project AbpReact docker

Hi friend,

I cloned your project in github and I got some problem when building and running in docker. Can you help me to resolve this?

The image below is the issue when I run docker built from you source and your dockerfile

IMG_0879

If you need any information please let me know

Move all the pages under the admin folder

Right now all the pages are in root folder. but these pages are mostly admin pages. normal users will not see them so we have to move all the pages under the admin folder.

Code Generation (plop.js)

We should be able to generate page, component, hooks, CRUD and package

  • Single Page
  • Component
  • hooks
  • package
  • CRUD Page (based on typescript entity)

Edit Tenant

We should be able to edit the tenant with following values.

  • Name
  • Host
  • Connection String
  • Is Active

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.