Dev content review

[gkwan-ibm]

• What you’ll learn
  • "React also allows ..." add a doc link to React
  • "To learn more about React, visit: React." is no need
  • "The React application in this guide was created and ..." -> "The application in this guide is provided and ..."
  • "Create React App is a comfortable environment for learning React, ...", Why Create React App is backticked? Is following better?
    • "The http:...[create-React-App^] provides an environment for learning React, ..."
    • No need to have "To learn ..."
  • "The REST service that provides ..." Why not just copy from AngularJS?
    • plus "You will implement an AngularJS client..." -> "You will implement an ReactJS client"
• Try what you’ll build
  • need to run mvn generate-resources before mvn liberty-run?
  • the out is just like json. What is the benefit? Is json the final output of the finish to show?
• Starting the service
  • do you need to explain the purpose of running mvn generate-resources?
• Creating the React component
  • For "In React, a component does a specific functionality, where a web application in React is simply a collection of components. ", is following better:
    • "A React web application is simply a collection of components. Each component does a specific functionality."
  • Why replace Fetchdata.js? Why not create? Then, explain import, state, and export
  • format the server.xml better
• Importing the HTTP client
  • The "In this guide, ..." statement is too complex to understand.
  • Is it necessary to mention Angular? If I want to study ReactJS, why I need to bother to learn Angular?
  • "To learn more about the axios ..." improve the sentence structure
• Displaying the returned data
  • Need a paragraph to explain what will do in this section. Starting by componentDidMount(), I have no idea what is going on.
  • I tried finish but http://localhost:3000 not work
• Testing the React client
  • "... the official React page." -> "... the official React Testing document."

[salmad3]

• mvn generate-resources

  • it seems like you do need to run beforehand if using dev mode.
  • can be deployed after running dev mode.
  • we can add a statement or two to describe, but I noticed that the angular & angularjs guides do not.

• For Fetchdata.js I originally wanted to create it, but ran into issues when the file was missing while building. Looking into it again.

• rearranged steps in guide and Fetchdata.js is now initially created.

[salmad3]

• ran into build issue with the app and http://localhost:3000 not working, looking into it.

[gkwan-ibm]

• What you’ll learn
  • http://localhost:9080 should not be a link in the beginning
  • need to explain clearly about what the application is
    • contain ??? as the backend service
    • run ReactJs as the frontend service
• Try what you’ll build
  • missing the output to show what the users should expect
  • an instruction to run the backend service mvn liberty:run and then run the frontend service by mvn generate-resources
  • Navigate your browser to the backend service by http://localhost:9080 to see the data as below.
  • Navigate your browser to the frontend by http://localhost:3000 + a screenshot/picture
  • instructions to stop both servers
• Creating the React component
  • "... export from the react package,..." -> "...export from the react package,..."
  • why "Create the Fetchdata.js" and then update it?
  • format the server.xml better for the <httpEndpoint/> and align <cors/>
• Importing the HTTP client
  • The "In this guide, ..." statement is too complex to understand.
  • "axios is a promise-based..." may need an article or capital the Axios
  • "To learn more about the axios ... see: axios." improve the sentence structure. Use colon not our practice.
• Displaying the returned data
  • Need a paragraph to explain what will do in this section. Starting by componentDidMount(), I have no idea what is going on.
  • "Navigate to the http://localhost:3000 URL to view your application." -> "Navigate to the http://localhost:3000 URL to view the frontend of your application."
• Testing the React client
  • make sure to have instructions to stop both backend and frontend servers
  • "...the official React testing document." Suggest the link highlight "React testing document" instead of "React" only

[salmad3]

• feedback addressed; just need to add some edits.
  • picture that represents output is small but not to sure on how to make it bigger without zooming in to much.
  • artist json output (for backend) can be improved.
• draft guide is also available on the lgdev site at :4020.

[gkwan-ibm]

@DannyS03

• Getting started
  • output of the json should be formatted better instead of 1 line. No need to show all.
  • screen shot should do better, e.g. include "Artist Web Service", reduce the space between the table and paging section
• Creating the React component
  • Building the frontend -> Running the frontend
  • should "Also, because you ...CORS..." be done in the "Starting and running the backend service" section?
    • if keep in here, may need a subsection for it
• server.xml, httpsPort= should be indented by 4 spaces as well as the attributes of cors/>
• remove src/main/webapp if it no use

[salmad3]

• new screenshot for the react table has line from the browser at the bottom: for better separation of the image from the proceeding paragraph.

[salmad3]

• new feedback addressed. @gkwan-ibm can verify changes again.

• the artist.json includes the same data from the application in the rest client java, angularjs, angular guides, with some additions. The album data for each artist currently does not display on the react table... only the additional artists attributes do.

  • We could delete the data that is not used from the original json file implementation .
  • We could change the output to focus on the albums of each artist (but I thought it would be a good idea to output something different as there are three guides that generate the same outcome already, but through different means).
  • Everything could be outputted (this may complicate the app unnecessarily).

[gkwan-ibm]

@DannyS03

• Need to investigate how to package/deploy ReactJS as an app running by OL alone or with the backend REST service

[salmad3]

• rest client application simplified and reflects the same application as in the angularjs guide
• frontend & backend now execute as “single execution” and depend on the OL server.
• paginated table updated to reflect the album JSON array in artists.json

[gkwan-ibm]

@DannyS03

• Try what you’ll build
  • http://localhost:9080 returned "Error 404: SRVE0190E: File not found: / "
  • no need to have the following?
    • "Also, pressing CTRL+C in the shell session that deploys the frontend application will stop the node server."
• after I stopped the liberty:run, I went to start directory and run mvn generate-resources got errors
• Starting the service
  • usually we replace instead of update
• Creating the React component
  • precreate directory src/main/frontend/src/Components/
• Importing the HTTP client
  • usually we replace instead of update
• Displaying the returned data
  • usually we replace instead of update
  • http://localhost:9080 returned "Error 404: SRVE0190E: File not found: / "

will review again after address the above

[salmad3]

• addressed feedback.

  • app under finish dir will be ran from just starting the OL server and the required production build static files are already configured in webapp/static. This favours the approach that the app in the finish dir should be "finished", and the user does not need to worry about generating the node resources to create the frontend build when they are in the twyb section.
  • Refactored and cleaned up files as the issue was the static files being created by generating the node resources (hence creating the production build) were not being passed on properly.

• CORS filter removed from server.xml as the frontend and backend are now being hosted off of the OL server and not needed. README also updated.

• The reason mvn generate-resources is failing in start is because the npm run build resource cannot execute as it is looking for the Fetchdata.js file, which is to be created in the guide rather than updated.

  • We could either tell the user to generate the node resources and build the frontend later on in the guide, or have Fetchdata.js included in the start dir as it used to be, or initially update multiple files.

  The angular guide does not "create" it's module files but rather updates them throughout the guide... see, https://openliberty.io/guides/rest-client-angular.html#importing-the-http-client & https://github.com/OpenLiberty/guide-rest-client-angular/blob/master/start/src/main/frontend/src/app/app.module.ts

@gkwan-ibm

[gkwan-ibm]

• app not work on finish and start
• restructure the flow, just create Fetchdata.js once and explain the detail by multiple subsection - run mvn generate-resources later
• or precreate a simple Fetchdata.js and ask readers to replace (still replace one) - then we can ask readers to run the mvn generate-resources before liberty:dev
• add more content to showcase the change of the artists.json

[salmad3]

* [ ]  app not work on finish and start

* [ ]  restructure the flow, just create Fetchdata.js once and explain the detail by multiple subsection - run mvn generate-resources later

* [ ]  or precreate a simple Fetchdata.js and ask readers to replace (still replace one) - then we can ask readers to run the mvn generate-resources before liberty:dev

* [ ]  add more content to showcase the change of the artists.json

• tried on another machine with fresh env and clone in finish (mvn liberty:run) and start (generating the resources later) and it works.
  

• other feedback has been addressed. Ready for review and retesting.