Generate Skeleton Project for Perspective Component

Jonathan · January 19, 2023, 11:45pm

I was able to generate a skeleton designer/gateway project using the ignition-module-tools. I ran the command

gradlew.bat runCli --console plain

I then chose DG.

I was also able to build the project which created an unsigned module, so I feel as if I am getting close. I am now comparing it to the example project perspective-component to see how I can get a react component into the module, but the skeleton project does not have a web folder. How do I generate the web folder or do I have to build that up from scratch?

PGriffith · January 20, 2023, 12:10am

The web subproject is optional; it's not strictly necessary. The key thing is to have one or more .jar files, inside your module, loaded in the gateway scope, with the frontend assets available as resources to serve up. You don't have to use Gradle at all do this; you could manually run whatever frontend build process you want, put the assets in the resources directory manually, and build your module that way. That's probably not a very fun way to work, so it would probably be good to copy at least the basic structure of the Perspective example for now.

Improvements in how this all works would be nice, but are hard to do in a way that covers all the bases.

Jonathan · January 20, 2023, 12:19am

Thanks. I stumbled upon the readme file in the web folder of the example. It says I can build the web folder using

gradlew.bat :web:build

but all i get from that is

So i guess that does not create the folder just builds it, but i dont have a web folder to build. So I need to figure out what needs to be pulled over from example web folder in order to build by skeleton web folder.

I guess i will try to pull over the bare minimum until i can get it to build.

PGriffith · January 20, 2023, 12:26am

The web folder (in the filesystem) is a valid Gradle subproject because it has a build.gradle.kts:

github.com

inductiveautomation/ignition-sdk-examples/blob/master/perspective-component/web/build.gradle.kts

import com.github.gradle.node.yarn.task.YarnTask
import com.github.gradle.node.npm.task.NpmTask

plugins {
    java
    id("com.github.node-gradle.node") version("3.2.1")
}
// define a variable that describes the path to the mounted gateway folder, where we want to put things eventually
val projectOutput: String by extra("$buildDir/generated-resources/")

// configurations on which versions of Node, Npm, and Yarn the gradle build should use.  Configuration provided by/to
// the gradle node plugin that"s applied above (com.moowork.node)
node {
    version.set("16.15.0")
    yarnVersion.set("1.22.18")
    npmVersion.set("8.5.5")
    download.set(true)
    nodeProjectDir.set(file(project.projectDir))

}

This file has been truncated. show original

Gradle knows about the subproject because of settings.gradle.kts:

github.com

inductiveautomation/ignition-sdk-examples/blob/master/perspective-component/settings.gradle.kts#L50


      
          }
          
          
enableFeaturePreview("TYPESAFE_PROJECT_ACCESSORS")
          
          
// this file configures settings for the gradle build tools, as well as the project structure.
          // Generally this doesn't need to be altered unless you are adding/removing sub-projects.
          rootProject.name = "perspective-component"
          
          

          
// link up our subprojects as part of this multi-project build.  Add/remove subprojects gradle path notation.
          include(":common", ":gateway", ":designer", ":web")

The build task is defined by (this part is an educated guess, I didn't set this up so I'm not 100% on all the details) the java plugin. The project is defined to output 'source' files from the webpack task:
ignition-sdk-examples/build.gradle.kts at master · inductiveautomation/ignition-sdk-examples · GitHub, which is itself defined elsewhere in the file: ignition-sdk-examples/build.gradle.kts at master · inductiveautomation/ignition-sdk-examples · GitHub

Jonathan · January 20, 2023, 12:48am

Thanks. This seemed to work. I copied from the example project these files into my empty web folder of my skeleton project

I then found these places in the parent folder of the example where web folder was being referenced and added those to my skeleton project

Then I ran

gradlew.bat :web:build

Build successful and now I have these other folder files in my web folder

Now I am thinking I need to figure out how to put my files for my component into the packages/client and package/designer folder. Such as scss files, typescript files, a package.json file, a tsonfig.json file and a webpack.config.js file.

Is there any way to test out the web component files outside of building the module? I am just thinking that it would be good to know that the web component works lets say in a static html file first before adding in the complexity of hooking it up to the gateway and designer scopes. Could be as simple as just display an image tag.