jhipster / generator-jhipster

JHipster is a development platform to quickly generate, develop, & deploy modern web applications & microservice architectures.
https://www.jhipster.tech
Apache License 2.0
21.56k stars 4.02k forks source link

React Support for client side #6044

Closed deepu105 closed 6 years ago

deepu105 commented 7 years ago

This is the central ticket for our React support. This will be an evolving ticket, I'll create a Project once we have identified TODO items clearly Any TODO must be added/modified to this opening comment.

The below is the Framework choices made so far:

The below are the initial list of TODO:

Modules

Issues/Bugs

Test cases

Application

Entity

cc @jhipster/developers

sudheerj commented 7 years ago

Hi Team, Is it Jhipster for React framework ready to use? I'am planning to create JHipster-PrimeReact module. Please let me know your feedback. If there is no demand for this then we can drop it for now. Thanks.

Regards, Sudheer

jdubois commented 7 years ago

Hi @sudheerj no we haven't released it yet, so it's not ready. There's no rush for you on that part - at least wait 1 month.

sudheerj commented 7 years ago

Sure @jdubois . I will start this module once it fully ready. As of now I focus on new features and udpates in JHipster-PrimeNG module. Thanks.

sdoxsee commented 7 years ago

As I get a little more familiar with the react community, it seems (I may be mistaken) that there is a move back towards Jest rather than Mocha for testing. Any new thoughts on this? I'm aiming to follow jhipster's lead with regards to tech choices for my current react project. Thanks.

deepu105 commented 7 years ago

@sdoxsee yes React community does a lot of things (some good, some bad) one among which particularly irritates me is that it tries very hard to move away from traditional or popular solutions to existing problems and builds its own which splits the community and cause a headache when it comes to technology choices. Especially If I'm naive I would think it deliberately tries to move away from any tools used by Angular community (This might just be me nagging)

I have compared both Jest and Karma + Mocha + Enzyme and to me, there is no much difference or huge advantage in using Jest. So I would rather stick to the one I'm used to and more comfortable in than switch to something new without a clear benefit. I guess in the end what matters is if the choices work for you and how productive you are in it and to me Karma + Mocha + Enzyme is more flexible and has a better plugin ecosystem

mraible commented 7 years ago

I created a react app with an older version of the jh-react branch today and found there were i18n issues and SCSS import issues when I chose to not use i18n and not use Sass.

Here's what I had to change to make it work:

https://gist.github.com/mraible/24ab2db6c139122aff6f1847b60f6e5a

I also found that I had to upgrade a number of dependencies in package.json to get rid of warnings. Here's the patch for that:

https://gist.github.com/mraible/c3292887e4a83f45185a2cc3f8e5df62

I'll see if these same issues happen with the current branch and create PRs if they do.

deepu105 commented 7 years ago

@mraible i18n & sass issues are already fixed. For dependencies yes updates needed as I see there are TS warnings for react libs which I didnt see earlier

ValIvanov commented 6 years ago

Will jHipster have the server side rendering for React?

dimeros commented 6 years ago

So, can I ask you what's the more updated branch that we are working for this issue? Is it the master branch?

deepu105 commented 6 years ago

yes master branch

Thanks & Regards, Deepu

On Thu, Jan 4, 2018 at 4:38 PM, dimeros notifications@github.com wrote:

So, can I ask you what's the more updated branch that we are working for this issue? Is it the master branch?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/6044#issuecomment-355314032, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlFxIRoOdjNXSuy-5ipwKouC7oX8YCks5tHPBogaJpZM4OP0h8 .

svpace commented 6 years ago

May I ask why create a custom i18n solution instead of using one of the existing solutions (react-intl, react-i18next, lingui, ...)?

jdubois commented 6 years ago

So it's compatible with our existing i18n solution with Angular and AngularJS (which comes from Angular Translate, in fact). Otherwise we would need to re-write all translations, and we have a lot of them.

svpace commented 6 years ago

It seems to me that adding some conversion code for the translation files into the generator would be a simpler (more generator-oriented) solution. Do you believe this something worth exploring?

deepu105 commented 6 years ago

@svpace yes if it can be done during generation time without any issues it could be considered but its not a priority for me, you can PR it if you like and ill consider it to replace current custom implementation. I would still like to keep the wrapper component used today if possible so that any future change doesn't involve changing all pages

svpace commented 6 years ago

I am not able to make a proper PR right now. I was just curious about why you guys decided to write this stuff from scratch. Anyway, nice work.

tianlinzx commented 6 years ago

when will the react be pushed to major generator ?

deepu105 commented 6 years ago

@tianlinzx its already available just run jhipster --experimental

kumikumi commented 6 years ago

I'm new to JHipster and I'm confused.

I tried installing generator-jhipster from both yarn and npm, and in both cases I also tried running the generator with jhipster --experimental and it only offers Angular 5 as the front-end framework. How to get React?

gmarziou commented 6 years ago

Works for me, what does jhipster --version print? Which kind of application are you generating?

image

If you're new to JHipster, it might not be the best idea to start with experimental features.

kumikumi commented 6 years ago

Found the problem. I had selected "OAuth2" instead of JWT authentication. React is selectable after selecting JWT authentication.

gmarziou commented 6 years ago

Yes for the moment it's safer stick with default options.

tianlinzx commented 6 years ago

Is react available for "OAuth2" option now ?

deepu105 commented 6 years ago

Not yet.

On Sun, 4 Mar 2018, 1:49 am tianlinzx, notifications@github.com wrote:

Is react available for "OAuth2" option now ?

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/6044#issuecomment-370192404, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlF0I4tFKdQdkFHkrluQRe4ZhCfoZcks5tazoMgaJpZM4OP0h8 .

deepu105 commented 6 years ago

@mraible may be able to help with getting React working with Oauth :smile:

mraible commented 6 years ago

@tianlinzx @deepu105 I'll try to take a look this week.

mraible commented 6 years ago

@deepu105 I enabled the React option when selecting OAuth 2.0 and it fails on install:

ERROR in ./src/main/webapp/app/modules/administration/index.tsx
Module not found: Error: Can't resolve './user-management' in '/Users/mraible/apps-v5/react/src/main/webapp/app/modules/administration'
 @ ./src/main/webapp/app/modules/administration/index.tsx 5:24-52
 @ ./src/main/webapp/app/routes.tsx
 @ ./src/main/webapp/app/app.tsx
 @ ./src/main/webapp/app/index.tsx
 @ multi react-hot-loader/patch ./src/main/webapp/app/index

ERROR in ./src/main/webapp/app/shared/reducers/index.ts
Module not found: Error: Can't resolve 'app/modules/administration/user-management/user-management.reducer' in '/Users/mraible/apps-v5/react/src/main/webapp/app/shared/reducers'
 @ ./src/main/webapp/app/shared/reducers/index.ts 9:32-109
 @ ./src/main/webapp/app/config/store.ts
 @ ./src/main/webapp/app/index.tsx
 @ multi react-hot-loader/patch ./src/main/webapp/app/index

ERROR in [at-loader] ./src/main/webapp/app/modules/administration/index.tsx:4:28
    TS2307: Cannot find module './user-management'.

ERROR in [at-loader] ./src/main/webapp/app/shared/reducers/index.ts:9:28
    TS2307: Cannot find module 'app/modules/administration/user-management/user-management.reducer'.

ERROR in [at-loader] ./src/test/javascript/spec/app/modules/administration/user-management/user-management.reducer.spec.ts:4:46
    TS2307: Cannot find module 'app/modules/administration/user-management/user-management.reducer'.
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
If you find JHipster useful consider supporting our collective https://opencollective.com/generator-jhipster

Server application generated successfully.

Run your Spring Boot application:
 ./mvnw
events.js:137
      throw er; // Unhandled 'error' event
      ^

Error: ERROR! webpack:build failed.
    at Environment.error (/Users/mraible/dev/generator-jhipster/node_modules/yeoman-environment/lib/environment.js:157:40)
    at module.exports.error (/Users/mraible/dev/generator-jhipster/generators/generator-base.js:2054:18)
    at module.exports.end (/Users/mraible/dev/generator-jhipster/generators/client/index.js:399:18)
    at Object.<anonymous> (/Users/mraible/dev/generator-jhipster/node_modules/yeoman-generator/lib/index.js:399:25)
    at /Users/mraible/dev/generator-jhipster/node_modules/yeoman-generator/node_modules/run-async/index.js:25:25
    at new Promise (<anonymous>)
    at /Users/mraible/dev/generator-jhipster/node_modules/yeoman-generator/node_modules/run-async/index.js:24:19
    at self.env.runLoop.add.completed (/Users/mraible/dev/generator-jhipster/node_modules/yeoman-generator/lib/index.js:400:11)
    at runCallback (timers.js:756:18)
    at tryOnImmediate (timers.js:717:5)
mraible commented 6 years ago

Figured it out! https://github.com/jhipster/generator-jhipster/pull/7243

deepu105 commented 6 years ago

Thanks Matt

On Wed, 7 Mar 2018, 3:21 am Matt Raible, notifications@github.com wrote:

Figured it out! #7243 https://github.com/jhipster/generator-jhipster/pull/7243

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/6044#issuecomment-370999752, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlFxU4JAvJFjRhXDyR2erHsVd_nvyyks5tb0QMgaJpZM4OP0h8 .

pascalgrimaud commented 6 years ago

I noticed some differences for indentation between Angular and React. Angular uses 4 spaces and React uses 2 spaces. Is it intended ?

deepu105 commented 6 years ago

Yes, I was hopping we could switch to 2 space for Angular as well, as it makes code more conscise and less wrapping

On Wed, 7 Mar 2018, 8:43 am Pascal Grimaud, notifications@github.com wrote:

I noticed some differences for indentation between Angular and React. Angular uses 4 spaces and React uses 2 spaces. Is it intended ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/6044#issuecomment-371051552, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlFwaGq9aF2yPEpcu8RB9nR5wsRh9Fks5tb4-NgaJpZM4OP0h8 .

jdubois commented 6 years ago

@deepu105 @agaspardcilia @chrisdns I think many of the TODOs are done here -> could you check them?

agaspardcilia commented 6 years ago

Yes, indeed. Concerning Issues/Bugs,

are done. Maybe we could try to make everything notification use Toaster.

Entity support has been improved. Pretty much everything that is mentioned in the OP is done. The only things that remains are:

Role management remain to be done though. And it's a pretty important feature.

deepu105 commented 6 years ago

@jdubois we are becoming more and more BETA ready, what would really help now is testing and finding issues. So if @jhipster/developers can help to test the combinations that are mentioned in the first post and mark the ones that are working and comment on issues that are found it would be super helpful.

Some things to note when testing: We are not trying to replicate everything exactly as in Angular so there will be some minor differences and those are ok (for example notification).

adamhp commented 6 years ago

I just received the following after generating with the --experimental and React...

Server and db are up and running, I run yarn start, and get some weird errors. I also get these errors in VSCode.

ERROR in [at-loader] ./src/main/webapp/app/shared/layout/header/header.tsx:49:13
    TS2459: Type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>' has no property 'currentLocale' and no string index signature.

ERROR in [at-loader] ./src/main/webapp/app/shared/layout/header/header.tsx:49:28
    TS2459: Type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>' has no property 'isAuthenticated' and no string index signature.

ERROR in [at-loader] ./src/test/javascript/spec/app/shared/layout/header.spec.tsx:19:17
    TS2339: Property 'isAuthenticated' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Header> & Readonly<{ children?: ReactNode; }> & Re...'.
webpack: Failed to compile.

I did notice one small oddity:

webpack output is served from /
Content not from webpack is served from ./target/www

Though I don't know if this is indicative of an issue... webpack being served from /?

deepu105 commented 6 years ago

Are you using master or latest release? master is more stable use that please

Thanks & Regards, Deepu

On Thu, Mar 22, 2018 at 5:52 PM Adam Pearce notifications@github.com wrote:

I just received the following after generating with the --experimental and React...

Server and db are up and running, I run yarn start, and get some weird errors. I also get these errors in VSCode.

ERROR in [at-loader] ./src/main/webapp/app/shared/layout/header/header.tsx:49:13 TS2459: Type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>' has no property 'currentLocale' and no string index signature.

ERROR in [at-loader] ./src/main/webapp/app/shared/layout/header/header.tsx:49:28 TS2459: Type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>' has no property 'isAuthenticated' and no string index signature.

ERROR in [at-loader] ./src/test/javascript/spec/app/shared/layout/header.spec.tsx:19:17 TS2339: Property 'isAuthenticated' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

& Readonly<{ children?: ReactNode; }> & Re...'. webpack: Failed to compile.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/6044#issuecomment-375378122, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlFy3M-nAXYB5iZHxzJ3D5aBcFRnPCks5tg9bNgaJpZM4OP0h8 .

tradfursten commented 6 years ago

I tried to use the react client and the project failed in the initial generation.

It produced a large stacktrace:

1871ms asset optimization
Hash: 8f0e578ce07b80753732
Version: webpack 3.8.1
Time: 21643ms
 7 assets
[./src/main/webapp/app/app.scss] ./src/main/webapp/app/app.scss 1.35 kB {1} [built]
       [] -> factory:992ms building:14ms = 1006ms
[./src/main/webapp/app/app.tsx] ./src/main/webapp/app/app.tsx 3.82 kB {1} [built]
       [] -> factory:70ms building:625ms dependencies:172ms = 867ms
[./src/main/webapp/app/config/axios-interceptor.ts] ./src/main/webapp/app/config/axios-interceptor.ts 2.2 kB {1} [built]
       [] -> factory:16ms building:308ms dependencies:2851ms = 3175ms
[./src/main/webapp/app/config/devtools.tsx] ./src/main/webapp/app/config/devtools.tsx 1.65 kB {1} [built]
       [] -> factory:73ms building:665ms dependencies:65ms = 803ms
[./src/main/webapp/app/config/error-middleware.ts] ./src/main/webapp/app/config/error-middleware.ts 2.47 kB {1} [built]
       [] -> factory:646ms building:157ms dependencies:2170ms = 2973ms
[./src/main/webapp/app/config/store.ts] ./src/main/webapp/app/config/store.ts 2.82 kB {1} [built]
       [] -> factory:16ms building:187ms dependencies:608ms = 811ms
[./src/main/webapp/app/config/translation.ts] ./src/main/webapp/app/config/translation.ts 2.86 kB {1} [built]
       [] -> factory:16ms building:260ms = 276ms
[./src/main/webapp/app/index.tsx] ./src/main/webapp/app/index.tsx 2.57 kB {1} [built]
       [] -> factory:75ms building:3821ms = 3896ms
[./src/main/webapp/app/reducers/action-type.util.ts] ./src/main/webapp/app/reducers/action-type.util.ts 1.45 kB {1} [built]
       [] -> factory:364ms building:279ms = 643ms
   [0] multi react-hot-loader/patch ./src/main/webapp/app/index 40 bytes {1} [built]
        factory:1ms building:1ms = 2ms
[./src/main/webapp/app/reducers/authentication.ts] ./src/main/webapp/app/reducers/authentication.ts 8.63 kB {1} [built]
       [] -> factory:17ms building:487ms dependencies:2672ms = 3176ms
[./src/main/webapp/app/reducers/index.ts] ./src/main/webapp/app/reducers/index.ts 1.85 kB {1} [built]
       [] -> factory:1689ms building:704ms dependencies:5ms = 2398ms
[./src/main/webapp/app/reducers/locale.ts] ./src/main/webapp/app/reducers/locale.ts 1.63 kB {1} [built]
       [] -> factory:574ms building:267ms = 841ms
[./src/main/webapp/app/routes.tsx] ./src/main/webapp/app/routes.tsx 2.22 kB {1} [built]
       [] -> factory:255ms building:294ms dependencies:1932ms = 2481ms
[./src/main/webapp/i18n/sv .json$] ./src/main/webapp/i18n/sv nonrecursive .json$ 505 bytes {1} [built]
       [] -> factory:487ms building:28ms = 515ms
    + 1714 hidden modules

ERROR in [at-loader] ./node_modules/@types/react-router/node_modules/@types/react/index.d.ts:3757:13 
    TS2403: Subsequent variable declarations must have the same type.  Variable 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.

ERROR in [at-loader] ./node_modules/@types/react-router/node_modules/@types/react/index.d.ts:3758:13 
    TS2403: Subsequent variable declarations must have the same type.  Variable 'abbr' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.

and in the end errors like:

ERROR in [at-loader] ./src/main/webapp/app/modules/administration/user-management/index.tsx:18:7 
    TS2605: JSX element type 'Route<RouteProps>' is not a constructor function for JSX elements.

ERROR in [at-loader] ./src/main/webapp/app/modules/administration/user-management/user-management.tsx:68:11 
    TS2605: JSX element type 'Link' is not a constructor function for JSX elements.

ERROR in [at-loader] ./src/main/webapp/app/modules/home/home.tsx:56:19 
    TS2605: JSX element type 'Link' is not a constructor function for JSX elements.
  Types of property 'render' are incompatible.
    Type '() => ReactNode' is not assignable to type '{ (): string | number | false | Element | ReactPortal | Element[]; (): ReactNode; (): ReactNode; ...'.
      Type 'ReactNode' is not assignable to type 'string | number | false | Element | ReactPortal | Element[]'.
        Type 'true' is not assignable to type 'string | number | false | Element | ReactPortal | Element[]'.

ERROR in [at-loader] ./src/main/webapp/app/modules/login/login.tsx:50:14 
    TS2605: JSX element type 'Redirect' is not a constructor function for JSX elements.
  Types of property 'render' are incompatible.
    Type '() => ReactNode' is not assignable to type '{ (): string | number | false | Element | ReactPortal | Element[]; (): ReactNode; (): ReactNode; ...'.
      Type 'ReactNode' is not assignable to type 'string | number | false | Element | ReactPortal | Element[]'.
        Type 'true' is not assignable to type 'string | number | false | Element | ReactPortal | Element[]'.

ERROR in [at-loader] ./src/main/webapp/app/modules/login/logout.tsx:21:9 
    TS2605: JSX element type 'Redirect' is not a constructor function for JSX elements.

ERROR in [at-loader] ./src/main/webapp/app/routes.tsx:14:5 
    TS2605: JSX element type 'Route<RouteProps>' is not a constructor function for JSX elements.
  Types of property 'render' are incompatible.
    Type '() => ReactNode' is not assignable to type '{ (): string | number | false | Element | ReactPortal | Element[]; (): ReactNode; (): ReactNode; ...'.
      Type 'ReactNode' is not assignable to type 'string | number | false | Element | ReactPortal | Element[]'.
        Type 'true' is not assignable to type 'string | number | false | Element | ReactPortal | Element[]'.

ERROR in [at-loader] ./src/main/webapp/app/routes.tsx:15:5 
    TS2605: JSX element type 'Route<RouteProps>' is not a constructor function for JSX elements.

ERROR in [at-loader] ./src/main/webapp/app/routes.tsx:16:5 
    TS2605: JSX element type 'Route<RouteProps>' is not a constructor function for JSX elements.

ERROR in [at-loader] ./src/main/webapp/app/routes.tsx:19:5 
    TS2605: JSX element type 'Route<RouteProps>' is not a constructor function for JSX elements.
error Command failed with exit code 2.
error Command failed with exit code 1.
error Command failed with exit code 1.

I'm using version 4.14.1 and the experimental flag.

gmarziou commented 6 years ago

@tradfursten 4.14.1 is obsolete for React code, the latest code is on master branch. Either wait for JHipster 5 beta release that should be released soon or use master (see https://stackoverflow.com/questions/48898465/jhipster-5-availability/48899481)

hsellik commented 6 years ago

Using Jhipster 4.14.1 with --experimental for React.

How to implement the social login buttons? The "tip" I found on jHipster doc is for angular. Could not find any information for React.

deepu105 commented 6 years ago

We have removed support for Social Login, Please use the Oauth2/OIDC option along with Keykloak or Okta for that

Thanks & Regards, Deepu

On Fri, Mar 30, 2018 at 1:47 PM Hendrig Sellik notifications@github.com wrote:

Using Jhipster 4.14.1 with --experimental for React.

How to implement the social login buttons? The "tip" I found on jHipster doc is for angular. Could not find any information for React.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/6044#issuecomment-377508298, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlFyIQXAlxj8yUEXJOmMNKvHvROG6Nks5tjhs1gaJpZM4OP0h8 .

tianlinzx commented 6 years ago

@gmarziou BTW, when will JHipster5-Beta be released ?

gmarziou commented 6 years ago

Easy one: when it's ready :wink: In April probably

deepu105 commented 6 years ago

@jhipster/developers the React client should be much more stable and feature complete now, please test and report any issue found here

pascalgrimaud commented 6 years ago

Here some React builds: https://travis-ci.org/hipster-labs/jhipster-travis-build/builds/359716846 There are some configurations which didn't work yet.

deepu105 commented 6 years ago

7392 should fix many of the issues

deepu105 commented 6 years ago

@agaspardcilia @chrisdns can you guys check the issue/bug items that are not ticked yet? Also can you guys test the combinations mentioned in the original comment and update any issues found?

deepu105 commented 6 years ago

Also we need to add some protractor tests. The skeleton files are already there, it needs some cleanup and fixes. Also needs template for entity. We can reuse them from Angular with some slight modifications

agaspardcilia commented 6 years ago

@deepu105, @chrisdns did almost every Protractor tests, he called in sick today so it should be PRd tomorrow.

jdubois commented 6 years ago

Awesome! BTW we'll all need to meet next week at Devoxx :-)

deepu105 commented 6 years ago

Yup, we can check and mark things together :)

Thanks & Regards, Deepu

On Tue, Apr 10, 2018 at 9:38 AM Julien Dubois notifications@github.com wrote:

Awesome! BTW we'll all need to meet next week at Devoxx :-)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/6044#issuecomment-380004763, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlFyMtY4YkYertrgXFzDM_4bh9RkjMks5tnGGMgaJpZM4OP0h8 .

vishal423 commented 6 years ago

I was looking at admin module codebase to see how react and redux are integrated, and noted that we don't fully leverage cache/store. I am not sure if this already got discussed and reasoning to make n/w calls instead of lookup from redux store (which already have same data).