XF 2.2 _files and js files

[AndrewSimm]

I am adding a reading progress bar to my articles add-on and I am working with my first js file that isn't in base. I've add the file to Andrew/Articles/_files/js/ but can't seem to figure out how to read this file in my dev environment.

 

[digitalpoint]

If you are planning on user's accessing that directory directly, you can't. I just mean like if you were hoping to include the JavaScript file like:
https://xenforo.com/community/src/addons/Andrew/Articles/_files/js/ArticleProcess.js

You can't do that because the src directory isn't intended to be accessed by a web server's direct request. The whole reason addons split the backend code into the src directory, and the front-end code into the js directory is because of that (one is only intended for backend access, and one is for front-end things like JavaScript).

The default installation of XenForo has an .htaccess file in the src directory that is intended to block front-end access.

If you are accessing the JavaScript file from a backend process (for example something reads it and passes it through), you could do it that way. If you give more specific context of what you are trying to do exactly (the more info, the better), I can do my best to point you in the right direction.

 

[AndrewSimm]

If you are planning on user's accessing that directory directly, you can't. I just mean like if you were hoping to include the JavaScript file like:
https://xenforo.com/community/src/addons/Andrew/Articles/_files/js/ArticleProcess.js

You can't do that because the src directory isn't intended to be accessed by a web server's direct request. The whole reason addons split the backend code into the src directory, and the front-end code into the js directory is because of that (one is only intended for backend access, and one is for front-end things like JavaScript).

The default installation of XenForo has an .htaccess file in the src directory that is intended to block front-end access.

If you are accessing the JavaScript file from a backend process (for example something reads it and passes it through), you could do it that way. If you give more specific context of what you are trying to do exactly (the more info, the better), I can do my best to point you in the right direction.

I guess I am planning on that script being moved in the build.json process. Do I need to manually add it on my dev?

 

[digitalpoint]

I guess I am planning on that script being moved in the build.json process. Do I need to manually add it on my dev?

If it's just about including front-end JavaScript with your addon when you do a "build release", you just keep it in your normal js folder and tell your build.json file what to include that's from outside your addon directory. As an example, this is the build.json I use for my Cloudflare addon:

{
  "additional_files": [
    "js/dp/cf"
  ],
  "minify": [
    "js/dp/cf/chart.js"
  ],
  "rollup": {
  },
  "exec": [
    "cp _build/upload/js/dp/cf/chart.min.js ../../../../js/dp/cf/chart.min.js"
  ]
}

additional_files = extra stuff to include outside your addon directory (in this case, it's just the whole directory).
minify = what you want to minify.
exec = for me, I'm telling it to copy the minified version it generated as part of the build process back to the normal folder because I'm not also "installing" the addon on the site I built it on.

 

[Jeremy P]

You can just do:

<xf:js addon="Andrew/Articles" src="ArticleProgress.js"  />

You will need to enable full JS in your config file if you have not done so already:

$config['development']['fullJs'] = true

 

[AndrewSimm]

You can just do:

<xf:js addon="Andrew/Articles" src="ArticleProgress.js"  />

You will need to enable full JS in your config file if you have not done so already:

$config['development']['fullJs'] = true

Do I update this line

<xf:js addon="Andrew/Articles" src="ArticleProgress.js"  />

to

<xf:js src="/js/vendor/ArticleProgress.js"  /> before building my release?

 

[James]

I think just including it in build.json would be enough.

During development it isn't always feasible to keep files outside of your add-on directory, so if you prefer, you can keep the files in your add-on _files directory instead. When copying the additional files, we will check there first.

Development tools | Developer Documentation | XenForo

Developer documentation for XenForo

xenforo.com

 

[gigipmc]

I am adding a reading progress bar to my articles add-on and I am working with my first js file that isn't in base. I've add the file to Andrew/Articles/_files/js/ but can't seem to figure out how to read this file in my dev environment.

Not sure I understand your question correctly but if you want to keep the actual file in your add-on directly but the browser to access it from elsewhere (e.g. from the js directory), you can just put a symlink in the js directory which will lead to the original file.

 

[Kirby]

I usually put minified JS files in a two-level subfolder (<vendor>/<addon>) of js and use the unminified version within _files for development.

So I'd probably have the file in src/addons/Andrew/Articles/_files/js/andrew/articles/reading-progress.js

In the template this would be referenced as

<xf:js addon="Andrew/Articles" src="andrew/articles/reading-progress.js"  min="1" />

(No need to change this, works for production and dev).

To build the Add-on a build.json is required

{
  "additional_files": [
    "js/andrew/articles/reading-progress.js"
  ],
  "minify": [
    "js/andrew/articles/reading-progress.js"
  ]
}

In order to use the unminified JS file from _files (via devjs.php) the following code in config.php is required as well (as already mentioned):

$config['development']['fullJs'] = true;

 

[AndrewSimm]

I usually put minified JS files in a two-level subfolder (<vendor>/<addon>) of js and use the unminified version within _files for development.

So I'd probably have the file in src/addons/Andrew/Articles/_files/js/andrew/articles/reading-progress.js

In the template this would be referenced as

<xf:js addon="Andrew/Articles" src="andrew/articles/reading-progress.js"  min="1" />

(No need to change this, works for production and dev).

To build the Add-on a build.json is required

{
  "additional_files": [
    "js/andrew/articles/reading-progress.js"
  ],
  "minify": [
    "js/andrew/articles/reading-progress.js"
  ]
}

In order to use the unminified JS file from _files (via devjs.php) the following code in config.php ist required as well (as already mentioned):

$config['development']['fullJs'] = true;

This is awesome. Thank you so much for explaining.

 

[Milen]

@Kirby Thanks for the explaining