Merge pull request #129 from ia-ngomez/IGN-13791

IGN-13791: 8.3: Webpage SDK Example update

Author: ia-ngomez

webui-webpage/README.md

@@ -21,7 +21,7 @@ To run the build, clone this repo and open a command line in the `webui-webpage`
 // on Windows
 gradlew build
 
-// on linux/osx
+// on linux/macOS
 ./gradlew build
 ```
 
@@ -31,23 +31,23 @@ This will produce a `.modl` file in the `build` directory, which can be installe
 
 This project uses a number of build tools in order to complete the various parts of its assembly.  It's important to note that these tools are just some example options.  You may use any tool you want (or no tool at all).  These examples use:
 
-* [Gradle](https://gradle.org/) - the primary build tool. Most tasks executed in a typical workflow are gradle tasks.
+* [Gradle](https://gradle.org/) — the primary build tool. Most tasks executed in a typical workflow are gradle tasks.
   and 'packages' in the same git/hg repository without having to do a lot of complicated symlinking/publishing to pull in changes from one project to another.  It's mostly useful from the commandline, outside of Gradle.
-* [yarn](https://yarnpkg.com/) - is a JavaScript dependency (package) manager that provides a number of improvements
+* [yarn](https://yarnpkg.com/) — is a JavaScript dependency (package) manager that provides a number of improvements
   over npm, though it shares many of the same commands and api.  Much like Ivy or Maven, yarn is used to resolve and download dependencies hosted on remotely hosted repositories.  Inductive Automation publishes our own dependencies through the
   same nexus repository system we use for other sdk artifacts.  To correctly resolve the Inductive Automation node packages,
   an `.npmrc` file needs to be added to the front end projects to tell yarn/npm where to find packages in the `@inductiveautomation` namespace.  You will find examples of these in the `web-ui/` directory.
-* [Typescript](https://www.typescriptlang.org/) - the language used to write the front end parts.  TypeScript is not required but is strongly recommended.  TypeScript can be thought of as modern JavaScript with types added (though this is a simplification). The addition of types to JS results in a far better developer experience through much better tooling
+* [TypeScript](https://www.typescriptlang.org/) — the language used to write the front end parts.  TypeScript is not required but is strongly recommended.  TypeScript can be thought of as modern JavaScript with types added (though this is a simplification). The addition of types to JS results in a far better developer experience through much better tooling
   support.  This can improve maintainability, refactoring, code navigation, bug discovery, etc. TypeScript has its own compiler which emits JavaScript.  This compiler is frequently paired with other build tools in a way that it emits the JavaScript, but
   other tools handle the actual bundling of assets, CSS, and other supporting dependencies.  Think of TypeScript as the
   java compiler without jars or resources.  It just takes TypeScript files in, and emits the JavaScript files.
-* [Webpack](https://webpack.js.org/) - the 'bundler' that we use to take the JavaScript emitted by the TypeScript compiler and turn it into an actual package that includes the necessary assets, dependencies, generates sourcemaps, etc.
+* [Webpack](https://webpack.js.org/) — the 'bundler' that we use to take the JavaScript emitted by the TypeScript compiler and turn it into an actual package that includes the necessary assets, dependencies, generates sourcemaps, etc.
 
 
 ## How it works
 1. The React component that represents your page will need to be bundled into a single UMD JS file.
     - We use webpack in this example.
-    - This example uses Gradle to download tools necessary to build the project (node, yarn and NPM) and then runs a yarn install to install all of the dependencies listed in the package.json. After this is complete, it will use the webpack.config.js file to build the JS bundle and place it in proper location.
+    - This example uses Gradle to download tools necessary to build the project (node, yarn and NPM) and then runs a yarn install to install all the dependencies listed in the package.json. After this is complete, it will use the webpack.config.js file to build the JS bundle and place it in proper location.
 
 
 2. The file will need to be served on the gateway using the Module Resource API.

webui-webpage/build.gradle.kts

@@ -11,10 +11,10 @@ plugins {
     id("io.ia.sdk.modl") version("0.1.1")
 }
 
-val sdk_version by extra("8.3.0-SNAPSHOT")
+val sdk_version by extra("8.3.0-beta1")
 
 allprojects {
-    version = "0.0.1-SNAPSHOT"
+    version = "0.0.1-beta1"
 }
 
 ignitionModule {

webui-webpage/settings.gradle

@@ -3,6 +3,12 @@ pluginManagement {
         gradlePluginPortal()
         mavenCentral()
         mavenLocal()
+        maven {
+            name = "inductiveautomation-releases"
+            url = uri(
+                    "https://nexus.inductiveautomation.com/repository/inductiveautomation-releases/"
+            )
+        }
         maven {
             url "https://nexus.inductiveautomation.com/repository/inductiveautomation-beta"
         }
@@ -16,6 +22,13 @@ rootProject.name = "webui-webpage"
 
 dependencyResolutionManagement {
     repositories {
+        maven {
+            name = "inductiveautomation-releases"
+            url = uri(
+                    "https://nexus.inductiveautomation.com/repository/inductiveautomation-releases/"
+            )
+        }
+
         // enable resolving dependencies from the inductive automation artifact repository
         maven {
             url "https://nexus.inductiveautomation.com/repository/inductiveautomation-beta"

webui-webpage/web-ui/.yarnrc

@@ -1,4 +1 @@
-strict-ssl false
-
-registry "https://nexus.ia.local/repository/npm-package-group/"
-"@inductiveautomation:registry" "https://nexus.ia.local/repository/beta-node-packages/"
+"@inductiveautomation:registry" "https://nexus.inductiveautomation.com/repository/node-packages/"

webui-webpage/web-ui/build.gradle.kts

@@ -23,7 +23,7 @@ node {
 // define a gradle task that will install our npm dependencies, extends the YarnTask provided by the node gradle plugin
 val yarnPackages by tasks.registering(YarnTask::class) {
 
-    description = "Executes 'yarn' at the root of the web/ directory to install npm dependencies for the yarn workspace."
+    description = "Executes 'yarn' at the root of the web-ui/ directory to install npm dependencies for the yarn workspace."
     // which yarn command to execute
     args.set(listOf("install", "--verbose"))
 
@@ -48,10 +48,10 @@ val yarnPackages by tasks.registering(YarnTask::class) {
 // define a gradle task that executes an npm script (defined in the package.json).
 val webpack by tasks.registering(NpmTask::class) {
     group = "Ignition Module"
-    description = "Runs 'npm run build', executing the build script of the web project's root package.json"
+    description = "Runs 'npm run-build', executing the build script of the web project's root package.json"
 
     // same as running "npm run build" in the ./web-ui/ directory.
-    args.set(listOf("run", "build"))
+    args.set(listOf("run", "build-dev"))
 
     // we require the installPackages to be done before the npm build (which calls webpack) can run, as we need our dependencies!
     dependsOn(yarnPackages)

webui-webpage/web-ui/package.json

@@ -22,8 +22,8 @@
         "react-dom": "18.2.0",
         "react-hook-form": "^7.44.3",
         "react-redux": "^8.0.5",
-        "@inductiveautomation/ignition-icons": "^1.3.0-SNAPSHOT",
-        "@inductiveautomation/ignition-web-ui": "^1.3.0-SNAPSHOT"
+        "@inductiveautomation/ignition-icons": "^1.3.0-beta1",
+        "@inductiveautomation/ignition-web-ui": "^1.3.0-beta1"
     },
     "devDependencies": {
         "@babel/core": "^7.17.8",
@@ -63,6 +63,6 @@
         "webpack-dev-server": "^4.11.1"
     },
     "resolutions": {
-        "@inductiveautomation/ignition-icons": "^1.3.0-SNAPSHOT"
+        "@inductiveautomation/ignition-icons": "^1.3.0-beta1"
     }
 }