Generator-jhipster: React Support for client side

[deepu105]

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:

• React written in Typescript
• Redux + react-redux + Axios + Promise middleware + redux-thunk
• React router v4
• Bootstrap 4 + Reactstrap
• Tslint + tslint-eslint + tslint-react
• Lodash
• Karma + Mocha + Chai + Enzyme for unit tests
• Sass support
• i18n custom with react-jhipster lib
• Webpack set up close to our Angular setup

The below are the initial list of TODO:

• [x] Merge the generator-jhipster-react library into a new branch in the generator-jhipster repo (@deepu105)
  
  
  
  • This is done and now lives in https://github.com/jhipster/generator-jhipster/tree/jh-react
  
  
• [x] Migrate to bootstrap from material UI (@sendilkumarn @deepu105)
• [x] Migrate to Typescript from ES6 + babel (@sendilkumarn @deepu105)
• [x] Find a solution for i18n so that our current files can be reused. If cannot find a lib write a plugin using counterpart adapting ngx-translate(@deepu105)
• [x] Add sample unit tests
• [x] Migrate entity sub generator
• [x] Implement a transform stream to strip i18n related stuff when its disabled
• [x] Cleanup structure and finish almost done pages if any (@deepu105)
• [x] add more travis builds for React(no i18n, sass, ws, Search, Oauth)
• [x] Add options to tempate for Auth, Sass, i18n etc
• [x] Migrate remaining account module pages
• [x] Supress React options for UAA
• [x] move reducers to feature folders
• [x] use import alias and align with new entity folder structure

Modules

• [x] Account: activate
• [x] Account: password
• [x] Account: register
• [x] Account: reset
• [x] Account: sessions
• [x] Account: settings
• [x] Admin: audits
• [x] Admin: configuration
• [x] Admin: docs
• [x] Admin: health
• [x] Admin: logs
• [x] Admin: metrics
• [x] Admin: tracker
• [x] Admin: gateway
• [x] Admin: user-management
• [x] Blocks: config
• [x] Blocks: handlers
• [x] Blocks: interceptors
• [x] Shared: alert
• [x] Shared: auth
• [x] Shared: form
• [x] Shared: language
• [x] Shared: login
• [x] Shared: profiles
• [x] Shared: util
• [x] shared:all
• [x] Home
• [x] Layouts:error
• [x] Layouts:navbar

Issues/Bugs

• [x] Error handling when authentication fails
• [x] Handling roles
• [x] No login errors when invalid password #6669
• [x] Changing password doesn't work #6670
• [x] Pagination componenet tries to paginate when there is no next page (needs unit tests in lib as well)
• [ ] Entity dialog page creates lot of methods to handle relations, try to remove and simplify those

Test cases

Application

• [x] Default options with i18n
• [x] Default options without i18n
• [ ] Default options with i18n prod profile
• [ ] Default options without i18n prod profile
• [x] Default options regenerate existing app
• [x] Default options with SASS
• [x] Default options with --skip-user-management flag
• [x] Default options with --jhi-prefix flag
• [ ] Default options with --skip-server flag
• [x] Default options with i18n for Gateway
• [ ] Default options without i18n for Gateway
• [ ] Default options with Protractor
• [x] Gradle build Default with i18n
• [x] Gradle build Default with i18n prod profile
• [x] With Search engine
• [x] With websocket
• [x] Session Auth
• [ ] Oauth2 Auth
• [ ] add new languages to app

Entity

• [x] With no pagination
• [x] With pagination
• [x] With Infinite scroll
• [x] With blob
• [x] With Image
• [x] With Text
• [x] Different field types
• [x] Different relationship types
• [x] Import from JDL

cc @jhipster/developers

[atomfrede]

We are currently using React and Vue.js and are exploring an approach to write custom components once with preact and then use a thin wrapper to use the component both in react (or just use the preact version) and in vue. Maybe we should also think about something similar to make it possible to use another frontend if required (or for a module that provides vue instead of react).

[deepu105]

In my personal experience using 2 frameworks whuch does same job only adds complexity and makes maintenance harder and implementation flaky. I would rather stick 2 just one framework. Evn using angular 1 and 2 together needed a lot of duct tape. So I would recommend to keep Vue out of question for now.

From point of Jhipster, what would be more beneficial would be to find a way to add alternative options simpler

[atomfrede]

Absolutely! Supporting two frameworks in core generator is hell. When we find a way to write components (e.g. table component) once (in preact) and can use that component in different ui frameworks with little overhead (preact is 3kb) this would at least help to be able to add additional options (either in the main generator or as a module) as we would not need to rewrite everything in the new fraemwork, but agree, lets focus on react first.

[deepu105]

@sendilkumarn I see that you assigned items 2 & 3 to yourself, I have already done this on my company project which is based on JHipster-react so I'll do the base changes and then you can work on top of that.

[sendilkumarn]

Okay 👍

[erikkemperman]

Just wondering -- from the current package.json in this branch it seems this would be adopting FaceBook's react implementation, is that right? Have you guys considered the legal implications, given the controversial BSD+PATENTS attached to it? I am not a lawyer, but there's quite a bit of unease around their license. See, e.g.,
https://news.ycombinator.com/item?id=14779881
https://react-etc.net/entry/apache-foundation-bans-use-of-facebook-bsd-patents-licensed-libraries-like-react-js
Maybe it would be better to look at alternative implementations?

EDIT: Maybe keep an eye on this -- FB are aware that this is scaring a lot of folks: https://github.com/facebook/react/issues/10191

[deepu105]

@erikkemperman I'm aware of it. Technically we are not an Apache Foundation project and hence this doesn't affect us. I do understand the BDS + Patents license is slightly less permissive than APL2 (I'm not a lawyer) But in any case this shouldn't worry us, in the rarest ever possibility that someone encounters a legal issue becoz of the React licence, Never happened so far, it would be very very easy to switch to something like Preact or Inferno (which are 100% API compatible) which are MIT licenced. SO let's not worry much about this now. Also once React support is added it's too easy to add an option to choose between React or Preact so for me this is not an issue at all.

[erikkemperman]

@deepu105 Thanks for the quick response Deepu!

Yes, I know JH is not an ASF project, I was just curious if their reasoning would apply here as well. Apparently the fear is, roughly, that using React in your projects might allow FaceBook to co-opt all of your patents, related or not, because you give up the right to sue them for infringement.

It's probably not actually _that_ bad, but still... ASF doesn't drop this bombshell lightly I imagine.

I just wanted to make sure this concern is on the radar, that is all.

[jdubois]

@erikkemperman yes of course, in fact I tweeted about the legal implication about 1 year ago, and since then I'm regularly attacked by React developers in France.

For me we have no issue at all here, but this needs a long explanation.

First let me detail the issue with React:

• There are legal implications for people using React. Let's take the original example I used one year ago: you develop a software for a client, using React. That client gets bought by another company. That other company sues Facebook - and hence loses the right to use your software.
• There are a lot of attacks/trolls/insults from the React community, and also a FAQ that tells there is no problem whatsoever. Just read my example above, it has been correct from the start, and it is still correct. Now I don't care being insulted by people with no legal background.
• As it is often replied: that company suing Facebook is "bad". Yes, I agree, and that's why I did this specific example. It's not the software developer's role to tell that the company that is buying his client is bad, and "punish" them. Who do you think you are, Batman?
• The whole point of OSS is about the license, and not strictly following the license is wrong from my point of view. Younger people probably don't know about this, but this kind of use case already happened in the past, for example there was one person who did a GPL project, and added a clause to forbid the South African police to use it. Same thing as my previous point: we're here for making software, we're not Batman.

Now let me detail the issues we have with the use of React in JHipster:

• We're not directly using React: we generate an application that uses React. And anyway, we're not even a company, so I wonder which kind of issue we could have (and I'm not planning to sue Facebook, anyway). I think that on our side, we are safe. And in case of trouble, we'll just drop the React option, or put it inside a module. So no problem at all for the project itself.
• There is indeed something that worries me: this means JHipster could not become an ASF project one day. This question arises from time to time, at the moment we have no plans of doing this - basically this is because they rise a lot of legal issues and paperwork, and nobody is ready to do that (I just don't have that much free time).
• The real issue is for our users: but it's like any JHipster-generated project, that project is the user's project, and that's his own issue. Maybe he thinks that's fine for him, maybe his legal team says it's fine - anyway that's his project and he does whatever he wants with it. We already support Oracle and MS SQL Server, which are totally proprietary technologies - honestly the React clause is a total non-issue for us, at this point.

[erikkemperman]

I was just thinking of the users, actually -- myself included :-) Thanks for detailed response, good to hear you guys have thought about this.

[deepu105]

@jdubois we are anyway safe even for your last 3 points, If we encounter issue or if we go ASF we will just switch React with Preact which has MIT license but works the same way as React and works with all other libs, so the only code change would be to change the imports technically (It can be done by find replace) look at this for example https://github.com/ui-router/visualizer/commit/f07f09c23a2e564b03dd60c567631dee39aa1929

[sendilkumarn]

Instead of switching to preact, why can't we start with preact 😜

@jdubois really detailed and well laid out response 👍 Thanks 😄

[survivant]

Hello, little question. Why not use Material-ui ? I was planning to use it for Desktop application, and switch to material-ui-native for mobile (when possible). Could it be possible to have the choice in the command line ?

[sendilkumarn]

@survivant we want to align more towards our current JHipster Angular UI which is based on Bootstrap.
Adding a choice to choose between material UI and bootstrap will make the project more cumbersome. So definitely no for now. May be you can add in a module for that.

[survivant]

@sendilkumarn make sense, I'll have to check how to create a module. Could be more complete that way, if I want to generate code for web and native applications.

[deepu105]

@sendilkumarn React is more popular and has more reach so lets start with it first, we will see about issue if we ever encounter one

[survivant]

@deepu105 I'll like to play around with this branch. How can I generate app with the code in the branch ? I try to follow the documentation on : https://github.com/hipster-labs/generator-jhipster-react

but I obtain this error message

$ yo jhipster-react
Error jhipster-react

You don't seem to have a generator with the name “jhipster-react” installed.
But help is on the way:

You can see available generators via npm search yeoman-generator or via http://yeoman.io/generators/.
Install them with npm install generator-jhipster-react.

To see all your installed generators run yo without any arguments. Adding the --help option will also show subgenerators.

If yo cannot find the generator, run yo doctor to troubleshoot your system.

I'm not too familiar with npm

thanks, I hope to be able to help to test

[gmarziou]

@survivant, these instructions are obsolete as react support is no longer a module but a sub generator of main generator.
Now you can follow https://github.com/jhipster/generator-jhipster/blob/jh-react/CONTRIBUTING.md#setup.

So it should be:

git clone https://github.com/jhipster/generator-jhipster
cd  generator-jhipster
git checkout jh-react
yarn install
yarn link

And to use in an app:

mkdir my_react_app
cd my_react_app
yarn link generator-jhipster
yo jhipster

[survivant]

@gmarziou thanks. I'll start from there.

If I found issues, should I start to flag them ?

for now, it's not working. here the output

`C:\Data\workspace_perso\github-forks\jhipster-react-branch>yo jhipster

Welcome to the JHipster Generator v4.6.0
Documentation for creating an application: https://jhipster.github.io/creating-a
n-app/
Application files will be generated in folder: C:\Data\workspace_perso\github-fo
rks\jhipster-react-branch
WARNING! Failed to connect to "git://github.com"
                     1. Check your Internet connection.
                     2. If you are using an HTTP proxy, try this command: git co
nfig --global url."https://".insteadOf git://
 ______________________________________________________________________________

  JHipster update available: 4.6.2 (current: 4.6.0)

  Run yarn global upgrade generator-jhipster to update.

 ______________________________________________________________________________

? (1/16) Which *type* of application would you like to create? Monolithic appli
cation (recommended for simple projects)
? (2/16) What is the base name of your application? jhipster
? (3/16) What is your default Java package name? com.mycompany.myapp
? (4/16) Do you want to use the JHipster Registry to configure, monitor and sca
le your application? No
? (5/16) Which *type* of authentication would you like to use? JWT authenticati
on (stateless, with a token)
? (6/16) Which *type* of database would you like to use? SQL (H2, MySQL, MariaD
B, PostgreSQL, Oracle, MSSQL)
? (7/16) Which *production* database would you like to use? MySQL
? (8/16) Which *development* database would you like to use? H2 with disk-based
 persistence
? (9/16) Do you want to use Hibernate 2nd level cache? No
? (10/16) Would you like to use Maven or Gradle for building the backend? Maven


? (11/16) Which other technologies would you like to use? Social login (Google,
 Facebook, Twitter)
? (12/16) Which *Framework* would you like to use for the client? [BETA] React
? (13/16) Would you like to use the LibSass stylesheet preprocessor for your CS
S? Yes
? (14/16) Would you like to enable internationalization support? Yes
? Please choose the native language of the application English
? Please choose additional languages to install French
? (15/16) Besides JUnit and Karma, which testing frameworks would you like to u
se?
? (16/16) Would you like to install other generators from the JHipster Marketpl
ace? No

Installing languages: en, fr
events.js:160
      throw er; // Unhandled 'error' event
      ^

TypeError: _this[method] is not a function
    at blockTemplate.templates.forEach (C:\Data\workspace_perso\github-forks\gen
erator-jhipster\generators\generator-base.js:1933:42)
    at Array.forEach (native)
    at constructor.writeFilesToDisk (C:\Data\workspace_perso\github-forks\genera
tor-jhipster\generators\generator-base.js:1910:45)
    at constructor.writeFiles (C:\Data\workspace_perso\github-forks\generator-jh
ipster\generators\client\files-react.js:409:10)
    at constructor.writing (C:\Data\workspace_perso\github-forks\generator-jhips
ter\generators\client\index.js:366:36)
    at Object. (C:\Data\workspace_perso\github-forks\generator-jhipst
er\node_modules\yeoman-generator\lib\index.js:417:23)
    at C:\Data\workspace_perso\github-forks\generator-jhipster\node_modules\run-
async\index.js:25:25
    at C:\Data\workspace_perso\github-forks\generator-jhipster\node_modules\run-
async\index.js:24:19
    at C:\Data\workspace_perso\github-forks\generator-jhipster\node_modules\yeom
an-generator\lib\index.js:418:9
    at runCallback (timers.js:672:20)

C:\Data\workspace_perso\github-forks\jhipster-react-branch>

[gmarziou]

I got same error when I tried this morning with 2 languages too.
Maybe try without i18n first.

[deepu105]

Yes i18n might not work, anyways I'm planning to rewrite to typescript and use bootstrap over the weekend, so next week I hope it can make some basic apps

[andidev]

I would suggest using redux saga with react redux instead of the Promise Middleware. Seems like a more cleaner approach. I'm no expert on react though.

[deepu105]

I have looked at Saga and its an overkill for crud operations. Its useful if you have really complex side effects to manage. Also redux advices to start simple with promise and thunk and use saga or observable only when you have complex scenarios. Also you can always use multiple libs with redux on same app as all are middlewares. So you could use promise + thunk for simple use cases and when you have complex ones you could use saga or observable

[sendilkumarn]

@deepu105 let me know once you have committed the code 👍 This is gonna be react-ful week 😝

[sdoxsee]

I'm brand new to react but have been playing with it this week and discovered create-react-app that, as I'm sure most of you are already familiar with, hides details (webpack, babel, etc) in a react-scripts dependency that is managed and updated. Feels like a spring boot dependency bom. I suppose with typescript we'd already have to "eject" but I do quite like delegating the auto updating of react app dependencies to the maintainers of this >30000 star project. If typescript isn't set in stone, it would be awesome if we could leverage the tool without ejecting. Do you think that would be possible or desirable? Again...I'm new...which is why I don't want to configure with tools that keep shifting....grunt, gulp, webpack... :) The convention sounds really attractive.

Refs:
- https://medium.com/@tuchk4/why-i-love-create-react-app-e63b1be689a3
- https://github.com/facebookincubator/create-react-app
- https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md

Update:
As for typescript, there's this fork https://github.com/wmonk/create-react-app-typescript that also seems to have the backing of Microsoft? https://github.com/Microsoft/TypeScript-React-Starter

[deepu105]

I know about the app and I have tried it as well. But I dont it will fit
our needs. Its easy to use for just getting a skeleton but after that you
have to fight it to do a lot of stuff based on our requirements. More than
that as we need to template stuff it doesn't make much sense to use that
just for dependency management. Anyway we will be using a lot more
dependencies as well. Also unlike Angular CLI the create react app is quite
basic

On 21 Jul 2017 3:25 am, "Stephen Doxsee" [e-mail] wrote:

I'm brand new to react but have been playing with it this week and
discovered create-react-app that, as I'm sure most of you are already
familiar with, hides details (webpack, babel, etc) in a react-scripts
dependency that is managed and updated. Feels like a spring boot dependency
bom. I suppose with typescript we'd already have to "eject" but I do quite
like delegating the auto updating of react app dependencies to the
maintainers of this >30000 star project. If typescript isn't set in stone,
it would be awesome if we could leverage the tool without ejecting. Do you
think that would be possible or desirable? Again...I'm new...which is why I
don't want to configure with tools that keep shifting....grunt, gulp,
webpack... :) The convention sounds really attractive.

Refs:

• https://medium.com/@tuchk4/why-i-love-create-react-app-e63b1be689a3
• https://github.com/facebookincubator/create-react-app
• https://github.com/facebookincubator/create-react-app/blob/master/
  packages/react-scripts/template/README.md

—
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-316875458,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlF61yWf5bXmfL4ZHSVQXqls5KiG3zks5sP_3xgaJpZM4OP0h8
.

[deepu105]

@sendilkumarn I have committed initial version of TS + BS code. You need to enable sass to test it. I think there are some quirks with i18n and the header menu needs fixing, but feel free to hack on

[deepu105]

my test config

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "com.mycompany.myapp",
      "nativeLanguage": "en"
    },
    "jhipsterVersion": "4.6.2",
    "baseName": "jhReactTest",
    "packageName": "com.mycompany.myapp",
    "packageFolder": "com/mycompany/myapp",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "hibernateCache": "ehcache",
    "clusteredHttpSession": false,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "mysql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSocialSignIn": false,
    "jwtSecretKey": "788e69b63dbdc967046927b8e5855fda73e9027c",
    "clientFramework": "react",
    "useSass": false,
    "clientPackageManager": "yarn",
    "applicationType": "monolith",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "enableTranslation": true,
    "nativeLanguage": "en",
    "languages": [
      "en"
    ]
  }
}

[deepu105]

@sendilkumarn also its mostly not templated yet so other options needs to be templated in and i18n needs to be handled. I'll come up with a solution for i18n

[pascalgrimaud]

@deepu105 : soon holidays for me but, I will try to add:

• Travis tests to a specific branch at https://github.com/hipster-labs/jhipster-travis-build but the builds will trigger every 24h
• yarn test too

[survivant]

I tried this morning, but I got this at the end

ERROR in ./src/main/webapp/app/index.tsx
Module not found: Error: Can't resolve './config/translation' in 'C:\Data\worksp
ace_perso\github-forks\test-branch-jhreact\src\main\webapp\app'
 @ ./src/main/webapp/app/index.tsx 13:20-51
 @ multi react-hot-loader/patch ./src/main/webapp/app/index

ERROR in ./src/main/webapp/app/app.tsx
Module not found: Error: Can't resolve './reducers/locale' in 'C:\Data\workspace
_perso\github-forks\test-branch-jhreact\src\main\webapp\app'

[sendilkumarn]

@deepu105 I added few fixes there. Waiting for your i18n 😉

@survivant the errors that you have mentioned should disappear now.

[deepu105]

@sendilkumarn great thanks. Feel free to take up the next task :smile:

[deepu105]

I have sample unit tests, will commit those when I find time

[deepu105]

Base configuration works now

[deepu105]

Karma tests works as well

[deepu105]

@addisoc is working on the settings and password page

[gzsombor]

You work like a robot ! :+1:

[jdubois]

@irshadc @filiipake @erkieh please don't pollute the ticket, this is for people working on the subject (and you spam the whole team here), so I'm deleting your comments

[jdubois]

I started working on this for my current client, @deepu105 @sendilkumarn here is my current feedback:

• After a first audit with my client, this looks good: there might be some style questions, and maybe we should do a hangout on this, but overall no big issue
• I'd like to merge the current master into this branch, so it's up to date with our latest work -> lots of commits but no conflict, would that be OK?
• It doesn't work with create-react-app, and I'd like to avoid the mistake we did with Angular (not using ng-cli is definitely an issue for me, as we don't benefit from their work). This seems to be easier to do here (as create-react-app is very simple), could we integrate with it?
• It doesn't work without Sass (but I guess you know it)
• There's quite a lot of work for the entity sub-generator - as it didn't start: I'd like to have something more simple than our Angular code. This is an application "skeleton", it should be easy to understand and modify, and our Angular code is too big and complex in my opinion.
• You migrated the admin pages, but some of those pages that are already in JHipster Registry. That's the whole point of doing the JHipster Registry before the React code: I don't want to lose time re-implementing this another time. Is it already all working fine? Otherwise, I'd rather remove this for the moment, to focus on the entity sub-generator instead.

[deepu105]

@jdubois create-react app is not like ng-cli it just helps to create a startup skeleton so we have no use for that. I personally think that its a mistake to try to be compatible with these as it only adds overhead to us. At least ng-cli can be used to create components and stuff but create react app doesn't have any such features so I would rather avoid trying to do anything with it.

For Sass yes, I need to add some css files to make it work without Sass.
For entity I already have blue prints, I need to find time to template them, I'll put in the blueprint and then we can work on top of it.
I dont think we should mandate the use of Registry to use React, the admin pages are cool and are one of our selling points. They are almost complete needs some polishing and fix here and there. Anyway I need them for my company app so I will be completing them anyway. SO for now you just ignore them and focus on the account pages and entity.

If you are gonna start working on it I suggest you start with the account module.

[jdubois]

OK @deepu105 this all makes sense to me (and sorry I'm learning React!)
Is it fine with you if I merge the master branch into this branch? This will solve the current build failure (because of Yarn, we also need to find out why)
And yes I'm starting to work on this, but there will be other (better) people to implement the React part.

[deepu105]

Yes please

[sendilkumarn]

@jdubois I agree to deepu's comment on create-react-app.

For no-SASS option we are missing css files.

Reactstrap v5 is coming soon with bs4 beta, so once it is done we can polish things a bit more.

and I am not sure, whether it is only for me, but having a tough time to make it work with yarn. But the application works fine with npm. :)

[jdubois]

Oh @sendilkumarn I thought I was the only one having trouble -> with Yarn I just can't build the front-end. I'm linking this to #6362 but this really makes me think we should re-consider migrating to NPM. At the moment I just can't work :-(

[deepu105]

React is re licensed as MIT https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/

[deepu105]

Default configuration is working now, sass and i18n is also working

[jdubois]

Great work!!!

[deepu105]

@jhipster/developers can any body work on the authentication types, JWT works fine needs tests and fix for Session and Oauth2

[deepu105]

@jhipster/developers also please test and add any issues/comments on this ticket in the first comment issues/todo section

[sudheerj]

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]

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]

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]

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]

@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]

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]

@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]

Will jHipster have the server side rendering for React?

[dimeros]

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

[deepu105]

yes master branch

Thanks & Regards,
Deepu

On Thu, Jan 4, 2018 at 4:38 PM, dimeros [e-mail] 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]

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

[jdubois]

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]

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]

@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]

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]

when will the react be pushed to major generator ?

[deepu105]

@tianlinzx its already available just run jhipster --experimental

[kumikumi]

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]

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.

[kumikumi]

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

[gmarziou]

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

[tianlinzx]

Is react available for "OAuth2" option now ?

[deepu105]

Not yet.

On Sun, 4 Mar 2018, 1:49 am tianlinzx, [e-mail] 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]

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

[mraible]

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

[mraible]

@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]

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

[deepu105]

Thanks Matt

On Wed, 7 Mar 2018, 3:21 am Matt Raible, [e-mail] 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]

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

[deepu105]

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, [e-mail]
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]

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

[agaspardcilia]

Yes, indeed.
Concerning Issues/Bugs,

• No login errors when invalid password #6669
• Changing password doesn't work #6670

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:

• With Infinite scroll, which is being done
• With Text, that uses regular text field for now but should be done with a text area

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

[deepu105]

@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).

[ahpearce]

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]

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 [e-mail]
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]

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

It produced a large stacktrace:

```[at-loader] Checking finished with 196 errors
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, HTMLAnchorElement>', but here has type 'DetailedHTMLProps, 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, HTMLElement>', but here has type 'DetailedHTMLProps, 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' 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' 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' 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' 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' 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]

@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]

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]

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 [e-mail]
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]

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

[gmarziou]

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

[deepu105]

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

[pascalgrimaud]

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]

7392 should fix many of the issues

[deepu105]

@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]

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]

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

[jdubois]

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

[deepu105]

Yup, we can check and mark things together :)

Thanks & Regards,
Deepu

On Tue, Apr 10, 2018 at 9:38 AM Julien Dubois [e-mail]
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]

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).

[deepu105]

@vishal423 nope there was no discussions. we cant always read only from Redux as the data might be outdated due to changes in the backend by other people. I did want to normalize the store data model so that getAll and get fetches data from the same place

[deepu105]

@vishal423 i'm happy to discuss it now if you want :)

[agaspardcilia]

@deepu105 I tried to see what was done or not here is the result:

Modules

• Blocks: config
• Blocks: hanlders
• Shared: util

I honestly have no idea what you meant with these, so I guess it's more an Angular direct conversion.

• Shared: profiles
  A PR has been submitted about that.
• Layouts:error
  The current notification middleware is handleling X-<appname>-error headers. There's still some error alert duplication ie: login error. We could just use X-<appname>-error most of the time to notify stuff but it would mean that we need to change some things in the back-end which could creates problems with Angular. So I guess we need to remove every regular Alerts and make Toaster mandatory when it comes to notifications.

Issues/Bugs

• Error handling when authentication fails
  Same as Layouts:error.
• Pagination component tries to paginate when there is no next page (needs unit tests in lib as well)
  Fixed
• Entity dialog page creates lot of methods to handle relations, try to remove and simplify those
  Not done.

Test cases

Application

• [x] Default options with i18n
• [x] Default options without i18n
• [ ] Default options with i18n prod profile
  Works but the administration menu shouldn't contains Database and API Docs.
• [ ] Default options without i18n prod profile
  Same issue with the administration menu.
• [x] Default options regenerate existing app
• [x] Default options with SASS
• [x] Default options with --skip-user-management flag
• [x] Default options with --jhi-prefix flag
  Works but I'm not sure to know what it's suppose to do though
• [ ] Default options with --skip-server flag
  Some TS errors with login not being exported from authentication but it's prolly normal since there's no server after all.
• [x] Default options with i18n for Gateway
• [ ] Default options without i18n for Gateway
  Some TS errors.
• [ ] Default options with Protractor
  Implementation in progress.
• [x] Gradle build Default with i18n
• [x] Gradle build Default with i18n prod profile
• [x] With Search engine
• [x] With websocket
• [x] Session Auth
• [ ] Oauth2 Auth
  Some TS errors in tests, it has been broke recently by my last reducer test PR.
• [ ] add new languages to app
  i18n files are added but nothing else is updated. Probably has something to do with needles.

Every configuration described above has been tested without entity (except Elastic search).

Entity

I believe everything is working concerning entities.

[vishal423]

@deepu105 , stale data is always an issue with cache. Caching would also be tricky with server side pagination that goes over records not in cache. I can see following options:

1. Let user do explicit refresh (F5), in which case store needs to be re-populated.
2. Provide explicit refresh button on list page along with last sync time. User can explicitly refresh if interested.
3. Implicitly invalidate cached data after configurable duration (say 5 mins) so that next call goes to server instead served from cache.

• Pagination/sort/search queries still needs to go to server to ensure they are across all records.
• Exception should invalidate cache to ensure latest data is fetched from server.

If we think stale data would be major issue, then, I agree to limit to view(id)/update/delete operation at moment as list page should fetch latest data.

[deepu105]

@vishal423 yes there are many ways to workaround, but they all have issues which are not acceptable for user experience and data integrity.
If you fetch stale data for write operation you will end up overwriting any new data on the server which is not acceptable, so IMO it's not worth the trouble as the majority of the use cases would want the latest data all the time. If someone has a system which rarely writes data then this can help them and in that case, I would say they need to implement this themselves

[vishal423]

@deepu105, I still feel we could at least do this for view, update and delete operations as the requested user data would already be in cache (fetched during list page rendering). To further safeguard against stale data, we could store last synced timestamp in store and if that's greater than configurable limit, fetch from server, otherwise, serve from cache. If end users are interested in no stale data, then, this allowed limit can be changed to zero and that should ensure sync from server. Those who like to leverage cache for better performance can tune this configuration appropriately.

[deepu105]

@vishal423 unfortunately, I don't agree. Its really important to fetch latest data before an update operation. In a real world app with multiple users this will be a huge issue and IMO client side caching is a bad practice for CRUD applications. We already have server side caching and if you really need this its easy to add an Axios middleware to cache the requests. Client side caching will only work for PWA apps which are intended to be offline and for apps which has very less update operations. I would suggest you add this as a Tip so that those who are interested can make use of it.

[pascalgrimaud]

Still one failed build left: react with OAuth2
https://travis-ci.org/hipster-labs/jhipster-travis-build/jobs/368013327

Hope we can fix it before the next release

[mraible]

Here's the error from above:

ERROR in /home/travis/app/src/main/webapp/app/entities/test-root/bank-account-my-suffix/bank-account-my-suffix-update.tsx
(11,26): Cannot find module 'app/modules/administration/user-management/user-management.reducer'.

I'm looking into it now.

[chrisdns]

@mraible @pascalgrimaud I have fixed this issue I am about to PR it soon.
PR: #7506

[jdubois]

For me this is all done, at least the development stream is done and if there are some bugs or missing features they should be some specific tickets, as otherwise it's impossible to follow here.
@deepu105 are you OK to close this?

[deepu105]

I'll close this after checking some stuff

[jdubois]

@agaspardcilia @chrisdns could you check the boxes that have been completed here? I'd like to have this closed, as support is now merged - then we could do smaller tickets, one per missing feature

[deepu105]

I'm closing this even though some of the checkboxes are not checked. The reason is as below

1. Most major features are done and works
2. The small items missed can be fixed as and when someone reports it(means when need arises)
3. There will be improvements here always anyway