Hi All.
I’m developing an app using Phoenix and I want to include a JavaScript library on specific pages (don’t want to load it on those pages that don’t need it). Is there a standard way to achieve this?
cheers
Dave
3 Likes
The easiest way is probably to split it into a separate script and put
<script src="new_script.js"></script>
only on the pages where you want it.
2 Likes
My fault for no explaining my issue correctly but the library I’m using relies on Jquery which gets loaded at the end of app.html.eex so just including my script in the relevant page doesn’t work as Jquery is loaded yet.
I don’t want to include my script in app.html.eex for all pages as it is rather large and only required for a few pages (for reference it is a graph library and I only have a few pages with graphs - the majority don’t require them).
cheers
Dave
1 Like
I’m getting a warning on this webpage (looks like they didn’t update their ssl certificate), but it’s essentially what I’ve been doing:
https://blog.diacode.com/page-specific-javascript-in-phoenix-framework-pt-1
Shared common JavaScript between views
Before continuing let’s first think about what our good old web application is going to need. There’s probably going to be some common js functionality shared across the whole application, like handling pulldown menus in the header, initialazing third party plugins, etc. Having this in mind we can create our first js module that will be in charge of all this common functionality that needs to be executed on every page:
// web/static/js/views/main.js
export default class MainView {
mount() {
// This will be executed when the document loads…
console.log(‘MainView mounted’);
}
unmount() {
// This will be executed when the document unloads…
console.log(‘MainView unmounted’);
}
}
The MainView module will basically have to main functions:
mount which will be called every time the page loads and will contain all the initializing of common functionality needed.
umount which can be used to add any functionality needed to be executed when the document unloads. This might be useful in some situations like showing a confirm alert to the user when he tries to leave an edit view with unsaved changes, for example.
Now let’s update the main app.js file so it uses the new MainView module:
// web/static/js/app.js
import ‘phoenix_html’;
import MainView from ‘./views/main’;
function handleDOMContentLoaded() {
const view = new MainView();
view.mount();
window.currentView = view;
}
function handleDocumentUnload() {
window.currentView.unmount();
}
window.addEventListener(‘DOMContentLoaded’, handleDOMContentLoaded, false);
window.addEventListener(‘unload’, handleDocumentUnload, false);
Note I’m not quoting the entire article.
After the MainView is working, you can add a View to every individual subpage that loads page-specific javascript.
This has been my practice for my past few Phoenix apps.
Thanks Greg - I’ll have a read of the full article.
I was going to post this as I also have been using it but then I noticed someone commented that the app.js still gets the contents of those files concatenated - and I just checked and indeed it seems so - which (kinda…) partially defeats the purpose. If somebody knows how to handle the compilation of js in brunch in order to exclude certain files from the concatenated app.js but still have them be accessible as imports would be great ^
1 Like
I’m not sure how to accomplish that.
Where I’ve been using it is to change behavior of the UI in different parts of the app. It hasn’t been after saving bandwidth, as I’ve been doing pretty much everything in vanilla JS or very specific frameworks (like fabric.js).
For example, there are several ways to display a map or other feature and load the other UI features.
You can have an if statement that only uses the relevant parts of the code in app.js. Or you can have that code only execute in separate modules, like the technique in the link.
That was enough to solve my dilemma of a very messy app.js. I couldn’t find an obvious way of doing what you wanted when I originally sought it out a few months ago, or at least anything with a simple search term I could think of. Maybe by doing something with Brunch and Phoenix itself? But, I really don’t know. I saw the second part of that article was about webpack, and that may be required to do something like that. It didn’t seem worth it for what I was doing.
*Edited because the second part is webpack, not jetpack
A very easy but slightly hacky method is to put <script src="new_script.js"></script> in the body of the page and then use setTimeout in your code until `window.jQuery’ is loaded:
function defer(method) {
if (window.jQuery) {
method();
} else {
setTimeout(function() { defer(method) }, 50);
}
}
From this Stack Overflow answer: https://stackoverflow.com/a/17914854/175830
1 Like
What I do on my polymerized pages is I pass a extra_javascript option to the assigns being a list of what extra javascript to bring in for a page to work, and my primary view just loads those in, in-order, after my app.js as well.
But really, get rid of jQuery, it is not useful anymore and if you want the functionality there are shims that are much faster now too.
3 Likes
You can also use Phoenix.View.render_exiting/3. Check out the “Rendering based on controller template” section in the doc
2 Likes
if String.contains? @conn.request_path, "somepage" do
LIB
end
Sounds to me like you need different bundles for different pages. While the brunch configuration is typically in brunch-config.js it also supports
-c, --config [path] specify a path to Brunch config file
So you could simply have a separate configuration for each separate bundle and move the script tag for the bundle from the “layout” to the “page” so that each page references the actual bundle that it needs.
Now other tools can support multiple bundles per configuration - for example rollup’s configuration file can be a single configuration object or an array of configuration objects.
1 Like
I got the same problem with managing javascript for specific page, I come up with a solution, please checkout my blog post
https://medium.com/@hoang_nguyen/organize-and-serve-page-specific-javascript-in-phoenix-with-webpack-47a24d169c03
2 Likes
@hoangvn2404 or anyone that can help me…
I’m trying to make this work but I would like to have the index.ts script that loads specif js file, in javascript es6 instead of typescript. I never used typescript before.
Is it to possible to rewrite this ts code in es6 ?
Thanks.
Well, so since brunch is replaced now by webpack in Phoenix 1.4, I wonder if that does not solve the problem. I will try it again.
Typescript is basically just javascript with types. You can run it through babal to strip the type tags automatically while still checking, or you can just remove the type tags as after that then you are left with just bog standard normal javascript. 
Really though, if you have to do javascript then I’d recommend using typescript on top of it, it’s taken over and it is always better to have your types checked.
1 Like
Latelly I’ve been using nuxt on all of my front-ends as a separate “app” and phoenix as an api for it, nuxt kinda works out of the box in terms of chunking your assets as long as you use imports in your JS with their webpack config and the routes are also separated automatically.
If you want to create bundles of files I think you need to tell webpack specifically what are your entry points, how to chunk and then import/async load the js files (and CSS files if you also want them bundled). I haven’t done that in some time but I think you can find examples easily. I just googled and found this https://itnext.io/react-router-and-webpack-v4-code-splitting-using-splitchunksplugin-f0a48f110312 for react, it seems to cover most of what you would need even if not using react.
1 Like
Hey Folks! I have faced the same issue as the original one on this topic. It seems many things have changed since then, I use Phoenix v1.7.2 and all advice here is not suitable.
Does anyone know how to make js files template specific? Like for admin template we will use admin.js, for home template it is home.js and so on so forth.
Also afaiu last version of Phoenix doesn’t use webpack and /priv/static/assets is being built by something else, is it possible to not create a single app.js there but a bunch of js-files?
Check this topic, I gave an answer there.
1 Like
