Aspnetboilerplate: React integration

[okezieokpara]

I have been using this framework for a while and it's good.
However, I wish there was also a version for React, since most of us now use React instead of angular.
I can help contribute to that, if there are others to join me.
I have already built a React app for Abp framework before, so this will not take so long.

[acjh]

Related: #2804

[hikalkan]

@okezieokpara

It's very appreciated if you can create a simple startup template like we did for angular. A few notes:

You can take this repository as a reference: https://github.com/aspnetboilerplate/module-zero-core-template

I actually expect that the server side of this template just should be reused without much modification. Because client and server is completely seperated.

For the client part, you can take angular folder as a reference: https://github.com/aspnetboilerplate/module-zero-core-template/tree/master/angular

So, you can clone the repository https://github.com/aspnetboilerplate/module-zero-core-template, create a react folder inside it and start working. We will accept your pull request and add react option to the template builder (https://aspnetboilerplate.com/Templates) when it's completed.

[AlexSenchenko]

@okezieokpara if you need assistance let me know, I can help too.

[okezieokpara]

Thanks.
Is there an HTML template we can use, or are we free to implement one from scratch?

[hikalkan]

There is no HTML template. I suggest to take current angular template as a start point. It uses the BSB admin theme: https://github.com/gurayyarar/AdminBSBMaterialDesign

[AlexSenchenko]

@okezieokpara https://github.com/mui-org/material-ui is one of the most popular

[welsonplay]

I'm also willing to help with the project with React.

As for the theme, if it follows the same pattern as the others, we can use AdminBSBMaterialDesign, but the problem I see in it is that we would not develop using pure React and get stuck in JQuery, which I do not think is good.

I find it very interesting to use the material-ui that @AlexSenchenko spoke about.

[AlexSenchenko]

@okezieokpara @welsonplay @hikalkan let organize a new repository for this?

[welsonplay]

certainly. We need to create a roadmap to facilitate the evolution of the project.

[okezieokpara]

I just forked the project at https://github.com/okezieokpara/module-zero-core-template
May be I can start from there

[AlexSenchenko]

@okezieokpara I would rather prefer to create it at @aspnetboilerplate org

[okezieokpara]

I also created a new branch named "react" and a new folder "react".
Then I add a "Create React App" App.
@AlexSenchenko I don't have that access

[AlexSenchenko]

May be @hikalkan can assists here.

[hikalkan]

I think that you can fork it, develop and send a pull request.

[AlexSenchenko]

@okezieokpara let me know when we can start

[okezieokpara]

@AlexSenchenko We can all start now.
I will first install the template.
But we might need to look at the angular project to learn a few things

[okezieokpara]

So, I have been making a few changes to this. Though small changes (cos I am busy), you guys might want to take look.
Also, I will appreciate anyone with knowledge of Angular to help me walk through the Angular project

[muwae]

Hi, is anybody working on it?
I'm trying to integrate Antd-pro with abp, but I'm having difficulty integrating roles.

https://github.com/ant-design/ant-design-pro

[ryoldash]

@okezieokpara and @AlexSenchenko do you have any progress on React Project?

[ryoldash]

@hikalkan do you have any plan for React integration? I am ready to contribute Abp React integration with my team.

[AlexSenchenko]

@okezieokpara

and @AlexSenchenko do you have any progress on React Project?

Nope progress at all so far.

[ismcagdas]

@hikalkan do you have any plan for React integration? I am ready to contribute Abp React integration with my team.

@ryoldash not at the moment. But, if you can create a template with your team, we will be happy to add it to ABP's templates.

[hikalkan]

Any contribution is welcome. We can help if anyone wants to implement this (like Vuejs which was a contribution).

[ryoldash]

Any contribution is welcome. We can help if anyone wants to implement this (like Vuejs which was a contribution).

@hikalkan its been long time that I am reviewing Abp angular integration for react integration. If you have advise it will accelerate my reviewing process. I welcome your help.

[hikalkan]

You start to implement. We try to help on integration points. Like Vuejs guys have done, Clone the https://github.com/aspnetboilerplate/module-zero-core-template repository, create a react folder inside it and start the development. Then you can send PR when it's done.

[ryoldash]

You start to implement. We try to help on integration points. Like Vuejs guys have done, Clone the https://github.com/aspnetboilerplate/module-zero-core-template repository, create a react folder inside it and start the development. Then you can send PR when it's done.

@hikalkan I have planned the react integration process. We will make our initial PR on 04.11.2018.

@zztrk @mhmtyasr

[ryoldash]

@hikalkan we have started development of Abp React frontend. We will use React + Mobx + Typescript. For html template are we limited to use AdminBSBMaterialDesign or can we choose our flavor?
@mhmtyasr @zztrk @smtkby

[ismcagdas]

@ryoldash you can use another free template. Our VueJs template uses a different template for example.
If you have a template on mind, please share it.

[acjh]

AdminLTE was suggested in https://github.com/aspnetboilerplate/module-zero-core-template/issues/320.

[ismcagdas]

I also like AdminLTE 👍

[ryoldash]

@ismcagdas @acjh Thanks for your reply. We will choose the suitable template from one of these templates:

• AntDesign
• AdminLTE
• AdminBSBMaterialDesign

Inside module zero folder, reactjs folder and react folder structure has been created. You can track progress of react integration from https://github.com/ryoldash/module-zero-core-template

[ryoldash]

Continuing React coding, pull request will be made soon!

[AlexSenchenko]

@ryoldash any update here?

[ryoldash]

@AlexSenchenko we are about to finish integration. Pull request will be made in this weekend.

[ryoldash]

As usual plan has failed :) Need some days :) We are working on React integration. Code review and code refactoring is in progress. Abp React Integration will be available soon.

[AlexSenchenko]

Hi @ryoldash

Any update on this?

[ryoldash]

Hi @AlexSenchenko

React Integration almost done. You can watch updates from https://github.com/ryoldash/module-zero-core-template

[AlexSenchenko]

Hi @ryoldash

Do you have any update on finishing it?

Thanks

[ryoldash]

Hi @AlexSenchenko

Sorry for late reply. Abp React integration has been completed and Initial pull request has been made to Abp.While Abp team reviews the code, we will be making Code refactoring.
@hikalkan @ismcagdas @smtkby @mhmtyasr

[ryoldash]

Congrats community! Our pull request has been merged to master. We now have ReactJS integration for ABP.
https://github.com/aspnetboilerplate/module-zero-core-template/tree/master/reactjs

[ismcagdas]

Thanks a lot @ryoldash @mhmtyasr and @smtkby for your great contribution 😄

[yocabanes]

Congrats community! Our pull request has been merged to master. We now have ReactJS integration for ABP.
https://github.com/aspnetboilerplate/module-zero-core-template/tree/master/reactjs

@ryoldash Thanks to you and your team for this wonderful contribution. I downloaded the aspnetboilerplate Asp.Net Core with React template. I'm new to react, please could you/anyone point me out to how integrate the react folder/project into the asp.net core solution (since they come in different folders). Hope everybody understand !!!

[ryoldash]

You can find instructions regarding running the app in ReadMe file. You don't need to combine reactjs folder into aspnet-core folder. aspnet-core folder is Backend of your app and reactjs folder is Frontend of your app.

Detailed instructions about how to build react app with Asp.net Boilerplate will be available soon. We are planning to write a step by step "Howto" tutorial.

[yocabanes]

Thanks a lot @ryoldash for your comment, its really appreciated. I was able to run the react app successfully, my problem was related to integrate it into the asp.net solution since they are in separated folders. My question came up because I first downloaded the angularjs template (Asp.Net MVC), and everything is in the same solution (front-end and back-end) just separated by projects, and that's the way I'm familiar with. I'll wait for your mentioned detailed instructions about how to build react app with Asp.net Boilerplate, is there any time-frame for that ??

[ismcagdas]

@yocabanes we have changed the approach we used for AngularJS.
If you download Angular or VueJs version, you will see that they are also in separated folders.

We don't want to merge API project with the client app in the same solution.
If you work with this approach, you will like it as well I guess 😄

[yocabanes]

@ismcagdas Thanks for your comments, I already had noticed those three client apps are separated from the API project. As I said, I'm new on these front end frameworks, could you guys point me out on how to open/work any client app in VS (ex: react), since they don't have any project/solution file associated. Thanks

[ismcagdas]

@yocabanes sorry for my late response. We use VS Code for vue and react versions but we can create VS solution for them as well, you are right. Could you create a separate issue for that ?

[Fimblutter]

You can find instructions regarding running the app in ReadMe file. You don't need to combine reactjs folder into aspnet-core folder. aspnet-core folder is Backend of your app and reactjs folder is Frontend of your app.

Detailed instructions about how to build react app with Asp.net Boilerplate will be available soon. We are planning to write a step by step "Howto" tutorial.

@ryoldash Is there any updates regarding this "Howto" tutorial? I have problems on understanding the react project structure.

[mugambiwarwema]

You can find instructions regarding running the app in ReadMe file. You don't need to combine reactjs folder into aspnet-core folder. aspnet-core folder is Backend of your app and reactjs folder is Frontend of your app.
Detailed instructions about how to build react app with Asp.net Boilerplate will be available soon. We are planning to write a step by step "Howto" tutorial.

@ryoldash Is there any updates regarding this "Howto" tutorial? I have problems on understanding the react project structure.

We understand the effort into creating this template and simply sharing the step-by-step, something that can generate revenue.

If available, kindly share the tutorial, or advise how one can get.

[ismcagdas]

@mugambiwarwema do you mean something like this https://aspnetboilerplate.com/Pages/Documents/Zero/Startup-Template-Angular we have for Angular version ?

[mugambiwarwema]

Thank you very much. The link was very helpful with the angular part.

I want to wish you are able to assist here.

When I access localhost:4200/ I get redirected to /account/login then /app/home

How can I override this behavior (current routing) approach.

I with to have a landinpage component accessed when I hit the parent url

A boy dreams what a man does. 🙂

On 1 Jul 2019, at 08:40, İsmail ÇAĞDAŞ [e-mail] wrote:

@mugambiwarwema do you mean something like this https://aspnetboilerplate.com/Pages/Documents/Zero/Startup-Template-Angular we have for Angular version ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[ismcagdas]

Do you mean the React template or Angular ?

[ali-shishani]

Hi, thanks for everyone's contribution to implement React client.
I am working in a project and I used React client. It is following PWA design pattern and I need that to support offline capability at some point in my project.

My question:
I am currently planning to get the paid version of the Zero template and I would prefer to get full implementation of React. Is this an available option with the paid version of the Zero template?

If not, would it be a good option to continue developing the react with the paid version of the .Net Core API?

Thanks,
Ali

[maliming]

@ali-shishani

We are also thinking to add Vue or React version but it is not decided yet.

[ali-shishani]

@ali-shishani

We are also thinking to add Vue or React version but it is not decided yet.

Thanks @maliming, I appreciate the response. This will be great.

For the time being, I guess I will have to get the paid version and do some evaluation and see how it work with both options (react and angular). It will be great if I can generate paid project template so I can do my evaluation before I ask the client to pay for the subscription.

Cheers.

[sekmenhuseyin]

Hi @ryoldash

I have created a project with react template but I have some integration problems. In angular app there is nswag that creates typescript file from API address. But I couldn't understand and automate service files creation in react app

I would be very if you could help me
thanks

[ali-shishani]

Sorry this my first,

Why are you sending g this message to me?

Thanks,

---

Ali Shishani
IT Consultant/Sr. Full-Stack .Net Developer
Mobile: [phone]

"This email may contain confidential information. If I've sent it to you by accident, please delete it immediately."

---

From: Hüseyin Sekmenoğlu [e-mail]
Sent: Friday, February 7, 2020 12:38:20 AM
To: aspnetboilerplate/aspnetboilerplate [e-mail]
Cc: Ali Shishani [e-mail]; Mention [e-mail]
Subject: Re: [aspnetboilerplate/aspnetboilerplate] React integration (#2953)

Hi @ryoldashhttps://github.com/ryoldash

I have created a project with react template but I have some integration problems. In angular app there is nswag that creates typescript file from API address. But I couldn't understand and automate service files creation in react app

I would be very if you could help me
thanks

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/aspnetboilerplate/aspnetboilerplate/issues/2953?email_source=notifications&email_token=ADZ3L3VAAZCS2OO4DRLTOC3RBQHEZA5CNFSM4ENNIA22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEK7H3LI#issuecomment-582909357, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ADZ3L3RJBSVWLDW3U3O5O5LRBQHEZANCNFSM4ENNIA2Q.

[sekmenhuseyin]

Hi @ali-shishani
You are receiving this messages because your comment is added in a conversation you're subscribed to.

[behiunforgiven]

Do you have any plan to update antd version to 4?