Dev content review

[gkwan-ibm]

• What you’ll learn
  • [x] "React also allows ..." add a doc link to React
  • [x] "To learn more about React, visit: React." is no need
  • [x] "The React application in this guide was created and ..." -> "The application in this guide is provided and ..."
  • [x] "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 ..."
  • [x] "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
  • [x] need to run mvn generate-resources before mvn liberty-run?
  • [x] the out is just like json. What is the benefit? Is json the final output of the finish to show?
• Starting the service
  • [x] do you need to explain the purpose of running mvn generate-resources?
• Creating the React component
  • [x] 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."
  • [x] Why replace Fetchdata.js? Why not create? Then, explain import, state, and export
  • [x] format the server.xml better
• Importing the HTTP client
  • [x] The "In this guide, ..." statement is too complex to understand.
  • [x] Is it necessary to mention Angular? If I want to study ReactJS, why I need to bother to learn Angular?
  • [x] "To learn more about the axios ..." improve the sentence structure
• Displaying the returned data
  • [x] 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
  • [x] "... 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
  • [x] http://localhost:9080 should not be a link in the beginning
  • [x] 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
  • [x] missing the output to show what the users should expect
  • [x] an instruction to run the backend service mvn liberty:run and then run the frontend service by mvn generate-resources
  • [x] Navigate your browser to the backend service by http://localhost:9080 to see the data as below.
  • [x] Navigate your browser to the frontend by http://localhost:3000 + a screenshot/picture
  • [x] instructions to stop both servers
• Creating the React component
  • [x] "... export from the react package,..." -> "...export from the react package,..."
  • [x] why "Create the Fetchdata.js" and then update it?
  • [x] format the server.xml better for the <httpEndpoint/> and align <cors/>
• Importing the HTTP client
  • [x] The "In this guide, ..." statement is too complex to understand.
  • [x] "axios is a promise-based..." may need an article or capital the Axios
  • [x] "To learn more about the axios ... see: axios." improve the sentence structure. Use colon not our practice.
• Displaying the returned data
  • [x] Need a paragraph to explain what will do in this section. Starting by componentDidMount(), I have no idea what is going on.
  • [x] "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
  • [x] make sure to have instructions to stop both backend and frontend servers
  • [x] "...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
  • [x] output of the json should be formatted better instead of 1 line. No need to show all.
  • [x] screen shot should do better, e.g. include "Artist Web Service", reduce the space between the table and paging section
• Creating the React component
  • [x] Building the frontend -> Running the frontend
  • [x] 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
• [x] server.xml, httpsPort= should be indented by 4 spaces as well as the attributes of cors/>
• [x] 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
  • [x] http://localhost:9080 returned "Error 404: SRVE0190E: File not found: / "
  • [x] 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
  • [x] usually we replace instead of update
• Creating the React component
  • [x] precreate directory src/main/frontend/src/Components/
• Importing the HTTP client
  • [x] usually we replace instead of update
• Displaying the returned data
  • [x] usually we replace instead of update
  • [x] 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]

• [x] app not work on finish and start
• [x] restructure the flow, just create Fetchdata.js once and explain the detail by multiple subsection - run mvn generate-resources later
• [x] 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
• [x] 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.

[gkwan-ibm]

• [x] add a new section "Setting project configuration"
  • need to explain what you did in the pom.xml for generate reactjs files and copy the generated files to OL
• [x] create src/main/frontend/src/Components directory + .gitkeep
• [x] Add a statement/paragraph to say ReactJS front end applciation including java scripts, image files, and style sheet files are provided.
• [x] rewrite the flow
  • create index.js, App.js, Fetchdata.js
  • simpfy Fetchdata.js
  • focus on how the reactjs commincate with the REST client
• create a branch from dev to xxx for saving what you did
  • update the dev bracnh for the above
• Testing the React client
  • dup content "Likewise, pressing CTRL+C..."
• [x] after mvn generate resources, the app not work in start directory
• [x] remove "Optional: Updating the REST service" section

[salmad3]

• flow rewritten and feedback addressed.

• tested on mac os and windows.

• draft site being updated but lgdev has latest changes.

[gkwan-ibm]

@DannyS03

• Project Configuration
  • [x] no need to have "Server side" subsection
  • [x] because the "node resources" and "Maven resource plugin" content have too many lines, suggest not to update. Also, update pom.xml, need restart dev mode?. Suggest just simply say the pom.xml is provided for you. Then explain both content. It is fine for this section is short and has no command to do
  • [x] "Client side" can be a section as "Creating the default page"
  • [x] "You will need to create..." -> "You need to create..."
  • [x] the path in "Create the index.js file." is wrong
  • [x] hotspot unregistered does not highlight correctly
  • [x] remove the hotspot for index.js at the end
  • [x] src/main/frontend/src/index.js is no need in the start directory because you ask reader to create it
• Creating the React components
  • [x] Suggest following order:
  • "The main component ... You will need to create ..."
  • "Create the App.js file." action
  • "The App.js file returns the ..."
  • "Next, you will create ..."
  • [x] The update action is too long and the hotspot move back and fore (confuse reader). Suggest the update action should just ask reader to add xxx, yyy, zzz. Then outside the action you can explain the detail
  • [x] "Building the frontend" should be a main section instead of subsection

[salmad3]

Addressed your feedback @gkwan-ibm. You can review changes.

[salmad3]

Draft site is updated with latest changes.

[gkwan-ibm]

• Project Configuration
  • [x] rewrite both statements to explain clearly
  • "The static files" readers may not know what you are talking about
  • in general, I guess readers may not understand the first statment
  • in second statement, readers may not know target directory, should say something like "copy the generated ReactJS files to the web content of the application"
  • [x] The subsection "Creating the default page" should be a main section
    • [ ] the path in "Create the index.js file." is still wrong
• Creating the React components
  • [x] "The return statement ..." The hotspot of return should cover the line ); too
• [x] don't know why the start directory not work again by following the instruction
  • the static directory with other files were not copied to the src\main\webapp directory

[salmad3]

* **Project Configuration**

  * [ ]  rewrite both statements to explain clearly

    * "The static files" readers may not know what you are talking about
    * in general, I guess readers may not understand the first statment
    * in second statement, readers may not know target directory, should say something like "copy the generated ReactJS files to the web content of the application"
  * [ ]  The subsection "**Creating the default page**" should be a main section

    * [ ]   the path in "Create the index.js file." is still wrong

* **Creating the React components**

  * [ ]  "The `return` statement ..." The hotspot of `return` should cover the line `);` too

* [ ]  don't know why the start directory not work again by following the instruction

  * the static directory with other files were not copied to the `src\main\webapp directory`

• Regarding the path in "Create the index.js file." isn't it src/main/frontend/src?
• Figuring out why static files are not being served properly in start dir.

[salmad3]

• application needs to be packaged properly in order for static files to be copied over. mvn package will execute all the required phases and includes generate-resources already. Originally, when running mvn generate-resources the files were still being copied from the main/frontend/build dir to main/webapp but it looks like this is not the reliable/appropriate method.
  • mvn generate-resources changed to mvn package, and running generate-resources goal alone is still explained.
  • section title may need to be reconsidered.

Ready for review.

[gkwan-ibm]

• Project Configuration
  • [x] The content not clear. Suggest e.g. "The maven project is configured in order to do ... . Use frontend-maven-plugin to .... Use maven-resources-plugin to ..."
  • need to figure out the steps in below first
  • [x] format the pom.xml better to have no wrapped line
• Creating the default page
  • [x] in the create index.js command, src/main/frontend/src -> src/main/frontend/src/ index.js
• Creating the React components
  • [x] some places in Fetchdata.js are not aligned correct, e.g. content of columns and return
• Building and packaging the frontend
  • [x] To run mvn package at the end to make the app work is not the best approach and package has a sense of completion (not for developing). Would you study and make the following order?
    1. run a command (better not mvn package) to generate/copy the static directory to the src\main\webapp directory
    2. mvn liberty:dev
       • (a. and b. can be switched)
    3. create all index.js, App.js, and Fetchdata.js
    4. run another command if necessary
    5. hit http://localhost:9080

[salmad3]

• In that case, I will use mvn process-resources which is exactly what we are trying to achieve with generating the node resources and copying the files into the web content. The steps will stay the same in this case as they do not need to be altered.

• I think Project Configuration can be combined with Building and packaging the frontend, @gkwan-ibm

[gkwan-ibm]

• Project Configuration
  • is node == Node.js?
  • [x] use Node or Node.js instead of node
  • [x] At the beginning, need to explain a bit Node.js (may need a link to Node.js doc) and use Node.js for the frontend of the application and the relationship with ReactJS
  • [x] suggest following:
  • The [hotspot to the whole plugin]frontend-maven-plugin is used to [hotspot as is]install Node.js/Node in your [hotspot to workingDirectory]project directory and [hotspot as is]produce the frontend production build at the src/main/frontend/build directory.
  • Then, the [hotspot to the whole plugin]maven-resources-plugin copies the static content from the frontend [hotspot as is]build directory to the [hotspot as is]web content of the application.
• in pom.xml,
  • [x] remove <failOnMissingWebXml/>
  • [x] remove <!-- Support for JDK 9 and above --> and the dependecy
  • [x] update liberty-maven-plugin to use 3.2.1
  • [x] no test, so no need to have all test dependencies except junit-jupiter (not junit-jupiter-engine)

[salmad3]

• Addressed. Originally, I did not include information about node as we did not have the project configuration section.
• tested end-to-end with pom updates.

[gkwan-ibm]

• Project Configuration
  • [x] no need to backtick the word Node.js
  • [x] "... see the official (Node.js Documentation." -> "... see the official Node.js documentation."
• Building and packaging the frontend
  • [x] move "When you are done checking the application root, ..." at the end of the "Testing the React client" section

[gkwan-ibm]

• What you’ll learn
  • [x] "The React application in this guide is provided and configured for you in the frontend directory." Should update the frontend to src/main/frontend?
  • [x] "You will implement a ReactJS client that consumes this JSON and displays its contents on a single-page webpage, which will act as your application’s frontend." -> "For simplicity, you will implement a ReactJS client as the frontend of the application that consumes this JSON and displays its contents on a single-page webpage."
• Starting the service
  • [x] Update the paragraph "Note: all the other dependencies ..."
  • at least the paths are incorrect
• Project Configuration
  • The first statement not clear
  • now is not "frontend application", frontend is the frontend of the application?
  • what does "on the same origin." mean?
  • [x] Consider the following:
  • start by this paragraph "The frontend of your application uses Node.js to..."
  • "The Maven project is configured for you to install Node.js and populate production files to the web content of the application."
  • "The [hotspot]frontend-maven-plugin plugin is used to [hotspot]install Node.js in the [hotspot]working directory, and [hotspot]produce the production files to the src/main/frontend/build directory."
  • "Then, the [hotspot]maven-resources-plugin copies the static content from the [hotspot]build directory to the [hotspot]web content of the application."
• Creating the default page
  • [x] "You need to create the entry point of your React application. In production, when the frontend application is used by other applications, the index.js file should be the main entry point of the application as it coincides with the index.html file. ..." -> "You need to create the entry point of the application. The [hotspot]index.js file should be the main entry point of the frontend of the application as it coincides with the index.html file. ..."
  • [ ] "The React library imports the default export from the react package. " -> "The [hotspot]React library imports the default export from the [hotspot]react package. "
    • also what is "default export" mean?
  • [x] "... file included in frontend/src." frontend/src is incorrect now
  • [ ] what is create-react-app?
• Creating the React components
  • [x] "Next, ... your react webpage." -> "Next, ... your React webpage."
  • [ ] "The React library imports the default export..." -> "The React library imports the default export..."
  • [ ] "... an inheritance of the React Component. " -> "... an inheritance of the React component`. "???
• Importing The HTTP client
  • [x] "Add the axios library ..." -> "Add the axios library ..."
• Building and packaging the frontend
  • [x] "Navigate to the http://localhost:9080 URL to view your frontend application." -> "Navigate to the http://localhost:9080 URL to view the frontend of your application."
• Testing the React client
  • [ ] create-react-app what does it mean?
  • [x] "...which is included in frontend/src. " frontend/src is incorrect now

Note: Overall comments for the above

• make "frontend" clear to the readers
• frontend directory changed, so make sure the content updated correctly
• mention create-react-app in the readme several times but I cannot find out what it is? how it relates?

[salmad3]

• create-react-app is explained in What you'll learn

  

• better to keep

  • "... an inheritance of the React Component. "

• To simplify and not go into detail about default exports and named exports, I changed to:

  Creating the default page

  The [hotspot=import-react]`React` library imports the [hotspot=import-react]`react` package.

---

Creating the React components

The [hotspot=react-library file=1]`React library` imports the `react` package for you to create the [hotspot=class file=1]`Fetchdata` component as an inheritance of the `React Component`, and use its values.