|
| 1 | +# Summary |
| 2 | +This is a demo LabKey ReactJS module. This module demonstrates how to render a React application/page within the LabKey framework |
| 3 | +including keeping the standard LabKey header and header menus. |
| 4 | + |
| 5 | +<a name="gettingStarted"></a> |
| 6 | +# Getting Started |
| 7 | +Clone the tutorialModules repo into `/server/modules` directory and add the directory in `settings.gradle`. You can then build this module |
| 8 | +using the [LabKey Gradle build]. This will install necessary packages, generate resources and put resources in the correct LabKey module's directories. |
| 9 | + |
| 10 | +The reactExamples module includes the following example React pages: |
| 11 | +- http://localhost:8080/labkey/home/reactExamples-helloWorld.view |
| 12 | +- http://localhost:8080/labkey/home/reactExamples-queryModel.view |
| 13 | +- http://localhost:8080/labkey/home/reactExamples-todoList.view |
| 14 | +- http://localhost:8080/labkey/home/reactExamples-fileAttachmentForm.view |
| 15 | + |
| 16 | +Also, this module has an example of using the todoList page in a LabKey webpart. |
| 17 | + |
| 18 | +One of the example React pages, `reactExamples-queryModel.view`, has example usages of components from |
| 19 | +the LabKey React shared component library, `@labkey/components`. You can see more details and |
| 20 | +documentation regarding these shared components from the [Public API doc] page. |
| 21 | + |
| 22 | +<a name="functionality"></a> |
| 23 | +# Functionality Overview |
| 24 | +The compilation and packaging of this module, including the NPM/webpack build, is done with the standard LabKey Gradle build. |
| 25 | +Gradle will use the Node and NPM version defined in `\<projectHome\>/gradle.properties` to run the `build` script defined in `package.json`. |
| 26 | +Note: Gradle does not install Node/NPM globally. To run NPM commands outside of Gradle you will need to have Node/NPM installed |
| 27 | +locally. For more information on what `scripts` the LabKey Gradle build expects from the module `package.json` file, |
| 28 | +see the [Node.js Build Dependency] documentation page. |
| 29 | + |
| 30 | +The webpack build will compile TypeScript and JavaScript files, as well as CSS and SCSS files, and bundle them independently |
| 31 | +for each module entry point. See the example at `reactExamples/src/client/entryPoints.js`. The bundled resources will be placed in the |
| 32 | +appropriate LabKey directory for web resources. See the example at `resources/web/gen/`. The build will also |
| 33 | +generate the necessary LabKey HTML files, including the containing elements for the React apps, as well as the necessary |
| 34 | +`view.xml` files to make the bundled React and CSS files available to the appropriate LabKey React pages. |
| 35 | +See the example at `resources/views/`. |
| 36 | + |
| 37 | +<a name="devServer"></a> |
| 38 | +## Development Server |
| 39 | +This module includes a webpack development server to help with rapid development. The server is setup for Hot Module Replacement, |
| 40 | +to allow updates made to TypeScript, JavaScript, CSS and SCSS files to take effect on the page without manual builds or page refreshes. To |
| 41 | +start the server, from the command line in the reactExamples module directory run `npm start`, then navigate to either of the appropriate development |
| 42 | +pages (note the "Dev" added to the end of the action name). |
| 43 | +- http://localhost:8080/labkey/home/reactExamples-helloWorldDev.view |
| 44 | +- http://localhost:8080/labkey/home/reactExamples-queryModelDev.view |
| 45 | +- http://localhost:8080/labkey/home/reactExamples-todoListDev.view |
| 46 | +- http://localhost:8080/labkey/home/reactExamples-fileAttachmentFormDev.view |
| 47 | + |
| 48 | +<a name="jest"></a> |
| 49 | +## Jest Tests |
| 50 | +This module is setup to run Jest tests, including using Enzyme and Jest Snapshot testing. There is an example Jest test and |
| 51 | +Jest snapshot in the HelloWorld module. Jest tests can be run using `npm run test` or they can be run directly in IntelliJ. |
| 52 | + |
| 53 | + |
| 54 | +[LabKey Gradle build]: https://www.labkey.org/Documentation/wiki-page.view?name=gradleBuild |
| 55 | +[Node.js Build Dependency]: https://www.labkey.org/Documentation/wiki-page.view?name=nodejs |
| 56 | +[Public API doc]: https://github.com/LabKey/labkey-ui-components/blob/master/packages/components/docs/public.md |
0 commit comments