Skip to content

Commit c2fd953

Browse files
authored
Factor out reactExamples module from previous demo module (#157)
* migrate react examples / pages from tutorialModules/demo to new reactExamples module * update misc references to previous "demo" module name * switch from enzyme to react testing library
1 parent f261f26 commit c2fd953

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+25587
-1
lines changed

.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
# generated artifacts
2+
reactExamples/node_modules
3+
reactExamples/resources/web/gen
4+
reactExamples/resources/web/reactExamples/gen
5+
reactExamples/resources/views/gen
26
dependencies.txt
37
jars.txt
48
enlistment.properties

reactExamples/.npmrc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Set registry for @labkey scopes
2+
@labkey:registry=https://labkey.jfrog.io/artifactory/api/npm/libs-client/

reactExamples/README.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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

reactExamples/build.gradle

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
plugins {
2+
id 'org.labkey.build.fileModule'
3+
}

reactExamples/module.properties

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
ModuleClass: org.labkey.api.module.SimpleModule

0 commit comments

Comments
 (0)