iFrame Application Example v3



I’m trying to make the default myIframeApplication Example work in the v3 but everytime i try to run that application from os js it throws an error popup and i see an error in the browser console. below is a screenshot of the same.


You installed with these commands ?

npm install @osjs/example-iframe-application
npm package:discover


Yup, i installed with these commands. Also, i notice that in the path OS.js-3/dist/apps folder I see only the default MyApplication folder. Shouldn’t there be a folder for iframe application be created?


I got it to work. I copied the data folder and the main.js and main.map.js into the path OS.js-3/dist/apps/MyIframeApplication.

It’s working fine now.


That’s strange. The npm run package:discover should create those linked folders in apps.

I’m not able to reproduce this issue, neither on Linux or Windows (I don’t have OSX at the moment) :confused:

Can you maybe give the output of the discover command ?


Yes, copying should work – but that’s not how it’s intended to be done. The npm run package:discover command should make a “symlink” to dist/apps/MyIframeApplication instead of copying (that way any changes in the node_modules directory won’t require you to do another copy).


Is this only an issue with the iframe example btw ? All applications work just the same, so it would be interesting to know.

Also, what kind of system are you running (OS, node version etc).


yeah, is there any property that needs to be added somewhere which will copy the package files into the dist folder?

maybe i’m missing something somewhere.

The default MyApplication is working fine which i got with the os.js v3 code. I saw that it was already there in the dist folder.
I’m running this on windows 7, node version is 8.11

I haven’t tried with other examples yet. I’m trying to iFrame few applications into my project so just started with this example.


It should never be copied, only linked. Which as mentioned, is what the npm run package:discover command does.

The default example application is not included… did you mean you installed it like it said in the documentation ?

That should be allright as long as you have NTFS filesystem.

But didn’t you try the other example application ?!


To rephrase this, you should never copy anything. The CLI tools takes care of everything required for you.


I just added another iFrame Example and re-ran the discover command. It worked fine now and i see that the copy happened automatically. I’m not sure why it happened initially. Will let you know if i face it again.

Yes, i followed the steps in the documentation to set up a basic working project on my laptop


If you ran npm install @osjs/example-iframe-application again you just installed the same package, not another one.

So that’s quite strange. I was unable to reproduce this issue on my own Windows computer. So yes, please let me know if it occurs again :slight_smile:

Okay. I was a bit confused. So you installed both the examples.


Sorry for all the confusion :stuck_out_tongue: I just copied the previously installed iFrame app into a new folder. Just updated the name and the index.html manually . it’s working fine. I tried to create a new package using the generate command but it times out while connecting to github. not sure what the issue is.


The issue with doing this is that every package is supposed to have a unique name and OS.js client expects that the npm run package:discover command sets everything up for you. The dist directory should actually never be edited manually.

You can just make a copy of the example application and change the names in metadata.json (and the “name” must match in index.js) and package.json.

Since its all based on npm you’ll have to familiarize yourself with that:



I failed to install this too.


npm install @osjs/example-iframe-application

step appears to work, I see a directory structure as expected. However

npm run package:discover gives an error. The error differs depending on which directory I’m in when I make the attempt.

npm ERR! Linux 3.10.0-862.9.1.el7.x86_64
npm ERR! argv “/opt/iib-” “/opt/iib-” “run” “package:discover”
npm ERR! node v4.8.4
npm ERR! npm v2.15.11
npm ERR! path /home/davea/package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open

Any clues please?


That was all the errors you got ? Seems like some parts of the message is missing.


I didn’t see much extra info, I assumed I was making some mistake. Only reporting this as I thought it might be helpful. In a different thread I think I’m steered away from iFrames for my use case anyway.

[davea@lee ~]$ npm run package:discover
npm ERR! Linux 3.10.0-862.9.1.el7.x86_64
npm ERR! argv “/opt/iib-” “/opt/iib-” “run” “package:discover”
npm ERR! node v4.8.4
npm ERR! npm v2.15.11
npm ERR! path /home/davea/package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open

npm ERR! enoent ENOENT: no such file or directory, open ‘/home/davea/package.json’
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! Please include the following file with any support request:
npm ERR! /home/davea/npm-debug.log

log file has

0 info it worked if it ends with ok
1 verbose cli [ ‘/opt/iib-’,
1 verbose cli ‘/opt/iib-’,
1 verbose cli ‘run’,
1 verbose cli ‘package:discover’ ]
2 info using npm@2.15.11
3 info using node@v4.8.4
4 verbose config Skipping project config: /home/davea/.npmrc. (matches userconfig)
5 verbose stack Error: ENOENT: no such file or directory, open ‘/home/davea/package.json’
5 verbose stack at Error (native)
6 verbose cwd /home/davea
7 error Linux 3.10.0-862.9.1.el7.x86_64
8 error argv “/opt/iib-” “/opt/iib-” “run” “package:discover”
9 error node v4.8.4
10 error npm v2.15.11
11 error path /home/davea/package.json
12 error code ENOENT
13 error errno -2
14 error syscall open
15 error enoent ENOENT: no such file or directory, open ‘/home/davea/package.json’
15 error enoent This is most likely not a problem with npm itself
15 error enoent and is related to npm not being able to find a file.
16 verbose exit [ -2, true ]


It looks like you’re trying to run this command outside the OS.js directory ?


Can anyone explain the step-by-step process after the above two commants on how to integrate iframe in osjs?


To test the standard iframe example:

npm install @osjs/example-iframe-application
npm run package:discover

You can now run it in OS.js.

Now, to create your own iframe application you can use this example as your template.

  1. Clone https://github.com/os-js/osjs-example-iframe-application to src/packages
  2. Change the package name in metadata.json
  3. Run npm install inside the application directory to install deps
  4. Run npm run build inside the application directory to build it
  5. Run npm run package:discover inside your OS.js root to make the new package available

Now you have your own package to mess around with.