Closed deepu105 closed 6 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
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.
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.
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.
@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
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.
@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
Will jHipster have the server side rendering for React?
So, can I ask you what's the more updated branch that we are working for this issue? Is it the master branch?
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 .
May I ask why create a custom i18n solution instead of using one of the existing solutions (react-intl, react-i18next, lingui, ...)?
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.
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?
@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
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.
when will the react be pushed to major generator ?
@tianlinzx its already available just run jhipster --experimental
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?
Works for me, what does jhipster --version
print? Which kind of application are you generating?
If you're new to JHipster, it might not be the best idea to start with experimental features.
Found the problem. I had selected "OAuth2" instead of JWT authentication. React is selectable after selecting JWT authentication.
Yes for the moment it's safer stick with default options.
Is react available for "OAuth2" option now ?
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 .
@mraible may be able to help with getting React working with Oauth :smile:
@tianlinzx @deepu105 I'll try to take a look this week.
@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)
Figured it out! https://github.com/jhipster/generator-jhipster/pull/7243
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 .
I noticed some differences for indentation between Angular and React. Angular uses 4 spaces and React uses 2 spaces. Is it intended ?
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 .
@deepu105 @agaspardcilia @chrisdns I think many of the TODOs are done here -> could you check them?
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.
@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).
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 /?
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 .
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.
@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)
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.
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 .
@gmarziou BTW, when will JHipster5-Beta be released ?
Easy one: when it's ready :wink: In April probably
@jhipster/developers the React client should be much more stable and feature complete now, please test and report any issue found here
Here some React builds: https://travis-ci.org/hipster-labs/jhipster-travis-build/builds/359716846 There are some configurations which didn't work yet.
@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?
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
@deepu105, @chrisdns did almost every Protractor tests, he called in sick today so it should be PRd tomorrow.
Awesome! BTW we'll all need to meet next week at Devoxx :-)
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 .
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).
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
--skip-user-management
flag--jhi-prefix
flag--skip-server
flagEntity
cc @jhipster/developers