# Generate Skeleton Project for Perspective Component

**URL:** <https://forum.inductiveautomation.com/t/generate-skeleton-project-for-perspective-component/68829>\
**Category:** Module Development\
**Tags:** perspective\
**Created:** [January 19, 2023, 11:45pm UTC](https://forum.inductiveautomation.com/t/generate-skeleton-project-for-perspective-component/68829 "2023-01-19T23:45:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jonathan](https://avatars.discourse-cdn.com/v4/letter/j/aeb1de/32.png) [@Jonathan](https://forum.inductiveautomation.com/u/Jonathan)\
**Post date:** [January 19, 2023, 11:45pm UTC](https://forum.inductiveautomation.com/t/generate-skeleton-project-for-perspective-component/68829/1 "2023-01-19T23:45:13Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [January 20, 2023, 12:10am UTC](https://forum.inductiveautomation.com/t/generate-skeleton-project-for-perspective-component/68829/2 "2023-01-20T00:10:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jonathan](https://avatars.discourse-cdn.com/v4/letter/j/aeb1de/32.png) [@Jonathan](https://forum.inductiveautomation.com/u/Jonathan)\
**Post date:** [January 20, 2023, 12:19am UTC](https://forum.inductiveautomation.com/t/generate-skeleton-project-for-perspective-component/68829/3 "2023-01-20T00:19:32Z")

</div>

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  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/3/f3114ad761201280d3a188068f48d9a07bae07d2.png)

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.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [January 20, 2023, 12:26am UTC](https://forum.inductiveautomation.com/t/generate-skeleton-project-for-perspective-component/68829/4 "2023-01-20T00:26:37Z")

</div>

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

> <https://github.com/inductiveautomation/ignition-sdk-examples/blob/master/perspective-component/web/build.gradle.kts>

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

> <https://github.com/inductiveautomation/ignition-sdk-examples/blob/master/perspective-component/settings.gradle.kts#L50>

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](https://github.com/inductiveautomation/ignition-sdk-examples/blob/master/perspective-component/web/build.gradle.kts#L112), which is itself defined elsewhere in the file: [ignition-sdk-examples/build.gradle.kts at master · inductiveautomation/ignition-sdk-examples · GitHub](https://github.com/inductiveautomation/ignition-sdk-examples/blob/master/perspective-component/web/build.gradle.kts#L50)

---

<div class="post-metadata">

**Author:** ![Jonathan](https://avatars.discourse-cdn.com/v4/letter/j/aeb1de/32.png) [@Jonathan](https://forum.inductiveautomation.com/u/Jonathan)\
**Post date:** [January 20, 2023, 12:48am UTC](https://forum.inductiveautomation.com/t/generate-skeleton-project-for-perspective-component/68829/5 "2023-01-20T00:48:01Z")

</div>

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

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/e/fee895cfa5129605daeffcf6e0faa7a7a5a10b53.png)

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/a/6ab29ddf4e33c5126d107d9c3e783476b48ee632.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/7/77862899acf318877bdf1e649bf02a0719150a68.png)

Then I ran

> gradlew.bat :web:build

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

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/e/7eb533f0100f7b42f0ed8ef29359390353d1cf3f.png)

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.
